![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](https://image.slidesharecdn.com/jqueryui-120711015430-phpapp01/85/Jquery-ui-14-320.jpg)
![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](https://image.slidesharecdn.com/jqueryui-120711015430-phpapp01/85/Jquery-ui-22-320.jpg)
Jquery ui
- 1. Jquery UI Introduction Nguyen Thanh Trung - WD Team 07/12/2012
- 2. Objective What is jQuery UI? Explorer JqueryUI Jquery UI compare with the other (DOJO,YUI..) Demo 2
- 3. What is Jquery UI jQuery UI is a set of plug-ins for Jquery that add new functionalities to the Jquery core library 3
- 4. What is Jquery UI History 4
- 5. Explorer Jquery UI Interactions Widgets Effects Utilities Theming 5
- 6. Explorer Jquery UI Interactions Draggable Droppable Resizable Selectable Sortable 6
- 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. 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. 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. 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. 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. Explorer Jquery UI Widgets Accordion Autocomplete Button Datepicker Dialog Progressbar Slider Tabs 12
- 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. 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. 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. 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. 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 displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> </div> 17
- 18. Explorer Jquery UI Progressbar <script> $(function() { $( "#progressbar" ).progressbar({ value: 37 }); }); </script> <div id="progressbar"></div> 18
- 19. Explorer Jquery UI Slider <script> $(function() { $( "#slider" ).slider(); }); </script> <div id="slider"></div> 19
- 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, vehicula tempus, commodo a, risus. Curabitur nec arcu. </p> </div> <div id="tabs-2"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. </p> </div> </div> 20
- 21. Explorer Jquery UI Effects Color Animation Toggle Class Add Class Remove Class Switch Class Effect Toggle Hide Show 21
- 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. Explorer Jquery UI Utilities Position Widget 23
- 24. Explorer Jquery UI Theming Theming jQuery UI jQuery UI CSS Framework ThemeRoller application Theme Switcher Widget 24
- 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. Explorer Jquery UI Jquery UI CSS Framework Layout Helpers Widget Containers Interaction States Interaction Cues Icons Misc Visuals 26
- 27. Explorer Jquery UI Layout Helpers .ui-helper-hidden .ui-helper-hidden-accessible .ui-helper-reset .ui-helper-clearfix .ui-helper-zfix 27
- 28. Explorer Jquery UI Widget Containers .ui-widget .ui-widget-header .ui-widget-content 28
- 29. Explorer Jquery UI Interaction States .ui-state-default .ui-state-hover .ui-state-focus .ui-state-active 29
- 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. 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. 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. Explorer Jquery UI ThemeRoller ThemeRoller is a web app that offers a fun and intuitive interface for designing and downloading custom themes for jQuery UI 33
- 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. Jquery UI Compare with the other Table of Javascript Frameworkst detail http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks#Table_of_Javascript_Frameworks 35
- 36. Jquery UI Compare with the other Browser Support detail http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks#Table_of_Javascript_Frameworks 36
- 37. Jquery UI Compare with the other Features http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks#Table_of_Javascript_Frameworks 37
- 38. Reference Jquery UI (O'Reilly Media) Jquery UI Themes (Adam Boduch) 38
- 39. Demo