jQuery UI Version

(1)

Rakesh Singh

NARESH I TECHNOLOGIES Hyderabad

(2)

Introduction

to

(3)

Introduction:



JQuery is a lightweight cross-browser JavaScript library.



JQuery is the most popular JavaScript library in use today.



It is also called "Write Less, Do More Library".



It was released in January 2006 at BarCamp NYC by John Resig. BarCamp is an

international network of user-generated conferences primarily focused around

technology and the Web.



jQuery is free, open source software.



jQuery is a fast, small, and feature-rich JavaScript library. It makes things like

HTML document traversal and manipulation, event handling, animation, and Ajax

interactions for rapid web development and it is much simpler with an

easy-to-use API that works across a multitude of browsers.



With a combination of versatility and extensibility, jQuery has changed the way

that millions of people write JavaScript.

Objectives:



Design and build rich interactive web applications.



Creating interactive user interface.



The jQuery library makes it easy to manipulate a page of HTML after it's displayed

by the browser.



It also provides tools that help you listen for a user to interact with your page,

tools that help you create animations in your page, and tools that let you

communicate with a server without reloading the page.

Who's Using jQuery?

(4)

jQuery Features:



DOM Element Selections Functions



DOM Attributes



DOM Traversal and Modification



Event Handling



CSS Manipulation



Effects and Animations



jQuery UI



jQuery Ajax



Extensibility through Plugins



Cross Browser Support

Why jQuery?



The jQuery library is providing many easy to use functions and methods to make

rich web applications.



These functions are very easy to learn and even a designer can learn it fast. Due

to these features jQuery is very popular and in high demand among the

developers.



We can use jQuery in all the web based applications irrespective of the technology

such as JSP, Servlets, Classic ASP, ASP.NET, PHP, CGI and almost all the web

technologies.

What is the purpose of jQuery?



The purpose of jQuery is to make it much easier to use JavaScript on your website.



JQuery is designed to change the way that we write JavaScript code.

Who should attend?

(5)

Applicable Job Roles:



Web Designer



UI Web Developer.

Pre-Requisites:

Good Understanding of HTML:



HTML is a language for describing web pages.



It stands for Hyper Text Markup Language.



It is not a programming language, it is a markup language.



A markup language is a set of markup tags.



The purposes of the tags are to describe page content.

Experience working with CSS:



CSS is used to control the style of a web document in a simple and easy way.



CSS stands for Cascading Style Sheet.CSS is a simple design language intended to

simplify the process of making web pages presentable.



CSS handles the look and feel part of a web page.



Using CSS, you can control the color of the text, the style of fonts, the spacing

between paragraphs, how columns are sized and laid out, what background

images or colors are used, as well as a variety of other effects.



CSS is easy to learn and understand but it provides powerful control over the

presentation of an HTML document. Most commonly, CSS is combined with the

markup languages HTML or XHTML.

Experience working with JavaScript:



JavaScript is a scripting language produced by Netscape for use within HTML Web

pages.



JavaScript is mainly a client-side scripting language



JavaScript is used to create dynamic web pages



JavaScript is embedded into HTML



JavaScript is executed on the client’s computer

(6)

jQuery UI

jQuery is the most popular JavaScript library in use today.

Developers love jQuery because it:



Is compact and runs faster than most other freely available libraries



Allows for quick and precise retrieval of DOM elements using CSS selector syntax



Supplies a large number of methods for manipulating sets of retrieved DOM

elements



Simplifies adding event listeners and callbacks to DOM elements



Provides broad support for implementing Ajax requests and responding to

different events during the course of an Ajax call



Allows the development of plugins that expand its capabilities

jQuery UI is among the more frequently-used plugins for the jQuery library. It helps

front-end developers to implement popular user interface components like tabs,

accordions, dialog boxes, and calendar-based date selectors. It also supports the

implementation of "interaction helpers" that make elements draggable, droppable,

resizable, selectable, or sortable.

Mastery of jQuery and jQuery UI can greatly enhance your development team's

capabilities and productivity level.

jQuery is a popular JavaScript library that is extensible using plug-ins. Some plug-ins,

specifically those for managing the user interface, have been collected together in the

jQuery UI library

