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