J queryui

487 views
402 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
487
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

J queryui

  1. 1. jQuery UIInbal Geffen
  2. 2. Installing jQuery UIGo 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. 3. jQuery UI FeaturesInteractionsAdd basic mouse-based behaviors to any element.You can create sortable lists, resizable elements, drag & drop behaviors and more withjust a few lines or code.Interactions also make great building blocks for more complex widgets andapplications.What kind of interactions are available? ● Draggable ● Droppable ● Resizable ● Selectable ● SortableInbal Geffen
  4. 4. Draggable<!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> Inbal Geffen
  5. 5. Droppable<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> Inbal Geffen
  6. 6. jQuery UI FeaturesWidgetsFull-featured UI controls that bring the richness of desktop applications to the Web. ● Accordion ● Autocomplete ● Button ● Datepicker ● Dialog ● Menu ● Progressbar ● Slider ● Spinner ● Tabs ● TooltipInbal Geffen
  7. 7. Datepicker<script> $(function() { $( "#datepicker" ).datepicker(); }); </script></head><body><p>Date: <input type="text" id="datepicker" /></p> Inbal Geffen
  8. 8. Datepicker2<script> $(function() { $( "#datepicker" ).datepicker({ numberOfMonths: 3, showButtonPanel: true }); }); </script></head><body><p>Date: <input type="text" id="datepicker" /></p> Inbal Geffen
  9. 9. jQuery UI FeaturesEffects ● Effect ● Visibility ○ Show ○ Hide ○ Toggle ● Class Animation ○ Add Class ○ Remove Class ○ Toggle Class ○ Switch Class ● Color AnimationInbal Geffen
  10. 10. jQuery UI Featuresfunction 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

×