Your SlideShare is downloading. ×
0
Jquery UI Introduction    Nguyen Thanh Trung - WD Team                       07/12/2012
Objective    What is jQuery UI?    Explorer JqueryUI    Jquery UI compare with the other (DOJO,YUI..)    Demo         ...
What is Jquery UIjQuery UI is a set of plug-ins for Jquery that add new functionalities to the Jquery core library        ...
What is Jquery UIHistory                    4
Explorer Jquery UI Interactions Widgets Effects Utilities Theming                     5
Explorer Jquery UI                     Interactions Draggable Droppable Resizable Selectable Sortable                ...
Explorer Jquery UI                                              Draggable$(selector).draggable(option)<script>     $(funct...
Explorer Jquery UI                                                    Droppable$(selector).droppable(option)<script>     $...
Explorer Jquery UI                                                 Resizable$(selector).resizable(option)<script>     $(fu...
Explorer Jquery UI                                                    Selectable$(selector).selectable(option)<script>    ...
Explorer Jquery UI                                              Sortable $(selector).sorttable(option) <script>      $(fun...
Explorer Jquery UI                     Widgets  Accordion  Autocomplete  Button  Datepicker  Dialog  Progressbar  S...
Explorer Jquery UI                                              Accordion<script>     $(function() {          $( "#accordi...
Explorer Jquery UI                                        Autocomplete<script>     $(function() {          var availableTa...
Explorer Jquery UI                                                      Buttons<script>     $(function() {          $( "in...
Explorer Jquery UI                                               Datepicker<script>     $(function() {            $( "#dat...
Explorer Jquery UI                                                    dialog<script>     $(function() {           $( "#dia...
Explorer Jquery UI                                                Progressbar<script>     $(function() {            $( "#p...
Explorer Jquery UI                                       Slider<script>     $(function() {            $( "#slider" ).slide...
Explorer Jquery UI                                                   Tabs<script>     $(function() {           $( "#tabs" ...
Explorer Jquery UI                     Effects Color Animation Toggle Class Add Class Remove Class Switch Class Effe...
Explorer Jquery UI                                          Effects ToggleClass : toggleClass( class, [duration] )  Add Cl...
Explorer Jquery UI                     Utilities Position Widget                         23
Explorer Jquery UI                            Theming Theming jQuery UI jQuery UI CSS Framework ThemeRoller application...
Explorer Jquery UI                               Theming Jquery UI There are three general approaches to theming jQuery UI...
Explorer Jquery UI                       Jquery UI CSS Framework  Layout Helpers  Widget Containers  Interaction States  I...
Explorer Jquery UI                           Layout Helpers.ui-helper-hidden.ui-helper-hidden-accessible.ui-helper-reset.u...
Explorer Jquery UI                     Widget Containers.ui-widget.ui-widget-header.ui-widget-content                     ...
Explorer Jquery UI                     Interaction States .ui-state-default .ui-state-hover .ui-state-focus .ui-state-acti...
Explorer Jquery UI                         Interaction Cues.ui-state-highlight.ui-state-error.ui-state-error-text.ui-state...
Explorer Jquery UI                                              Icons- States and images  .ui-icon- Icon types   .ui-icon-...
Explorer Jquery UI                                          Misc Visuals- Corner Radius helpers .ui-corner-tl, .ui-corner-...
Explorer Jquery UI                                       ThemeRollerThemeRoller is a web app that offers a funand intuitiv...
Explorer Jquery UI                                    Theme Switcher Widget<script> $(document).ready(function(){  $(#swit...
Jquery UI Compare with the otherTable of Javascript Frameworkst detail http://en.wikipedia.org/wiki/Comparison_of_JavaScri...
Jquery UI Compare with the otherBrowser Support detail http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks#Ta...
Jquery UI Compare with the otherFeatures   http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks#Table_of_Javas...
Reference            Jquery UI (OReilly Media)            Jquery UI Themes (Adam Boduch)                               38
Demo
Upcoming SlideShare
Loading in...5
×

Jquery ui

1,175

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,175
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
42
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Jquery ui"

  1. 1. Jquery UI Introduction Nguyen Thanh Trung - WD Team 07/12/2012
  2. 2. Objective  What is jQuery UI?  Explorer JqueryUI  Jquery UI compare with the other (DOJO,YUI..)  Demo 2
  3. 3. What is Jquery UIjQuery UI is a set of plug-ins for Jquery that add new functionalities to the Jquery core library 3
  4. 4. What is Jquery UIHistory 4
  5. 5. Explorer Jquery UI Interactions Widgets Effects Utilities Theming 5
  6. 6. Explorer Jquery UI Interactions Draggable Droppable Resizable Selectable Sortable 6
  7. 7. Explorer Jquery UI Draggable$(selector).draggable(option)<script> $(function() { $( "#draggable" ).draggable(); });</script><div class="demo"> <div id="draggable" class="ui-widget-content"> <p>Drag me around</p> </div></div><!-- End demo --> 7
  8. 8. Explorer Jquery UI Droppable$(selector).droppable(option)<script> $(function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" ); } }); });</script><div class="demo"> <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> 8
  9. 9. Explorer Jquery UI Resizable$(selector).resizable(option)<script> $(function() { $( "#resizable" ).resizable(); }); </script><div class="demo"><div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Resizable</h3></div></div><!-- End demo --> 9
  10. 10. Explorer Jquery UI Selectable$(selector).selectable(option)<script> $(function() { $( "#selectable" ).selectable(); });</script><ol id="selectable"> <li class="ui-widget-content">Item 1</li> <li class="ui-widget-content">Item 2</li> <li class="ui-widget-content">Item 3</li></ol> 10
  11. 11. Explorer Jquery UI Sortable $(selector).sorttable(option) <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script> <ul id="sortable"> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> ….... <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> </ul> 11
  12. 12. Explorer Jquery UI Widgets  Accordion  Autocomplete  Button  Datepicker  Dialog  Progressbar  Slider  Tabs 12
  13. 13. Explorer Jquery UI Accordion<script> $(function() { $( "#accordion" ).accordion(); });</script><div id="accordion"> <h3><a href="#">Section 1</a></h3> <div> <p> Mauris mauris ante, blandit et, ultrices a, </p> </div> <h3><a href="#">Section 2</a></h3> <div> <p> Sed non urna. Donec et ante. Phasellus eu ligula. </p> </div></div> 13
  14. 14. Explorer Jquery UI Autocomplete<script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", ….., "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script><div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags"></div> 14
  15. 15. Explorer Jquery UI Buttons<script> $(function() { $( "input:submit, a, button").button(); $( "a", ".demo" ).click(function() { return false; }); });</script><button>A button element</button><input value="A submit button" type="submit"><a href="#">An anchor</a> 15
  16. 16. Explorer Jquery UI Datepicker<script> $(function() { $( "#datepicker" ).datepicker(); });</script><div class="demo"> <p>Date: <input id="datepicker" type="text"></p></div><!-- End demo --> 16
  17. 17. Explorer Jquery UI dialog<script> $(function() { $( "#dialog" ).dialog(); }); </script><div id="dialog" title="Basic dialog"> <p>This is the default dialog which is useful for displayinginformation. The dialog window can be moved, resized andclosed with the x icon.</p></div> 17
  18. 18. Explorer Jquery UI Progressbar<script> $(function() { $( "#progressbar" ).progressbar({ value: 37 }); });</script><div id="progressbar"></div> 18
  19. 19. Explorer Jquery UI Slider<script> $(function() { $( "#slider" ).slider(); });</script><div id="slider"></div> 19
  20. 20. Explorer Jquery UI Tabs<script> $(function() { $( "#tabs" ).tabs(); });</script><div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehiculatempus, commodo a, risus. Curabitur nec arcu. </p> </div> <div id="tabs-2"> <p>Proin elit arcu, rutrum commodo, vehiculatempus, commodo a, risus. Curabitur nec arcu. </p> </div></div> 20
  21. 21. Explorer Jquery UI Effects Color Animation Toggle Class Add Class Remove Class Switch Class Effect Toggle Hide Show 21
  22. 22. Explorer Jquery UI Effects ToggleClass : toggleClass( class, [duration] ) Add Class : addClass( class, [duration] ) RemoveClass: removeClass( [class], [duration] ) SwitchClass : switchClass( remove, add, [duration] ) Effect : effect( effect, [options], [speed], [callback] ) Toggle : toggle( effect, [options], [speed], [callback] ) Hide: hide( effect, [options], [speed], [callback] ) Show : show( effect, [options], [speed], [callback] ) 22
  23. 23. Explorer Jquery UI Utilities Position Widget 23
  24. 24. Explorer Jquery UI Theming Theming jQuery UI jQuery UI CSS Framework ThemeRoller application Theme Switcher Widget 24
  25. 25. Explorer Jquery UI Theming Jquery UI There are three general approaches to theming jQuery UI plugins: - Download a ThemeRoller theme - Modify the CSS files - Write completely custom CSS 25
  26. 26. Explorer Jquery UI Jquery UI CSS Framework Layout Helpers Widget Containers Interaction States Interaction Cues Icons Misc Visuals 26
  27. 27. Explorer Jquery UI Layout Helpers.ui-helper-hidden.ui-helper-hidden-accessible.ui-helper-reset.ui-helper-clearfix.ui-helper-zfix 27
  28. 28. Explorer Jquery UI Widget Containers.ui-widget.ui-widget-header.ui-widget-content 28
  29. 29. Explorer Jquery UI Interaction States .ui-state-default .ui-state-hover .ui-state-focus .ui-state-active 29
  30. 30. Explorer Jquery UI Interaction Cues.ui-state-highlight.ui-state-error.ui-state-error-text.ui-state-disabled.ui-priority-primary.ui-priority-secondary 30
  31. 31. Explorer Jquery UI Icons- States and images .ui-icon- Icon types .ui-icon-{icon type}-{icon sub description}-{direction}. Example : ui-icon-circle-triangle-e ui-icon-circle-triangle-s ui-icon-circle-triangle-w ui-icon-circle-triangle-n 31
  32. 32. Explorer Jquery UI Misc Visuals- Corner Radius helpers .ui-corner-tl, .ui-corner-tr, .ui-corner-bl, .ui-corner-br .ui-corner-top, .ui-corner-bottom, .ui-corner-right, .ui-corner-left, .ui-corner-all- Overlay & Shadow .ui-widget-overlay .ui-widget-shadow 32
  33. 33. Explorer Jquery UI ThemeRollerThemeRoller is a web app that offers a funand intuitive interface for designing anddownloading custom themes for jQuery UI 33
  34. 34. Explorer Jquery UI Theme Switcher Widget<script> $(document).ready(function(){ $(#switcher).themeswitcher(); }); </script><script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script><div id="switcher"></div> 34
  35. 35. Jquery UI Compare with the otherTable of Javascript Frameworkst detail http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks#Table_of_Javascript_Frameworks 35
  36. 36. Jquery UI Compare with the otherBrowser Support detail http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks#Table_of_Javascript_Frameworks 36
  37. 37. Jquery UI Compare with the otherFeatures http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks#Table_of_Javascript_Frameworks 37
  38. 38. Reference Jquery UI (OReilly Media) Jquery UI Themes (Adam Boduch) 38
  39. 39. Demo
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×