j queryui
TRANSCRIPT
jQuery UI
Inbal Geffen
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
jQuery UI Features
InteractionsAdd 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
<!doctype html><head>
<script src="js/jquery-1.8.3.js"></script><script src="js/jquery-ui-1.9.2.custom.min.js"></script><style>#draggable { width: 150px; height: 150px; padding: 0.5em; }</style><script>$(function() {
$( "#draggable" ).draggable();});</script>
</head><body>
<div id="draggable" class="ui-widget-content"><p>Drag me around</p>
</div>
</body></html>
Draggable
Inbal Geffen
Droppable
Inbal Geffen
<script>$(function() {
$( "#draggable" ).draggable();$( "#droppable" ).droppable({
drop: function( event, ui ) {$( this )
.addClass( "ui-state-highlight" )
.find( "p" ).html( "Dropped!" );
}});
});</script>
</head><body><div id="draggable" class="ui-widget-content"><p>Drag me to my target</p></div>
<div id="droppable" class="ui-widget-header"><p>Drop here</p></div>
jQuery UI Features
Widgets
Full-featured UI controls that bring the richness of desktop applications to the Web.
● Accordion● Autocomplete● Button● Datepicker● Dialog● Menu● Progressbar● Slider● Spinner● Tabs● Tooltip
Inbal Geffen
<script>$(function() {
$( "#datepicker" ).datepicker();});</script>
</head><body>
<p>Date: <input type="text" id="datepicker" /></p>
Datepicker
Inbal Geffen
<script>$(function() {
$( "#datepicker" ).datepicker({numberOfMonths: 3,showButtonPanel: true
});});</script>
</head><body>
<p>Date: <input type="text" id="datepicker" /></p>
Datepicker2
Inbal Geffen
Effects
● Effect● Visibility
○ Show○ Hide○ Toggle
● Class Animation○ Add Class○ Remove Class○ Toggle Class○ Switch Class
● Color Animation
jQuery UI Features
Inbal Geffen
function runEffect() {var selectedEffect = $( "#effectTypes" ).val(); //get effect typevar options = {}; // most effect types need no options passed by defaultif ( 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 backfunction callback() {
setTimeout(function() {$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );};
jQuery UI Features
Inbal Geffen