jQuery UI

an open source library of interface components (interactions, full-featured widgets, animation effects ) based on jQuery javascript library , that you can use to build highly interactive web applications ,  download it .

From this link Customize your jQuery UI download by selecting the version and specific modules you need.

Also you can Select the theme  you want to include or design a custom theme

Some of this Components

Interactions ( Draggable , Droppable , Resizable ,  Selectable ,  Sortable)
Widgets (Accordion , Autocomplete ,  Button , Datepicker ,  Dialog , Progressbar , Slider , Tabs)
Effects (Color Animation ,Toggle Class , Add Class ,Remove Class ,Switch Class , Effect ,Toggle , Hide ,Show)

Some Examples

Once you’ve downloaded jQuery UI, you’ll get a zip containing the following files:

  • /css/
  • /development-bundle/
  • /js/
  • index.html

you can replace the index.html page with your index page by include these 3 files on any page to use jQuery UI widgets and interactions:

<link type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

Once you’ve included the necessary files, you can add some jQuery widgets to your page.

For example, to make

datepicker widget


Just give Id attribute to a text input element or div tag ……, etc  to your page

HTML Code :

<div id="datepicker"></div>

then call .datepicker();on it

JS Code:

 $("#datepicker").datepicker( ); 

Tabs widget


HTML Code :

<div id="tabs">
     <li><a href="#joinus">Join Us</a></li>
     <li><a href="#contactus">Contact Us</a></li>
     <li><a href="#home">Home</a></li>

   <div id="joinus">join us </div>
   <div id="contactus">contact us</div>
   <div id="home">home</div>

JS Code


accordion widget


HTML Code :

<div id="accordion">
        <h3><a href="#">Required Information</a></h3>
        <div>Required Information</div>
        <h3><a href="#">Personal Information</a></h3>
        <div> Personal Information</div>
        <h3><a href="#">Technical Information</a></h3>
        <div>Technical Information</div>

JS Code

$("#accordion").accordion({ header : "h3"});

Sortable Interactions


HTML Code :

<ul id="sortable">
    <li  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Home Page</li>
    <li  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>News</li>
    <li  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Photos</li>
    <li  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Contact Us</li>
    <li  class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>About Us</li>

JS Code

$( "#sortable" ).sortable();

Selectable Interactions


HTML Code :

<ul id="sortable">
    <li  class="ui-<code>widget-content</code>">Home Page</li>
    <li  class="ui-<code>widget-content</code>">News</li>
    <li  class="ui-<code>widget-content</code>">Photos</li>
    <li  class="ui-<code>widget-content</code>">Contact Us</li>
    <li  class="ui-<code>widget-content</code>">About Us</li>

JS Code

$( "#selectable" ).selectable();

So Simple , Just try 🙂

This is a tutorial to learn it


Good Luck 🙂

  1. #1 by Symbian SyMoh on January 13, 2012 - 1:32 pm

    Awesome Article 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: