- What is jQuery UI
- Build something
<!doctype html>
<html>
<head>
<link href="/css/ui-lightness.css" />
<link href="/css/style.css" />
</head>
<body>
<div></div>
<script src="/js/jquery.js"></script>
<script src="/js/jqueryui.js"></script>
<!-- add your plugins and custom script tags here -->
</body>
</html><div class="accordion">
<div>
<h3><a href="#">Download jQuery UI</a></h3>
<div>
<input type="checkbox" class="completed">
<strong>Download jQuery UI</strong>
<div>
Go to
<a href="http://jqueryui.com/download">
http://jqueryui.com/download</a>
to download jQuery UI.
</div>
<div>
<strong>Date due:</strong> 11/15/2011
</div>
</div>
</div>
</div>$(".accordion").accordion({
// setting the active option to false allows for no item
// to be open and active. The default is that one item
// is always open.
active: false,
// setting autoHeight to false allows for each item to
// have a dynamic height.
autoHeight: false,
// collapsible set to true allows the accordion to have no open items.
collapsible: true,
// header defines the element of the item that is the header.
header: "> div > h3"
});<button class="AddToDo">Add Task</button>$(".AddToDo").button();<div id="AddToDoItem" title="Add To Do Item">
<p>Use the form below to add a to do item
to the list.
</p>
<div>
<label for="task">Task:</label>
<input type="text" id="task">
</div>
<div>
<label for="description">Description:</label>
<textarea id="description"></textarea>
</div>
<div>
<label for="duedate">Date due:</label>
<input type="text" id="duedate">
</div>
</div>$("#AddToDoItem").dialog({
modal: true,
autoOpen: false,
buttons: {
"Add to do item": function() {
// Takes the input and creates a new accordion item
// Add a new task
},
"Cancel": function() {
// Clears all the input fields.
// Close the dialog
}
}
});"Cancel": function() {
// Clear the field in the dialog
$("#task, #description, #duedate").val("");
// close the dialog
$(this).dialog("close");
}"Add to do item": function() {
//create a JSON object to pass the data from the form to the template.
var newItem = [{
task: $("#task").val(),
description: $("#description").val(),
duedate: $("#duedate").val()
}];
// Select the template, render it with the JSON data above and append it to
// the visible accordion.
$("#ToDoItemTemplate").tmpl(newItem).appendTo(".accordion");
// Call the refreshAccordion to add the new item to the accordion
$(".accordion").refreshAccordion();
// Close the dialog
$(this).dialog("close");
// Clear the fields in the dialog
$("#task, #description, #duedate").val("");
}$("#duedate").datepicker();$(".AddToDo").live("click", function() {
// Select the DOM that represents the dialog
$("#AddToDoItem").dialog('open');
});$(".accordion").sortable({
// constrain movement to the y axis only
axis: "y",
// define which element will be the handle when sorting.
handle: "h3",
// stop: event that handles when the element being sorted has stopped.
// In this instance we are setting the global stop variable which
// helps determine if the todo item is in movement.
stop: function() {
stop = true;
},
// Don't sort elements with class ui-state-disabled.
cancel : ".ui-state-disabled"
});// If an item is moving during a sort we want to override the default click
// function of the accordion header to allow the sort to happen unimpeded.
$( ".accordion h3" ).click(function( event ) {
// if the item is moving disable the click event for the accordion widget.
if ( stop ) {
// keeps other handlers from being executed and prevents the event from
// bubbling up the DOM tree.
event.stopImmediatePropagation();
// this will prevent the default action of the event from being triggered.
event.preventDefault();
// reset the stop variable
stop = false;
}
});$("input[type=checkbox]").live("click", function(){
$(this)
// Search up through the DOM tree to find the first instance of the selection.
// We are looking for the first parent item with a data attribute of sortable-item.
// This data attribute is set from the sortable interaction widget.
.closest(':data(sortable-item)')
// find the H3 element and trigger a click event to activate and close
// the accordion item.
.find('h3').click()
// return the set of matched elements to it's previous state.
.end()
// Hide the item we are completing with a sliding motion. upon completion
// of the animation fire the callback function.
.slideUp(function () {
// remove this todo item from the DOM.
$(this).remove();
});
});<div id="tabs">
<ul>
<li><a href="#project1">Project 1</a></li>
</ul>
<div id="project1">
All of our existing code goes here.
</div>
</div>$("#tabs").tabs();$("#tabs").tabs({
// tabTemplate: HTML template from which a new tab is created and added.
// The placeholders #{href} and #{label} are replaced with the
// url and tab label that are passed as arguments to
// the add method.
tabTemplate: "<li><a href='#{href}'>#{label}</a>\
<span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
// add (event): This event is triggered when a tab is added.
add: function( event, ui ) {
// Setup a tab based on a jQuery Template defined in the HTML.
$("#newProjectTabTemplate")
.tmpl()
// append the template results to the selected contents.
.appendTo(ui.panel)
// We need to recreate our To Do list accordions to setup the new
// accordion that was created with the new project tab.
.setupToDoList();
}
});"Add new project" : function() {
// using the date to create a unique tab id.
var foo = new Date();
$tabs.tabs("add", "#project-" + foo.getTime(), $("#project").val())
// Select the new tab to make it active.
.tabs("select", $tabs.tabs("length") - 1);
// Close the dialog
$(this).dialog("close");
// Clear the value on the form field in the dialog.
$("#project").val("");
}