jQuery Widget

Header

header for no widget

  <script type="text/javascript"  src="http://code.jquery.com/jquery-latest.js"></script>

header for widgets (from jQuery)

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

header for widgets (from Google)

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Accordian

use accordian

sample here >> http://jqueryui.com/accordion/
detail here >> http://api.jqueryui.com/accordion/
  $("#accordion").accordion(); << various options available

NOTE:
default accordian open ONLY ONE section at a time
sample of accordian open multiple sections here
>> http://stackoverflow.com/questions/12190592/jquery-accordion-multiple-sections-open-at-once
>> http://jsfiddle.net/akhurshid/WDzh9/

Datepicker

use datepicker

sample here >> http://jqueryui.com/datepicker/ (demo of various options here)
detail here >> http://api.jqueryui.com/datepicker/
  $("#datepicker").datepicker(); << various option available

Dialog

use dialog

sample here >> http://jqueryui.com/dialog/
detail here >> http://api.jqueryui.com/dialog/
  $("#dialog").dialog(); << various options available

dialog with OK button

  $("#dialog").dialog({;
    buttons: {"OK" : function() {
      $(this).dialog("close"); } }
    });
  });
  ...
  <div id="dialog" title="Dialog Title"> ...dialog content... </div>

dialog with input form

  $("#dialog").dialog({
    buttons: {"Ok": function() { $(this).dialog("close"); } },
    beforeclose: function(event, ui) {      << beforeClose event
       $("#results").text("You entered " +
       $("#text").val())                    << get value from <input> element
    }
  });
  ...
  <div id="dialog" title="Dialog Title">
    <input type="text" id="text"></input>
  </div>

Progresbar

use progressbar

sample here >> http://jqueryui.com/progressbar/
detail here >> http://api.jqueryui.com/progressbar/
  $("#progressbar").progressbar({'value', 80}); << set initial value

Slider

use slider

sample here >> http://jqueryui.com/slider/
detail here >> http://api.jqueryui.com/slider/
  $("#slider").slider({
    range:"max",
    min: 1,
    max: 100,
    value:2,
    slide: function(event, ui) {
      $("#results").val(ui.value) << ui.value = slider value AFTER moved (i.e. after this event)
    }
  });
  ...
  <div id="slider"></div>
  <input type="text" id="results" />

Tab

use tab

sample here >> http://jqueryui.com/tab/
detail here >> http://api.jqueryui.com/tab/
  $("tabs").tabs()
  ...
  <div id="tabs">
  <ul>
    <li><a href="#tabs-1">...label for tab 1 (content local)...</a></li>
    <li><a href="#tabs-2">...label for tab 2 (content local)...</a></li>
    <li><a href="http://...">...label for tab 3 (content outside)...</a></li>
  </ul>
  <div id="tabs-1">
    content for tab 1
  </div>
  <div id="tabs-2">
    content for tab 2
  </div>
</div>