jquery ui
DESCRIPTION
TRANSCRIPT
Jquery UI Introduction
Nguyen Thanh Trung - WD Team07/12/2012
2
Objective
What is jQuery UI?
Explorer JqueryUI
Jquery UI compare with the other (DOJO,YUI..)
Demo
3
What is Jquery UI
jQuery UI is a set of plug-ins for Jquery that add new functionalities to the Jquery core library
4
What is Jquery UI
History
5
Explorer Jquery UI
Interactions
Widgets
Effects
Utilities
Theming
6
Explorer Jquery UI
Interactions
Draggable
Droppable
Resizable
Selectable
Sortable
7
Explorer Jquery UI
Draggable
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
<div class="demo">
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</div><!-- End demo -->
$(selector).draggable(option)
8
Explorer Jquery UI
Droppable
<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>
$(selector).droppable(option)
9
Explorer Jquery UI
Resizable
<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 -->
$(selector).resizable(option)
10
Explorer Jquery UI
Selectable
<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>
$(selector).selectable(option)
11
Explorer Jquery UI
Sortable
<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>
$(selector).sorttable(option)
12
Explorer Jquery UI
Widgets
Accordion
Autocomplete
Button
Datepicker
Dialog
Progressbar
Slider
Tabs
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>
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>
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>
16
Explorer Jquery UI
Datepicker
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
<p>Date: <input id="datepicker" type="text"></p>
</div><!-- End demo -->
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>
18
Explorer Jquery UI
Progressbar
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 37
});
});
</script>
<div id="progressbar"></div>
19
Explorer Jquery UI
Slider
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
<div id="slider"></div>
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>
21
Explorer Jquery UI
Effects
Color Animation
Toggle Class
Add Class
Remove Class
Switch Class
Effect
Toggle
Hide
Show
22
Explorer Jquery UI
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] )
Effects
23
Explorer Jquery UI
Utilities
Position
Widget
24
Explorer Jquery UI
Theming
Theming jQuery UI
jQuery UI CSS Framework
ThemeRoller application
Theme Switcher Widget
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
26
Explorer Jquery UI
Jquery UI CSS Framework
Layout Helpers
Widget Containers
Interaction States
Interaction Cues
Icons
Misc Visuals
27
Explorer Jquery UI
Layout Helpers
.ui-helper-hidden
.ui-helper-hidden-accessible
.ui-helper-reset
.ui-helper-clearfix
.ui-helper-zfix
28
Explorer Jquery UI
Widget Containers
.ui-widget
.ui-widget-header
.ui-widget-content
29
Explorer Jquery UI
Interaction States
.ui-state-default
.ui-state-hover
.ui-state-focus
.ui-state-active
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
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
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
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
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>
35
Jquery UI Compare with the other
Table of Javascript Frameworkst
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks#Table_of_Javascript_Frameworks
detail
36
Jquery UI Compare with the other
Browser Support
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks#Table_of_Javascript_Frameworks
detail
37
Jquery UI Compare with the other
Features
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks#Table_of_Javascript_Frameworks
38
Reference
Jquery UI (O'Reilly Media)
Jquery UI Themes (Adam Boduch)
Demo