. These plug-ins help facilitate interaction with the user, and these

interactions are simpler to manage if you use jQuery only.

Various jQuery plugins are available to add interactive features to ASP.NET web

applications. A popular plugin is the jQuery UI, built on top of the jQuery library, and

(7)

jQuery UI is the child of jQuery. It is a user interface framework build with jQuery

Library. Do you know that jQuery-UI comes with Visual Studio 2012 by default? Yes,

the default User Interface framework which comes with Visual Studio for Web is

jQuery-UI. When you create a Web Forms project or MVC project (Not an empty project),

jQuery-UI Libraries will be available in it. It will even have the essential widgets to

create a basic website.

Official Definition of jQuery UI:

“jQuery UI is a curated set of user interface interactions, effects, widgets, and themes

built on top of the jQuery JavaScript Library.

==> Whether you're building highly interactive web applications or you just

need to add a date picker to a form control, jQuery UI is the perfect choice.

”

jQuery UI is free, open source software.

jQuery UI is a set of plug-ins for jQuery that add new functionalities to the jQuery core

library.

The Latest Library Version of jQuery UI is jquery-ui-1.11.4.custom.js (Development

Version or Uncompressed) or jquery-ui-1.11.4.custom.min.js (Production Version or

Compressed/Minified).

In-Order to use jQuery UI Library, It requires Core Library i.e. 1.6+.

The Latest Core Library Version of jQuery is

jquery-1.11.3.js/jquery-1.11.3.min.js (1.x) or jquery-2.1.4.js/jquery-2.1.4.min.js (2.x)

Downloading jQuery:

Compressed and uncompressed copies of jQuery files are available. The uncompressed

file is best used during development or debugging; the compressed file saves bandwidth

and improves performance in production.

You

can

download

these

libraries

from

the

official

website

i.e.

http://jqueryui.com/download/

Even you can download the library at http://jqueryui.com. Click the Stable link. This

leads directly to a ZIP file containing the sources, examples, and documentation for

jQuery UI. Once the file is downloaded, transfer the contents to a jQuery UI directory.

This

jQuery UI

directory now contains the following:

• A

css

subdirectory containing the CSS files associated with jQuery UI. You will see that jQuery

UI handles CSS themes to give a custom look to the interface elements it manages. For example,

the display of sliders may be different from one theme to another, as well as other items like

calendars and tabs.

(8)

• A

development-bundle

subdirectory containing various subdirectories -

demos

(jQuery UI sample files),

docs

(files containing the jQuery UI documentation),

themes

(files for

each of the CSS themes associated with jQuery UI), and

ui

(jQuery UI JavaScript files).

• An

index.html

file that allows you to view some of the features of jQuery UI in a browser.

Downloading jQuery Using Manage NuGet Packages:

A collection of tools to automate the process of downloading, installing, upgrading, configuring,

and removing packages from a Visual Studio Project.

Finding a Package:

In Solution Explorer, right-click the Application Root node and click Manage NuGet Packages....

(9)

Browse through the list, or search for a package using the search box at the top right

of the dialog box. For example, to find the Juice UI package named JUICE UI, enter

“juiceui".

Long lists are divided into pages. Use the paging links at the bottom to move from page

to page.

When you select a package, an Install button appears, and a description is shown in the

right-hand pane.

Now if you click Install Button in the window, the corresponding jQuery UI &

Dependencies Libraries (Core Library) will be installed in Scripts Folder automatically.

Using jQuery with a CDN:

CDNs can offer a performance benefit by hosting jQuery on servers spread across the

globe. This also offers an advantage that if the visitor to your webpage has already

downloaded a copy of jQuery from the same CDN, it won't have to be re-downloaded.

Link jQuery's CDN provided by MaxCDN

To use the jQuery CDN, just reference the file directly from http://code.jquery.com in

the script tag:

Other CDNs

The following CDNs also host compressed and uncompressed versions of jQuery releases.

Google

CDN, Microsoft CDN, CDNJS CDN, jsDelivr CDN

jQuery UI Features:

jQuery UI includes following features:

1) jQuery UI Effects

2) jQuery UI Widgets

3) jQuery UI Interactions

4) jQuery UI Themes

