<style>
	#anchor {
		margin: 2px;
	}

	#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
	#sortable li span { position: absolute; margin-left: -1.3em; }

</style>

<script>

	$(function() {
		$(".accordion").accordion({
			collapsible: true, active: -1
		});
	});


	function hider()
	{
		$('#toggler').hide('Slide');
	}

	function reveal()
	{
	    setTimeout(function() {
		    $("#toggler").removeAttr("style").hide().slideDown();
		}, 200);
	}


	$(function() {
		$("#myDate").datepicker();
	});

	$(function() {
		$("#sortable").sortable();
		$("#sortable").disableSelection();
	});

	$(function() {

		$("input:submit, a, button", ".demo").button();

		$("button", ".demo").click(
			function()
			{
				$('.buttonDemo').html('You clicked the button');
			}
		);

		$("input", ".demo").click(
			function()
			{
				$('.buttonDemo').html('You clicked the input');
			}
		);		

		$("a", ".demo").click(
			function()
			{
				$('.buttonDemo').html('You clicked the anchor');
			}

		);

	});
</script>

jQuery UI Examples

jQuery UI is a library for building plush, interactive web pages. It consists of numerous widgets and tools that brighten web pages and move your development away from static, inert pages and towards a more dynamic, animated interface.

Here is the jQuery UI site where you can download the library:

https://jqueryui.com

Here is the theme library:

http://jqueryui.com/themeroller/

In you pages, you should include links to the JQuierUI CSS file, to jQueryUI javaScript and to jQuery itself:

<link href="/charlie/libs/jquery-ui-1.8.18.custom/css/eggplant/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
<script src="/charlie/libs/scripts/jquery.min.js" type="text/javascript"></script>
<scrip<script src="/charlie/libs/jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>

Here is where you can find the CDN hosted jQuery UI links:

For instance:

<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Sample jQuery Ui</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/jquery-ui.min.js" type="text/javascript"></script>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/themes/swanky-purse/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>

<body class="ui-widget-header ui-corner-all">

  <h1 class="ui-widget-header ui-corner-all">Hello jQuery UI</h1>
  <p class="ui-widget-header ui-corner-all">A bit of text.</p>

</body>

</html>

Try it yourself. In the linked demo, I have added a style sheet changer so you can view the different styles that are available.

Examples of how to use a few of the key jQuery widgets are included below after the discussion of jQuery UI styles.

jQuery UI Styles

You can change the styles of the elements on a page by attaching a class defined in the jQuery UI CSS file to it. For instance:

<h2 class="ui-widget-header">My Header</h2>

Above you see an H2 tag with it’s class set to ui-widget-header. This is the style of most of the headers on this page. It is what gives them their three dimensional look. Other important classes include:

ui-widget
ui-widget-header - For headers
ui-widget-content - For tags that display normal content.

Learn more here: jQuery Theming API

Accordian

The accordian control is a jQuery staple that I once used on nearly every page of the Elvenware site. When placed with the proper CSS: you could click on any of the bars created by the code shown below to see them in action:

<div class="accordion">
	<h2><a href="#">Margie Start</a></h2>
	<div>
		<p>Margie Accordian</p>
	</div>
	<h2><a href="#">Charlie Foo</a></h2>
	<div>
		<p>Charlie Accordian</p>
	</div>
</div>

The Data Picker:

When styled correctly the data picker control, shown below, allows users to just click in the “edit control” shown below:

<div class="demo">
	<p>Date: <input id="myDate" type="text"></p>
</div>

<div style="display: none;" class="demo-description">
	<p>Put text here for optional demo mode comments</p>
</div>

Buttons

Here are some fancy looking jQuery UI buttons. When clicked they invoke the JavaScript shown near the bottom of this page.

Just a plain anchor

Here is the code for the buttons shown above:

<div class="demo">
  <button>Button tag used</button>
  <div><input value="An input tag with type submit" type="submit"></div>
  <a href="#">Just a plain anchor</a>
</div>

Put descriptive text here

Slide

The code below shows a technique for hiding and revealing text. You will need to click the buttons to make the text slide in and out.

You can hide me by clicking a button below

My source looks something like this:

<h3">You can hide me by clicking a button below</h3>

My source looks something like this:

``` {.code}

You can hide me by clicking the button below

My source looks like this:

// Code omitted here...

```

Dialogs

I need to put together dialog demo code. For now, you can visit the Nemikor example.

Lists

Use your mouse to sort the items below.

Item1
Item2
Item3

<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Sample jQuery Ui</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/jquery-ui.min.js" type="text/javascript"></script>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/themes/swanky-purse/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script>
    $(function() {
      $("#sortable").sortable();
      $("#sortable").disableSelection();
    });
  </script>
</head>

<body class="ui-widget-header ui-corner-all">

<h1 class="ui-widget-header ui-corner-all">Hello jQuery UI</h1>
<p class="ui-widget-header ui-corner-all">A bit of text.</p>

<h2 class="ui-widget-header ui-corner-all">Bar</h2>

<ul id="sortable" class="ui-widget-header ui-corner-all">
<li class="ui-widget-header ui-corner-all">List 1</li>
<li class="ui-widget-header ui-corner-all">List 1</li>
<li class="ui-widget-header ui-corner-all">List 1</li>
</ul>
</body>

</html>

The JavaScript

You will also want to include a small amount of JavaScript. For instance, the JavaScript for this page looks ike this:

<script>
   $(function() {
      $("#accordion").accordion({
         collapsible: true, active: -1
      });
   });

   function hider()
   {   
      $('#toggler').hide('Slide');
   }

   function reveal()
   {
      $("#toggler").removeAttr("style").hide().fadeIn();
   }


   $(function() {
      $("#myDate").datepicker();
   });

   $(function() {
      $("#sortable").sortable();
      $("#sortable").disableSelection();
   });


   $(function() {

      $("input:submit, a, button", ".demo").button();

      $("button", ".demo").click(
         function()
         {
            $('.buttonDemo').html('You clicked the button');
         }
      );

      $("input", ".demo").click(
         function()
         {
            $('.buttonDemo').html('You clicked the input');
         }
      );      

      $("a", ".demo").click(
         function()
         {
            $('.buttonDemo').html('You clicked the anchor');
         }
      );
   });
</script>

To see where I have placed the source, just right click on this file and choose View Source.

Elvenware

This is an experimental version of Elvenware.

JQueryUi