Commit f782dc19 authored by O'Reilly Media, Inc's avatar O'Reilly Media, Inc

Initial commit

parents
## Example files for the title:
# jQuery UI, by Eric Sarrion
[![jQuery UI, by Eric Sarrion](http://akamaicovers.oreilly.com/images/9781449316983/cat.gif)](https://www.safaribooksonline.com/library/view/title/9781449325176//)
The following applies to example files from material published by O’Reilly Media, Inc. Content from other publishers may include different rules of usage. Please refer to any additional usage rights explained in the actual example files or refer to the publisher’s website.
O'Reilly books are here to help you get your job done. In general, you may use the code in O'Reilly books in your programs and documentation. You do not need to contact us for permission unless you're reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from our books does not require permission. Answering a question by citing our books and quoting example code does not require permission. On the other hand, selling or distributing a CD-ROM of examples from O'Reilly books does require permission. Incorporating a significant amount of example code from our books into your product's documentation does require permission.
We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN.
If you think your use of code examples falls outside fair use or the permission given here, feel free to contact us at <permissions@oreilly.com>.
Please note that the examples are not production code and have not been carefully testing. They are provided "as-is" and come with no warranty of any kind.
chapter: Introduction to jQuery UI
==================
<script src = "jquery.js"></script>
<script src = "jqueryui/development-bundle/ui/jquery.ui.core.js"></script>
<script src = "jqueryui/development-bundle/ui/jquery.ui.widget.js"></script>
<script src = "jqueryui/development-bundle/ui/jquery.ui.tabs.js"></script>
<link rel=stylesheet type=text/css
href=jqueryui/development-bundle/themes/smoothness/jquery.ui.core.css />
<link rel=stylesheet type=text/css
href=jqueryui/development-bundle/themes/smoothness/jquery.ui.theme.css />
<link rel=stylesheet type=text/css
href=jqueryui/development-bundle/themes/smoothness/jquery.ui.tabs.css />
====================================
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
</div>
<script>
$("#tabs").tabs();
</script>
====================================
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
====================================
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
</div>
<script>
$("#tabs").tabs();
</script>
====================================
<link rel=stylesheet type=text/css
href=jqueryui/development-bundle/themes/ui-lightness/jquery.ui.core.css />
<link rel=stylesheet type=text/css
href=jqueryui/development-bundle/themes/ui-lightness/jquery.ui.theme.css />
<link rel=stylesheet type=text/css
href=jqueryui/development-bundle/themes/ui-lightness/jquery.ui.tabs.css />
====================================
<link rel=stylesheet type=text/css
href=jqueryui/css/ui-lightness/jquery-ui-1.8.16.custom.css />
==================
\ No newline at end of file
chapter: Tabs
==================
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
<li><a href=#tab3>Tab 3</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
<div id=tab3>Contents of the third tab</div>
</div>
<script>
</script>
====================================
<script>
$("#tabs").tabs ();
</script>
====================================
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<style type=text/css>
li.ui-state-default {
font-size : 10px;
}
div.ui-tabs-panel {
font-size : 15px;
font-family : georgia;
font-style : italic;
}
</style>
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
<li><a href=#tab3>Tab 3</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
<div id=tab3>Contents of the third tab</div>
</div>
<script>
$("#tabs").tabs ();
</script>
====================================
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
<li><a href=#tab3>Tab 3</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
<div id=tab3>Contents of the third tab</div>
</div>
<script>
$("#tabs").tabs ({
fx : { opacity : "toggle" },
}).tabs ("add", "#tab4", "Tab 4");
$("<i>Contents of the fourth tab</i>").appendTo ("#tab4");
</script>
====================================
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
<li><a href=#tab3>Tab 3</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
<div id=tab3>Contents of the third tab</div>
</div>
<script>
$("#tabs").tabs ({
fx : { opacity : "toggle" },
}).tabs ("url", 0, "action.php").tabs ("load", 0);
</script>
====================================
<?
$txt = "<p> Tab content sent by the server </p>";
$txt = utf8_encode($txt);
echo ($txt);
?>
====================================
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
<li><a href=#tab3>Tab 3</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
<div id=tab3>Contents of the third tab</div>
</div>
<script>
$("#tabs").tabs ({
fx : { opacity : "toggle" },
ajaxOptions : { data : { name : "Sarrion", surname : "Eric" } }
}).tabs ("url", 0, "action.php").tabs ("load", 0);
</script>
====================================
action.php file
<?
$name = $_REQUEST["name"];
$surname = $_REQUEST["surname"];
$name = utf8_decode ($name);
$surname = utf8_decode ($surname);
$txt = "<p> Tab content sent by the server </p>";
$txt .= "Name : " . $name . "<br />";
$txt .= "Surname : " . $surname . "<br />";
$txt = utf8_encode($txt);
echo ($txt);
?>
====================================
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
<li><a href=#tab3>Tab 3</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
<div id=tab3>Contents of the third tab</div>
</div>
<script>
$("#tabs").tabs ({
fx : { opacity : "toggle" },
add : function (event, tab)
{
$(tab.panel).load ("action.php");
}
}).tabs ("add", "#tab4", "Tab 4");
</script>
====================================
<?
$txt = "<p> Tab content sent by the server </p>";
$txt = utf8_encode($txt);
echo ($txt);
?>
====================================
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
<li><a href=#tab3>Tab 3</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
<div id=tab3>Contents of the third tab</div>
</div>
<script>
$("#tabs").tabs ({
fx : { opacity : "toggle" }
}).bind ("tabsadd", function (event, tab)
{
$(tab.panel).load ("action.php");
}).tabs ("add", "#tab4", "Tab 4");
</script>
==================
\ No newline at end of file
chapter: Accordion Menus
==================
<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id="accordion">
<h1><a>Menu 1</a></h1>
<div>Menu Contents 1</div>
<h1><a>Menu 2</a></h1>
<div>Menu Contents 2</div>
<h1><a>Menu 3</a></h1>
<div>Menu Contents 3</div>
</div>
<script>
</script>
====================================
<script>
$("#accordion").accordion();
</script>
====================================
<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<style type=text/css>
h1.ui-accordion-header {
font-size : 10px;
}
div.ui-accordion-content {
font-size : 15px;
font-family : georgia;
font-style : italic;
}
</style>
<div id="accordion">
<h1><a>Menu 1</a></h1>
<div>Menu Contents 1</div>
<h1><a>Menu 2</a></h1>
<div>Menu Contents 2</div>
<h1><a>Menu 3</a></h1>
<div>Menu Contents 3</div>
</div>
<script>
$("#accordion").accordion();
</script>
====================================
<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id="accordion">
<h1><a>Menu 1</a></h1>
<div>Menu Contents 1</div>
<h1><a>Menu 2</a></h1>
<div>Menu Contents 2</div>
<h1><a>Menu 3</a></h1>
<div>Menu Contents 3</div>
</div>
<script>
$("#accordion").accordion ().accordion ("activate", 1);
</script>
====================================
<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id="accordion">
<h1><a>Menu 1</a></h1>
<div>Menu Contents 1</div>
<h1><a>Menu 2</a></h1>
<div>Menu Contents 2</div>
<h1><a>Menu 3</a></h1>
<div>Menu Contents 3</div>
</div>
<script>
$("#accordion").accordion({
changestart : function (event, menus)
{
menus.newContent.html ("Loading");
},
change : function (event, menus)
{
menus.newContent.load ("action.php");
}
});
</script>
====================================
<?
$txt = "<span> Response sent by the server </span>";
$txt = utf8_encode($txt);
echo ($txt);
====================================
<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id="accordion">
<h1><a>Menu 1</a></h1>
<div>Menu Contents 1</div>
<h1><a>Menu 2</a></h1>
<div>Menu Contents 2</div>
<h1><a>Menu 3</a></h1>
<div>Menu Contents 3</div>
</div>
<script>
$("#accordion").accordion().bind ("accordionchangestart", function (event, menus)
{
menus.newContent.html ("Loading");
}).bind ("accordionchange", function (event, menus)
{
menus.newContent.load ("action.php");
});
</script>
====================================
<?
$txt = "<span> Response sent by the server </span>";
$txt = utf8_encode($txt);
echo ($txt);
==================
\ No newline at end of file
chapter: Dialog Boxes
==================
<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id="dialog" title="Window title">
<p> Content of the dialog box </p>
</div>
<script>
$("#dialog").dialog();
</script>
====================================
<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id="dialog1" title="Window title 1">
<p> Content of the dialog box 1</p>
</div>
<div id="dialog2" title="Window title 2">
<p> Content of the dialog box 2</p>
</div>
<script>
$("#dialog1, #dialog2").dialog();
</script>
====================================
<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<style type=text/css>
div.ui-dialog-titlebar {
font-size : 10px;
}
div.ui-dialog-content {
font-size : 15px;
font-family : georgia;
font-style : italic;
}
</style>
<div id="dialog" title="Window title">
<p> Content of the dialog box</p>
</div>
<script>
$("#dialog").dialog();
</script>
====================================
<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id="dialog" title="Window title">
<p> Content of the dialog box</p>
</div>
<input id=open type=button value=Open>
<input id=close type=button value=Close>
<script>
$("div#dialog").dialog ({
autoOpen : false
});
$("#open").click (function (event) // Open button Treatment
{
if ($("#dialog").dialog ("isOpen")) alert ("Already open !");
else $("#dialog").dialog ("open");
});
$("#close").click (function (event) // Close button Treatment
{
if (!$("#dialog").dialog ("isOpen")) alert ("Already closed !");
else $("#dialog").dialog ("close");
});
</script>
====================================
<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id="dialog" title="Window title">
<p> Content of the dialog box</p>
</div>
<script>
$("div#dialog").dialog ({
show : "slide",
hide : "puff"
});
</script>
====================================
<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id="dialog" title="Window title">
<p> Content of the dialog box</p>
</div>
<script>
$("div#dialog").dialog ({
beforeclose : function (event)
{
if (!confirm ("Close dialog ?")) return false;
}
});
</script>
====================================
<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id="dialog" title="Window title">
<p> Content of the dialog box</p>
</div>
<script>
$("div#dialog").dialog ().prev ().find (".ui-dialog-titlebar-close").hide ();
</script>
====================================
<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id="dialog" title="Window title">
<p> Would you like to close the dialog box?</p>
</div>
<script>
$("div#dialog").dialog ({
buttons : {
"Yes" : function ()
{
$("div#dialog").dialog ("close");
},
"No" : function ()
{
}
}
}).prev().find(".ui-dialog-titlebar-close").hide ();
</script>
====================================
<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id="dialog" title="Window title">
<p> Content of the dialog box</p>
</div>
<script>
$("div#dialog").dialog ({
open : function (event)
{
$(this).load ("action.php");
}
});
</script>
====================================
<?
$txt = "<span> Response sent by the server </span>";
$txt = utf8_encode($txt);
echo ($txt);
?>
====================================
<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id="dialog" title="Window title">
<p> Content of the dialog box</p>
</div>
Open effect
<select id=effectopen>
<option>No effect</option>
<option>blind</option>
<option>bounce</option>
<option>clip</option>
<option>drop</option>
<option>fold</option>
<option>highlight</option>
<option>puff</option>
<option>pulsate</option>
<option>scale</option>
<option>slide</option>
</select>
<br />
Close effect
<select id=effectclose>
<option>No effect</option>
<option>blind</option>
<option>bounce</option>
<option>clip</option>
<option>drop</option>
<option>fold</option>
<option>highlight</option>
<option>puff</option>
<option>pulsate</option>
<option>scale</option>
<option>slide</option>
</select>
<br />
<input id=open type=button value=Open>
<script>