jQuery UI Effects:

jQuery Core Effects:

(10)

These are following functions that can be used to apply effects with graceful

animation on a set of matched element(s):

 Show(Speed, [Callback])

 Hide(Speed, [Callback])

 Toggle(Speed, [Callback])

 FadeIn(Speed ,[Callback])

 FadeOut (Speed ,[Callback])

 FadeToggle(Speed ,[Callback])

 FadeTo(Speed ,To, [Callback])

 SlideUp(Speed ,[Callback])

 SlideDown(Speed ,[Callback])

 SlideToggle (Speed ,[Callback])

 Animate(params, duration, [Callback])

show( speed, [callback] ): Show all matched elements using a graceful animation and firing an optional callback function after its completion.

hide( speed, [callback] ): Hide all matched elements using a graceful animation and firing an optional callback after completion.

toggle( speed, [callback] ): Toggle displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion.

fadeIn( speed, [callback] ): Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.

fadeOut( speed, [callback] ): Fade out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion.

fadeToggle( speed, [callback] ): Toggle between fading in and fading out each of the set of matched elements using a graceful animation and firing an optional callback after completion.

fadeTo( speed, opacity, [callback] ):Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.

slideUp( speed, [callback] ): Hide all matched elements by adjusting their height and firing an optional callback after completion.

slideDown( speed, [callback] ): Reveal all matched elements by adjusting their height and firing an optional callback after completion.

slideToggle( speed, [callback] ): Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.

(11)

Examples:

Ex-1: Show(), Hide(), Toggle()

Source View:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs" Inherits="_Default"%>

<!DOCTYPEhtml>

<htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server">

<scriptsrc="Scripts/jquery-2.1.4.js"type="text/javascript"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$("#btn1").click(function(){

$("#Panel1").show(2000);

});

$("#Panel1").hide(2000);

});

$("#Panel1").toggle(2000);

});

</script>

<styletype="text/css">

#Panel1 { padding:10px; margin:10px;

border:5pxsolidblue; border-radius: 10px;

box-shadow: 10px10px10pxgray; width:400px;

height:300px;

background-color:yellow; }

</style> </head> <body>

<formid="form1"runat="server">

<divalign="center">

<inputtype="button"id="btn1"value="Show"/>

(12)

<inputtype="button"id="btn3"value="Toggle"/>

<br/>

<asp:PanelID="Panel1"runat="server">

<asp:ImageID="Image1"runat="server"ImageUrl="~/Images/Ads2.jpg"Width="400"Height="300"/>

</asp:Panel>

</div>

</form> </body> </html>

Ex-2: Display a set of images one after one with graceful animation using show(), hide() method when the DOM is ready.

Source View:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2"%>

<!DOCTYPEhtml>

varc=1;

functionchangeImage(){

switch(c){

case0:

$("#Image1").prop("src","Images/Ads1.jpg").show(3000,function(){

$(this).hide(3000);

});

c=1;

break;

(13)

$(this).hide(3000);

});

c=2;

break;

case2:

$(this).hide(3000);

});

c=3;

break;

case3:

$(this).hide(3000);

});

c=4;

break;

case4:

$(this).hide(3000);

});

c=0;

break;

}

$("#Image1").hide();

$("#Image1").show(3000,function(){

$(this).hide(3000);

});

window.setInterval(changeImage,6000);

});

</script>

#Image1 { padding: 10px; margin: 10px;

border: 10pxsolidblue; border-radius: 10px;

box-shadow: 20px20px20pxred; width: 700px;

height: 500px;

background-color: yellow; }

<asp:PanelID="Panel1"runat="server"HorizontalAlign="Center">

<asp:ImageID="Image1"runat="server"ImageUrl="~/Images/Ads1.jpg"/>

</asp:Panel>

(14)

Ex-3: fadeIn(), fadeOut(), fadeToggle(), fadeTo() Method

Source View:

<!DOCTYPEhtml>

<htmlxmlns="http://www.w3.org/1999/xhtml"> <headid="Head1"runat="server">

$("#Panel1").fadeIn(2000);

});

$("#Panel1").fadeOut(2500);

});

$("#Panel1").fadeToggle(1500);

});

