learning jquery made exciting in an interactive session by one of our team members
TRANSCRIPT
![Page 1: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/1.jpg)
By: Mustafa Jhabuawala
write less, do more.
![Page 2: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/2.jpg)
• I am not the master, but I want to be
• Don’t hesitate in asking questions
• At any point of time, correct me if I am wrong
• Both way interactions will be helpful for me to transfer knowledge
Help me help you
![Page 3: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/3.jpg)
How jQuery came into existence can somebody tell me ?
https://youtu.be/TUDsR2dFwFg
![Page 4: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/4.jpg)
What to learn first ?
JavaScript OR jQuery
https://youtu.be/5Jb6twTF2lY
![Page 5: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/5.jpg)
JavaScript JQuery
JavaScript is a language. JQuery is a framework.
It is most popular scripting language on internet which works on all major browsers.
It is a fast and concise JavaScript library that simplifies HTML document.
If you use JavaScript, you need to write own script which may take time.
If you use JQuery, you need not to write much scripting which already exists in libraries.
JavaScript VS jQuery
![Page 6: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/6.jpg)
Overview
• jQuery, at its core, is a DOM (Document Object Model) manipulation library.
• The DOM is a tree-structure representation of all the elements of a Web page and jQuery simplifies the syntax for finding, selecting, and manipulating these DOM elements.
• For example, jQuery can be used for finding an element in the document with a certain property (e.g. all elements with an h1 tag), changing one or more of its attributes (e.g. color, visibility), or making it respond to an event (e.g. a mouse click).
The Document Object
Model (DOM) is a cross-
platform and language-
independent convention for
representing and interacting
with objects in HTML,
XHTML, and XML
documents
![Page 7: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/7.jpg)
• jQuery is a fast, small, and feature-rich JavaScript library.
• It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across multiple browsers.
• With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
https://youtu.be/Jpkum92pBAc
What is jQuery ?
![Page 8: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/8.jpg)
Who s Using jQuery ?
![Page 9: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/9.jpg)
• HTML document traversal and manipulation Event handling
• Animation
• Ajax
• Simpler with an easy-to-use API
• Works across a multiple browsers
Used for
![Page 10: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/10.jpg)
![Page 11: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/11.jpg)
![Page 12: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/12.jpg)
jQuery rescues us by working the same in all browsers
![Page 13: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/13.jpg)
• Lightweight
• Cross Browser Compatible
• Easier to write jQuery than pure JavaScript
Why jQuery ?
![Page 14: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/14.jpg)
How to Start
Download jQuery
http://jquery.com/download/
OR
Hosted Libraries
![Page 15: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/15.jpg)
Embed in your page
Visual force
<apex:includeScript value="{!URLFOR($Resource.ResourceName, '/jsFiles/jQuery.js')}"/>
Other
<script src=“path/to/jquery-x.x.js"></script>
CDN Link
<script src=“//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
![Page 16: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/16.jpg)
Core Methods
Ready
• Specify a function to execute when the DOM is fully loaded.
• E.g.
$( document ).ready(function() {
// Handler for .ready() called.
});
noConflict
• Relinquish jQuery s control of the $ variable.
• E.g.
var $j = jQuery.noConflict();
$j(document).ready(function() {
// Handler for .ready() called.
});
![Page 17: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/17.jpg)
jQuery Philosophy
Find Some HTML
Do Something
to it
You are done
![Page 18: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/18.jpg)
jQuery Philosophy
$ div .addClass xyz ;
Find Some Elements
Do something with them
{ }
jQuery Object
![Page 19: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/19.jpg)
jQuery Selectors
JQUERY Selectors
Basic
Attribute Child
![Page 20: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/20.jpg)
Basic Selectors
Name Description Example
All Selector (“*”)
Selects all elements. $( "*" ).css( "border", "3px solid red" );
Class Selector (“.class”) Selects all elements with the given class.
$( ".myClass" ).css( "border", "3px solid red" );
Element Selector (“element”)
Selects all elements with the given tag name.
$( "div" ).css( "border", "9px solid red" );
ID Selector (“#id”) Selects a single element with the given id attribute.
$( "#myDiv" ).css( "border", "3px solid red" );
Multiple Selector (“selector1, selector2, selectorN”)
Selects the combined results of all the specified selectors.
$( "div, span" ).css( "border", "3px solid red" );
![Page 21: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/21.jpg)
Attribute Selectors
Name Description Example
Attribute Contains Selector [name*="value"]
Selects elements that have the specified attribute with a value containing a given substring.
$( "input[name*='man']" ).val( "has man in it!" );
Attribute Equal Selector [name="value"]
Selects elements that have the specified attribute with a value exactly equal to a certain value.
$( "input[name='milkman']" ).val( "changed value using exact match" );
![Page 22: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/22.jpg)
Child Selectors
Name Description Example
:first-child Selector Selects all elements that are the first child of their parent.
$( "div span:first-child" ).css( "text-decoration", "underline" );
![Page 23: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/23.jpg)
CSS Methods
Name Description Example
css() Get the value of a style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.
var bgcolor = $( "div" ).css( "background-color" ); $( "div" ).css( "background-color", "blue" );
addClass()
Adds the specified class(es) to each of the set of matched elements.
$( "p" ).addClass( "myClass yourClass" );
removeClass() Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
$( "p" ).removeClass( "myClass yourClass" );
![Page 24: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/24.jpg)
jQuery Events
JQUERY Events
Form
Keyboard Mouse
![Page 25: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/25.jpg)
Form Events
Name Description Example
blur() Bind an event handler to the "blur" JavaScript event.
<input id="target" type="text" value="Field 1"> $( "#target" ).blur(function() { alert( "Handler for .blur() called." ); });
focus() Bind an event handler to the "focus" JavaScript event.
<input id="target" type="text" value="Field 1"> $( "#target" ).focus (function() { alert( "Handler for .focus() called." ); });
change() Bind an event handler to the "change" JavaScript event.
<input id="target" type="text" value="Field 1"> $( "#target" ).change (function() { alert( "Handler for .change() called." ); });
![Page 26: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/26.jpg)
Mouse Events
Name Description Example
click() Bind an event handler to
the “click” JavaScript event, or trigger that
event on an element.
<div id="target" class="divClass/>
$( "#target" ).click (function() {
alert( "Handler for .click() called." );
});
dblclick() Bind an event handler to
the “dblclick” JavaScript event, or trigger that
event on an element.
<div id="target" class="divClass/> $( "#target" ).dblclick (function() { alert( "Handler for .click() called." ); });
mouseenter() Bind an event handler to
the “mouseenter” JavaScript event, or trigger
that event on an element.
<div id="target" class="divClass/> $( "#target" ).mouseenter (function() { alert( "Handler for .mouseenter() called." ); });
mouseleave() Bind an event handler to
the “mouseleave” JavaScript event, or trigger
that event on an element.
<div id="target" class="divClass/> $( "#target" ).mouseleave (function() { alert( "Handler for .mouseleave() called." ); });
![Page 27: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/27.jpg)
Keyboard Events
Name Description Example
keyup() Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.
<input id="target" type="text" value="Field 1"> $( "#target" ).keyup (function() { alert( "Handler for .keyup() called." ); });
keydown() Bind an event handler to the “keydown” JavaScript event, or trigger that event on an element.
<input id="target" type="text" value="Field 1"> $( "#target" ).keydown (function() { alert( "Handler for .keyup() called." ); });
![Page 28: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/28.jpg)
One Method, Many Uses
$(...).html();
$ ... .html <p>hello</p> ;
$(...).html(function(i){
return <p>hello + i + </p> ;
});
![Page 29: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/29.jpg)
append(), appendTo(), before(), after()
jQuery Methods
Moving Elements
Attributes
Events
Effects
Traversing
Ajax
css(), attr(), html(), val(), addClass()
show(), fadeOut(), toggle(), animate()
bind(), trigger(), unbind(), live(), click() find(), is(), prevAll(), next(), hasClass()
get(), getJSON(), post(), ajax(), load()
![Page 30: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/30.jpg)
Moving Elements Examples
Get element with ID foo and add some HTML.
$(“#foo”).append(“<p>test</p>”);
<html>
<body>
<div>jQuery</div>
<div id=”foo”>example</div>
</body>
</html>
![Page 31: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/31.jpg)
Get element with ID foo and add some HTML.
$(“#foo”).append(“<p>test</p>”);
<html>
<body>
<div>jQuery</div>
<div id=”foo”>example<p>test</p></div>
</body>
</html>
Moving Elements Examples
![Page 32: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/32.jpg)
Move paragraphs to element with id “foo”
$(“p”)
<html>
<body>
<div>jQuery
<p>moving</p>
<p>paragraphs</p>
</div>
<div id=”foo”>example</div>
</body>
</html>
Moving Elements Examples
![Page 33: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/33.jpg)
Move paragraphs to element with id “foo”
$(“p”).appendTo(“#foo”);
<html>
<body>
<div>jQuery
<p>moving</p>
<p>paragraphs</p>
</div>
<div id=”foo”>example</div>
</body>
</html>
Moving Elements Examples
![Page 34: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/34.jpg)
Moving Elements Examples
Move paragraphs to element with id “foo”
$(“p”).appendTo(“#foo”);
<html>
<body>
<div>jQuery</div>
<div id=”foo”>example
<p>moving</p>
<p>paragraphs</p>
</div>
</body>
</html>
![Page 35: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/35.jpg)
Attributes
![Page 36: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/36.jpg)
Attributes
Get
.attr id
.html()
.val()
.css top
.width()
Set
.attr id , foo
.html <p>hi</p>
.val new val
.css top , 80px
.width(60)
![Page 37: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/37.jpg)
Attributes
Set border to 1px black
$(...).css(“border”, “1px solid black”);
Set various css properties
$(...).css({
“background”: “yellow”, “height”: “400px” });
Set all link’s href attribute to google.com
$(“a”).attr(“href”, “http://google.com”);
![Page 38: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/38.jpg)
Attributes Replace HTML with a new paragraph
$(...).html(“<p>I’m new</p>”);
<div>whatever</div> turns into
<div><p>I’m new</p></div>
Set checkboxes attribute “checked” to checked
$(“:checkbox”).attr(“checked”,”checked”);
Get input value
$(...).val();
Set input value to 3
$(...).val(“3”);
![Page 39: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/39.jpg)
Events
![Page 40: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/40.jpg)
Events
When a button is clicked, do something.
$(“button”).click(function(){
something();
});
Setup a custom event and trigger it.
$(“button“).bind(“click”, function(){
something();
});
$(“button“).bind(“customEvent”, function(){
something();
});
$(“button:first“).trigger(“customEvent”);
Unbind custom event.
$(“button“).unbind(“click”);
![Page 41: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/41.jpg)
Event Delegation
Attach events to document
Attach an event handler for all elements which match the current selector, now and in the future.
$(“button”).live(‘click’, function(){
something();
});
Attach event delegation to elements
Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
$(“form“).delegate(“button”, ”click”, function(){
something();
});
![Page 42: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/42.jpg)
Effects / Animation
![Page 43: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/43.jpg)
Effects / Animations
Types of Effects
Hide and Show
Fade In and Out
Slide Up and Down
![Page 44: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/44.jpg)
Effects / Animations
With each click, slide up / slide down a div
Display or hide the matched elements with a sliding motion
$(...).click(function(){
$(“div:first”).slideToggle();
});
Animate elements to 300px wide in .5 seconds
Perform a custom animation of a set of CSS properties
$(...).animate({ “width”: “300px” }, 500);
Take focus off elements by fading them to
30% opacity in .5 seconds
Adjust the opacity of the matched elements
$(...).fadeTo(500, 0.3);
![Page 45: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/45.jpg)
Power of jQuery
• jQuery is free
• Works in all browsers and is the most popular JavaScript
library currently being used.
• Large development community and many plugins.
• Large software companies, like Microsoft, supports
using jQuery in their applications
• Very good documentation
• Lightweight
• Chaining capabilities are very powerful.
![Page 46: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/46.jpg)
Limitations
• Functionality maybe limited
• JQuery JavaScript file required
![Page 47: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/47.jpg)
User Interface
![Page 48: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/48.jpg)
• Collection of widgets, animated visual effects and themes
• Implemented with jQuery (a JavaScript library), CSS and HTML
What is JQuery UI ?
![Page 49: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/49.jpg)
Features
• Used to build highly interactive web applications.
• Provides built in widgets, interactions and effects with pre-defined styles
![Page 50: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/50.jpg)
Steps to build custom JQuery UI
Click Download!
Choose a Version of jQuery UI
Select a Theme (or Roll Your Own Custom Theme)
Choose Which Components You Need
Go to jqueryui.com
![Page 51: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/51.jpg)
What You Need To Work With JQuery UI ?
• jquery-ui.css – Contains different styles provided by jQuery UI
• jquery-ui.js – Contains JavaScript code for functioning of controls provided
by jQuery UI
You'll need to include two files on any page to use the jQuery UI library
![Page 52: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/52.jpg)
Embed in your page
Visual force
• <apex:includeScript value=“{!$Resource.jquery-ui.js}”/>
• <apex:stylesheet value=“{!$Resource.jquery-ui.css}”/>
Other
• <link rel=“stylesheet” href=“../jquery-ui.css”>
• <script src=“../jquery-ui.js”></script>
CDN Link
• <script src=“//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js”></script>
• <link rel=“stylesheet” href=“//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css”></script>
![Page 53: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/53.jpg)
What JQuery UI offers?
Interactions
Effects
Widgets Utilities
Themes
![Page 54: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/54.jpg)
Interactions add basic mouse-based behaviors to any element.
Interactions
Interactions
Draggable
Droppable
Resizable Selectable
Sortable
![Page 55: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/55.jpg)
Widgets are full-featured UI controls that bring the richness of desktop applications to the Web.
Widgets
Widgets
Accordion
Autocomplete
Button
Tabs
Menu Dialog
Datepicker
Spinner
Tooltip
![Page 56: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/56.jpg)
Accordion • Collapsible content panels for presenting information in a limited amount of space.
HTML <div id="accordion"> <h3>ASP.NET</h3> <div>First panel accordion sample.</div> <h3>CSS</h3> <div>Second panel accordion sample.</div> <h3>Javascript</h3> <div>Third panel accordion sample.</div> <h3>Other</h3> <div>Fourth panel accordion sample.</div> </div> jQuery $( "#accordion" ).accordion();
![Page 57: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/57.jpg)
Dialog
Open content in an interactive overlay.
HTML <div id="dialog"> <p>Dialog sample data</p> </div> <a href="#" id="dialog-link">Open Dialog</a> jQuery: $( "#dialog" ).dialog({width: 400,buttons: [{ text: "Ok", click: function() {$( this ).dialog( "close" );}},] }); $( "#dialog-link" ).click(function( event ) { $( "#dialog" ).dialog( "open" );} );
![Page 58: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/58.jpg)
Power of jQuery UI
• Cross browser compatibility
• Lightweight and Fast
• Open source library
• Easy to learn and flexible
• Lots of extendable and reusable Plug-ins
• Effects and animations
• Utility features
• JQuery User Interface
• JQuery Mobile
![Page 59: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/59.jpg)
Limitations
• Functionality may be limited
• jQuery JavaScript file is required
![Page 60: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/60.jpg)
Power of jQuery and jQuery UI
![Page 61: Learning jQuery made exciting in an interactive session by one of our team members](https://reader037.vdocument.in/reader037/viewer/2022110219/5870ee791a28abcf288b78a3/html5/thumbnails/61.jpg)
Thank You