<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 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:
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.
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:
Learn more here: jQuery Theming API
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>
When styled correctly the data picker control, shown below, allows users to just click in the "edit control" shown below:
Date:
Here are some fancy looking jQuery UI buttons. When clicked they invoke the JavaScript shown near the bottom of this page.
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
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:
<div id="toggler">
<div class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">
You can hide me by clicking the button below
</h3>
<p>My source looks like this:</p>
// Code omitted here...
</div>
</div>
I need to put together dialog demo code. For now, you can visit the Nemikor example.
Use your mouse to sort the items below.
<!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>
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.