$("#Panel1").fadeTo(2500,.2);

});

</script>

#Panel1 { padding:10px; margin:10px;

(15)

height:300px;

<divalign="center">

<inputtype="button"id="btn1"value="FadeIn"/>

<inputtype="button"id="btn2"value="FadeOut"/>

<inputtype="button"id="btn3"value="FadeToggle"/>

<inputtype="button"id="btn4"value="FadeTo"/>

<br/>

</asp:Panel>

</div>

Ex-4: Display a set of images one after one with graceful animation using fadeIn(), fadeOut() method when the DOM is ready.

Source View:

<!DOCTYPEhtml>

varc=1;

(16)

case0:

$("#Image1").prop("src","Images/Ads1.jpg").fadeIn(2000,function(){

$(this).fadeOut(2000);

});

c=1;

break;

case1:

});

c=2;

break;

case2:

});

c=3;

break;

case3:

});

c=4;

break;

case4:

});

c=0;

break;

}

$("#Image1").fadeIn(2000,function(){

});

</script>

#Image1 { padding: 10px; margin: 10px;

height: 500px;

(17)

</asp:Panel>

Ex-5: Display an image with fade effect on mouseover event of any of below image:

Source View:

<!DOCTYPEhtml>

$(".class").mouseover(function(){

varid=$(this).prop("id");

varimgSrc=$(this).prop("src");

varvisible=$("#imgMain").css("display");

if(visible=="none"){

(18)

$("#"+id).css("background-color","red");

$("#imgMain").prop("src",imgSrc).fadeIn(1000);

}

else{

$(".class").css("background-color","yellow");

$("#"+id).css("background-color","red");

$("#imgMain").fadeOut(1000,function(){

$(this).prop("src",imgSrc).fadeIn(1000);

});

}

});

</script>

.class {

margin: 10px; padding: 10px;

border: 5pxsolidgreen; border-radius: 20px; background-color: yellow; width: 200px;

height: 100px; cursor: pointer; }

<divalign="center"style="height: 500px">

<asp:ImageID="imgMain"runat="server"ImageUrl="~/Images/Ads1.jpg"AlternateText="Image Banner"

Style="width: 750px; height: 450px; border: 2pxsolidgreen; border-radius: 5px; display: none"/>

</div>

<divalign="center"width="100%">

<asp:ImageID="img1"runat="server"ImageUrl="~/Images/Ads1.jpg"AlternateText="Image1"

CssClass="class"/>

<asp:ImageID="img5"runat="server"ImageUrl="~/Images/Ads5.jpg"alt="Image5"CssClass="class"/>

</div>

(19)

Ex-6:

slideUp(), slideDown(), slideToggle() Method

Source View:

<!DOCTYPEhtml>

$("#Image1").slideUp(2000);

});

$("#Image1").slideDown(2000);

});

$("#Image1").slideToggle(2000);

});

</script>

#Image1 { padding:10px; margin:10px;

(20)

height:300px;

<divalign="center">

<inputtype="button"id="btn1"value="SlideUp"/>

<inputtype="button"id="btn2"value="SlideDown"/>

<inputtype="button"id="btn3"value="SlideToggle"/>

<br/>

</asp:Panel>

</div>

Ex-7: Display a set of images one after one automatically with graceful animation using slideUp(), slideDown() method when the DOM is ready.

Source View:

<!DOCTYPEhtml>

(21)

varc=1;

switch(c){

case0:

$("#Image1").prop("src","Images/Ads1.jpg").slideDown(2000,function(){

$(this).slideUp(2000);

});

c=1;

break;

case1:

});

c=2;

break;

case2:

});

c=3;

break;

case3:

});

c=4;

break;

case4:

});

c=0;

break;

}

$("#Image1").slideDown(2000,function(){

});

</script>

#Image1 { padding: 10px; margin: 10px;

height: 500px;

(22)

} </style> </head> <body>

</asp:Panel>

Ex-8: animate() Method

The animate() method performs a custom animation of a set of CSS properties.

This method changes an element from one state to another with CSS styles. The CSS property

value is changed gradually, to create an animated effect.

Only numeric values can be animated (like "margin: 30px"). String values cannot be animated

(like "background-color: red").

