2. Installing jQuery UI
Go to : http://jqueryui.com/download/
● Choose all the features you want in the library (leave all)
● Choose a theme or design your own theme
● Click download
● Drag the js library to your project (copy)
● In your file add both jQuery and jQuery UI files
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
Inbal Geffen
3. jQuery UI Features
Interactions
Add basic mouse-based behaviors to any element.
You can create sortable lists, resizable elements, drag & drop behaviors and more with
just a few lines or code.
Interactions also make great building blocks for more complex widgets and
applications.
What kind of interactions are available?
● Draggable
● Droppable
● Resizable
● Selectable
● Sortable
Inbal Geffen
9. jQuery UI Features
Effects
● Effect
● Visibility
○ Show
○ Hide
○ Toggle
● Class Animation
○ Add Class
○ Remove Class
○ Toggle Class
○ Switch Class
● Color Animation
Inbal Geffen
10. jQuery UI Features
function runEffect() {
var selectedEffect = $( "#effectTypes" ).val(); //get effect type
var options = {}; // most effect types need no options passed by default
if ( selectedEffect === "scale" ) { // some effects have required parameters
options = { percent: 0 };
} else if ( selectedEffect === "transfer" ) {
options = { to: "#button", className: "ui-effects-transfer" };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
// run the effect
$( "#effect" ).effect( selectedEffect, options, 500, callback );
};
// callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
Inbal Geffen