Note: Use "+=" or "-=" for relative animations.

Syntax

$(selector).animate({styles},speed,[callback])

Parameters Description

styles Required. Specifies one or more CSS properties/values to animate.

Note: The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.

Properties that can be animated:

 backgroundPositionX  backgroundPositionY  borderWidth

 borderBottomWidth  borderLeftWidth  borderRightWidth  borderTopWidth  borderSpacing  margin

 marginBottom  marginLeft  marginRight  marginTop  outlineWidth  padding

(23)

 paddingTop  height  width  maxHeight  maxWidth  minHeight  minWidth  fontSize  bottom  left  right  top

 letterSpacing  wordSpacing  lineHeight  textIndent

Tip: Color animations are not included in the core jQuery library. If you want to animate color, you need to download the Color Animations plugin from jQuery.com

speed Optional. Specifies the speed of the animation. Possible values:

 milliseconds

 "slow"

 “normal”  "fast"

callback Optional. A function to be executed after the animation callbacks.

(24)

Source View:

<!DOCTYPEhtml>

$("#btnOut").click(function(){

$("#divMain").animate({

width:"95%",

opacity:0.3,

fontSize:"80px",

borderWidth:"20px"

},1500);

});

$("#btnIn").click(function(){

$("#divMain").animate({

width:"150",

opacity:1.0,

fontSize:"15px",

borderWidth:"5px"

},1500);

});

</script>

<style>

#divMain {

background-color: yellow; width: 150px;

border: 5pxsolidgreen; border-radius: 10px; padding: 5px; margin: 5px; font-size: 15px; }

<p>Click on any of the buttons to animate the box</p>

<inputtype="button"id="btnOut"value="Animate Out"/>

<inputtype="button"id="btnIn"value="Animate In"/>

<br/>

<divid="divMain">

Hello jQuery Animation </div>

(25)

Ex-II:

Source View:

<!DOCTYPEhtml>

varflag=true;

$("#btnAnimate").click(function(){

if(flag==true){

$("#Image1").animate({

left:"800px",

width:"500px",

height:"500px",

opacity:0.3,

borderWidth:"20px"

},1500,function(){

$(this).prop("src","Images/Ads3.jpg");

});

flag=false;

}

else{

$("#Image1").animate({

left:"10px",

width:"200px",

height:"150px",

opacity:1,

(26)

},1500,function(){

$(this).prop("src","Images/Ads2.jpg");

});

flag=true;

}

});

</script>

#Image1 {

position: absolute; padding: 10px; margin: 10px;

height: 150px;

<divalign="center">

<inputtype="button"id="btnAnimate"value="Animate Toggle"/>

</div>

<br/>

Ex-III: animate() with color animation as well as stop() method to stop the animation:

Source View:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default10.aspx.cs"Inherits="Default10" %>

<!DOCTYPEhtml>

(27)

<scriptsrc="Scripts/jquery-ui-1.11.4.custom.js"type="text/javascript"></script>

vardiv=$("#divMain");

functionstartAnimation(){

div.animate({

width:"95%",

backgroundColor:"maroon",

color:"white",

fontSize:80,

padding:30

},"slow");

div.animate({

height:500,

backgroundColor:"blue",

color:"white",

fontSize:100

},"slow");

div.animate({

width:150,

backgroundColor:"Red",

color:"yellow",

fontSize:27,

padding:5

},"slow");

div.animate({

height:50,

backgroundColor:"yellow",

color:"blue"

},"slow",startAnimation);

}

$("#btnStart").click(function(){

startAnimation();

});

$("#btnStop").click(function(){

div.stop(true);//It Stops the current & queued animations too

});

</script> </head> <body>

<inputtype="button"id="btnStart"value="Start Animation"/>

<inputtype="button"id="btnStop"value="Stop Animation"/>

<divid="divMain"style="width: 150px; height: 50px; background-color: yellow; color: red; font-size: 27px;

line-height: 50px; border: 5pxsolidgray; padding: 5px;">

Hello jQuery </div>

(28)

jQuery Easings:

Easing functions specify the speed at which an animation progresses at different points within the animation. jQuery core ships with two easings: linear, which progresses at a constant pace throughout the animation, and swing (jQuery core's default easing), which progresses slightly slower at the beginning and end of the animation than it does in the middle of the animation. jQuery UI provides several additional easing functions, ranging from variations on the swing behaviour to customized effects such as bouncing.

Some easings will result in negative values during the animation. Depending on the properties that are being animated, the actual value may be clamped at zero. For example, you can animate left to a negative value, but you cannot animate height or opacity to a negative value.

Follow the following below link to know more about easings:

http://api.jqueryui.com/easings/

These are the following jQuery UI easing options:

1. linear

2. swing

(29)

29. easeInOutBack

30. easeInBounce

31. easeOutBounce

32. easeInOutBounce

All easings mentioned above are provided by jQuery UI.

These are following syntax to use easing while applying the effects:

$(Selector).show( duration [, easing ] [, callback ] )

$(Selector).hide( duration [, easing ] [, callback ] )

$(Selector).toggle( duration [, easing ] [, callback ] )

$(Selector).fadeIn( duration [, easing ] [, callback ] )

$(Selector).fadeOut( duration [, easing ] [, callback ] )

$(Selector).fadeToggle( duration [, easing ] [, callback ] )

$(Selector).fadeTo( duration, opacity [, easing ] [, callback ] )

$(Selector).slideUp( duration [, easing ] [, callback ] )

$(Selector).slideDown( duration [, easing ] [, callback ] )

$(Selector).slideToggle( duration [, easing ] [, callback ] )

$(Selector).animate( properties [, duration ] [, easing ] [, callback ] )

(30)

Source View:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default11.aspx.cs"Inherits="Default11" %>

<!DOCTYPEhtml>

<scriptsrc="Scripts/jquery-ui-1.11.4.js"type="text/javascript"></script>

$("#btnTest").click(function(){

easeType=$('#ddlEasings').val();

effectType=$('#ddlEffects').val();

testDuration=parseInt($('#txtDuration').val());

if(effectType=='fadeIn()'){

$('#Image1').fadeIn(testDuration,easeType)

}

elseif(effectType=='fadeOut()'){

$('#Image1').fadeOut(testDuration,easeType)

}

elseif(effectType=='slideDown()'){

$('#Image1').slideDown(testDuration,easeType)

}

elseif(effectType=='slideUp()'){

$('#Image1').slideUp(testDuration,easeType)

}

elseif(effectType=='slideToggle()'){

$('#Image1').slideToggle(testDuration,easeType)

}

elseif(effectType=='fadeToggle()'){

$('#Image1').fadeToggle(testDuration,easeType)

}

elseif(effectType=='show()'){

$('#Image1').show(testDuration,easeType)

}

elseif(effectType=='hide()'){

$('#Image1').hide(testDuration,easeType)

}

elseif(effectType=='toggle()'){

$('#Image1').toggle(testDuration,easeType)

}

elseif(effectType=='animate()'){

$("#Image1")

.animate({height:"hide",width:"hide"},testDuration,easeType)

.animate({height:"show",width:"show"},testDuration,easeType);

}

});

$("#btnReset").click(function(){

effectType=$('#ddlEffects').val();

if(effectType=='fadeIn()'){

$('#Image1').fadeOut(0)

}

elseif(effectType=='fadeOut()'){

(31)

}

elseif(effectType=='slideDown()'){

$('#Image1').slideUp(0)

}

elseif(effectType=='slideUp()'){

$('#Image1').slideDown(0)

}

elseif(effectType=='slideToggle()'){

$('#Image1').slideUp(0)

}

elseif(effectType=='fadeToggle()'){

$('#Image1').fadeOut(0)

}

elseif(effectType=='show()'){

$('#Image1').hide(0)

}

elseif(effectType=='hide()'){

$('#Image1').show(0)

}

elseif(effectType=='toggle()'){

$('#Image1').hide(0)

}

});

</script>

#Image1 { padding: 10px; margin: 10px;

height: 300px;

<h1>jQuery Easing Examples</h1>

<tablewidth="100%">

<tr>

<tdwidth="60%"valign="top">

</asp:Panel>

</td>

<tdvalign="top">Choose an easing type:

<asp:DropDownListID="ddlEasings"runat="server">

<asp:ListItem>linear</asp:ListItem>

<asp:ListItem>swing</asp:ListItem>

<asp:ListItem>jswing</asp:ListItem>

<asp:ListItem>easeInQuad</asp:ListItem>

<asp:ListItem>easeInCubic</asp:ListItem>

<asp:ListItem>easeInQuart</asp:ListItem>

<asp:ListItem>easeInQuint</asp:ListItem>

<asp:ListItem>easeInSine</asp:ListItem>

(32)

<asp:ListItem>easeInCirc</asp:ListItem>

<asp:ListItem>easeInElastic</asp:ListItem>

<asp:ListItem>easeInBack</asp:ListItem>

<asp:ListItem>easeInBounce</asp:ListItem>

<asp:ListItem>easeOutQuad</asp:ListItem>

<asp:ListItem>easeOutCubic</asp:ListItem>

<asp:ListItem>easeOutQuart</asp:ListItem>

<asp:ListItem>easeOutQuint</asp:ListItem>

<asp:ListItem>easeOutSine</asp:ListItem>

<asp:ListItem>easeOutExpo</asp:ListItem>

<asp:ListItem>easeOutCirc</asp:ListItem>

<asp:ListItem>easeOutElastic</asp:ListItem>

<asp:ListItem>easeOutBack</asp:ListItem>

<asp:ListItem>easeOutBounce</asp:ListItem>

<asp:ListItem>easeInOutQuad</asp:ListItem>

<asp:ListItem>easeInOutCubic</asp:ListItem>

<asp:ListItem>easeInOutQuart</asp:ListItem>

<asp:ListItem>easeInOutQuint</asp:ListItem>

<asp:ListItem>easeInOutSine</asp:ListItem>

<asp:ListItem>easeInOutExpo</asp:ListItem>

<asp:ListItem>easeInOutCirc</asp:ListItem>

<asp:ListItem>easeInOutElastic</asp:ListItem>

<asp:ListItem>easeInOutBack</asp:ListItem>

<asp:ListItem>easeInOutBounce</asp:ListItem>

</asp:DropDownList>

<br/>

Choose an effect:

<asp:DropDownListID="ddlEffects"runat="server">

<asp:ListItemSelected="True">slideToggle()</asp:ListItem>

<asp:ListItem>fadeToggle()</asp:ListItem>

<asp:ListItem>slideUp()</asp:ListItem>

<asp:ListItem>slideDown()</asp:ListItem>

<asp:ListItem>fadeOut()</asp:ListItem>

<asp:ListItem>fadeIn()</asp:ListItem>

<asp:ListItem>show()</asp:ListItem>

<asp:ListItem>hide()</asp:ListItem>

<asp:ListItem>toggle()</asp:ListItem>

<asp:ListItem>animate()</asp:ListItem>

</asp:DropDownList>

<br/>

Effect Duration (in milliseconds):<asp:TextBoxID="txtDuration" runat="server"

Text="1000"></asp:TextBox>

<p>

</p>

</td>

</tr>

</table>

(33)

jQuery UI also provides the following:

• New visual effects

• Improvement of the

animate () method

• The ability to use CSS classes to produce effects

New Visual Effects

In addition to the slideUp, slideDown, slideToggle, fadeIn, fadeOut, fadeTo, show, hide,

and toggle effects available in standard jQuery, jQuery UI offers a range of new visual

effects. All these effects can be used by calling the new effect (effectName, options,

duration, callback) method, which works on jQuery class objects returned by jQuery().

jQuery UI Library Based Effects:

A rich effect API and ready to use effects.



Blind



Bounce



Clip



Drop



Explode



Fade



Fold



Highlight



Puff



Pulsate



Scale



Shake



Size



Slide

(34)

jQuery UI Widgets:

Full-featured UI Controls - each has a range of options and is fully themeable.

•

Accordion

•

Autocomplete

•

Button

•

Datepicker

•

Dialog

•

Menu

•

Progressbar

•

Slider

•

Spinner

•

Tabs

•

Tooltip

jQuery UI Interactions:

These add basic behaviours to any element and are used by many components below.



Draggable



Droppable



Resizable



Selectable



Sortable

jQuery UI Themes: