diff options
| author | Richard Worth <rdworth@gmail.com> | 2010-01-20 14:00:14 +0000 |
|---|---|---|
| committer | Richard Worth <rdworth@gmail.com> | 2010-01-20 14:00:14 +0000 |
| commit | eecbde22a6b338785ac8e1991858ba7dab976eae (patch) | |
| tree | 11c5e0835757497110151e803bb1e1fb39820dcc /demos | |
| parent | a1e069759ddcd3e56deff0d9334559b156df734c (diff) | |
| download | jquery-ui-eecbde22a6b338785ac8e1991858ba7dab976eae.tar.gz jquery-ui-eecbde22a6b338785ac8e1991858ba7dab976eae.zip | |
eol-style and mime-type
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/autocomplete/combobox.html | 252 | ||||
| -rw-r--r-- | demos/autocomplete/custom-data.html | 182 | ||||
| -rw-r--r-- | demos/autocomplete/default.html | 84 | ||||
| -rw-r--r-- | demos/autocomplete/index.html | 40 | ||||
| -rw-r--r-- | demos/autocomplete/remote-jsonp.html | 170 | ||||
| -rw-r--r-- | demos/autocomplete/remote-with-cache.html | 152 | ||||
| -rw-r--r-- | demos/autocomplete/remote.html | 112 | ||||
| -rw-r--r-- | demos/button/checkbox.html | 92 | ||||
| -rw-r--r-- | demos/button/default.html | 86 | ||||
| -rw-r--r-- | demos/button/icons.html | 124 | ||||
| -rw-r--r-- | demos/button/index.html | 44 | ||||
| -rw-r--r-- | demos/button/radio.html | 90 | ||||
| -rw-r--r-- | demos/button/splitbutton.html | 114 | ||||
| -rw-r--r-- | demos/button/toolbar.html | 122 | ||||
| -rw-r--r-- | demos/datepicker/animation.html | 110 |
15 files changed, 887 insertions, 887 deletions
diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index a77ff7d61..7ac171b63 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -1,126 +1,126 @@ -<!doctype html>
-<html>
-<head>
- <title>jQuery UI Autocomplete Combobox Demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
- (function($) {
- $.widget("ui.combobox", {
- _create: function() {
- var self = this;
- var select = this.element.hide();
- var input = $("<input>")
- .insertAfter(select)
- .autocomplete({
- source: function(request, response) {
- var matcher = new RegExp(request.term, "i");
- response(select.children("option").map(function() {
- var text = $(this).text();
- if (!request.term || matcher.test(text))
- return {
- id: $(this).val(),
- label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
- value: text
- };
- }));
- },
- delay: 0,
- select: function(e, ui) {
- if (!ui.item) {
- // remove invalid value, as it didn't match anything
- $(this).val("");
- return false;
- }
- $(this).focus();
- select.val(ui.item.id);
- self._trigger("selected", null, {
- item: select.find("[value='" + ui.item.id + "']")
- });
-
- },
- minLength: 0
- })
- .removeClass("ui-corner-all")
- .addClass("ui-corner-left");
- $("<button> </button>")
- .insertAfter(input)
- .button({
- icons: {
- primary: "ui-icon-triangle-1-s"
- },
- text: false
- }).removeClass("ui-corner-all")
- .addClass("ui-corner-right ui-button-icon")
- .position({
- my: "left center",
- at: "right center",
- of: input,
- offset: "-1 0"
- }).css("top", "")
- .click(function() {
- // close if already visible
- if (input.autocomplete("widget").is(":visible")) {
- input.autocomplete("close");
- return;
- }
- // pass empty string as value to search for, displaying all results
- input.autocomplete("search", "");
- input.focus();
- });
- }
- });
-
- })(jQuery);
-
- $(function() {
- $("select").combobox();
- });
- </script>
- <style>
- /* TODO shouldn't be necessary */
- .ui-button-icon-only .ui-button-text { padding: 0; }
- </style>
-</head>
-<body>
-
-<div class="demo">
-
-<div class="ui-widget">
- <label>Your preferred programming language: </label>
- <select>
- <option value="a">asp</option>
- <option value="c">c</option>
- <option value="cpp">c++</option>
- <option value="cf">coldfusion</option>
- <option value="g">groovy</option>
- <option value="h">haskell</option>
- <option value="j">java</option>
- <option value="js">javascript</option>
- <option value="p1">pearl</option>
- <option value="p2">php</option>
- <option value="p3">python</option>
- <option value="r">ruby</option>
- <option value="s">scala</option>
- </select>
-</div>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-<p>
-A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.
-</p>
-<p>
-The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.
-</p>
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html> +<html> +<head> + <title>jQuery UI Autocomplete Combobox Demo</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + (function($) { + $.widget("ui.combobox", { + _create: function() { + var self = this; + var select = this.element.hide(); + var input = $("<input>") + .insertAfter(select) + .autocomplete({ + source: function(request, response) { + var matcher = new RegExp(request.term, "i"); + response(select.children("option").map(function() { + var text = $(this).text(); + if (!request.term || matcher.test(text)) + return { + id: $(this).val(), + label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), + value: text + }; + })); + }, + delay: 0, + select: function(e, ui) { + if (!ui.item) { + // remove invalid value, as it didn't match anything + $(this).val(""); + return false; + } + $(this).focus(); + select.val(ui.item.id); + self._trigger("selected", null, { + item: select.find("[value='" + ui.item.id + "']") + }); + + }, + minLength: 0 + }) + .removeClass("ui-corner-all") + .addClass("ui-corner-left"); + $("<button> </button>") + .insertAfter(input) + .button({ + icons: { + primary: "ui-icon-triangle-1-s" + }, + text: false + }).removeClass("ui-corner-all") + .addClass("ui-corner-right ui-button-icon") + .position({ + my: "left center", + at: "right center", + of: input, + offset: "-1 0" + }).css("top", "") + .click(function() { + // close if already visible + if (input.autocomplete("widget").is(":visible")) { + input.autocomplete("close"); + return; + } + // pass empty string as value to search for, displaying all results + input.autocomplete("search", ""); + input.focus(); + }); + } + }); + + })(jQuery); + + $(function() { + $("select").combobox(); + }); + </script> + <style> + /* TODO shouldn't be necessary */ + .ui-button-icon-only .ui-button-text { padding: 0; } + </style> +</head> +<body> + +<div class="demo"> + +<div class="ui-widget"> + <label>Your preferred programming language: </label> + <select> + <option value="a">asp</option> + <option value="c">c</option> + <option value="cpp">c++</option> + <option value="cf">coldfusion</option> + <option value="g">groovy</option> + <option value="h">haskell</option> + <option value="j">java</option> + <option value="js">javascript</option> + <option value="p1">pearl</option> + <option value="p2">php</option> + <option value="p3">python</option> + <option value="r">ruby</option> + <option value="s">scala</option> + </select> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> +<p> +A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections. +</p> +<p> +The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option. +</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/demos/autocomplete/custom-data.html b/demos/autocomplete/custom-data.html index 1b112344b..5be147f29 100644 --- a/demos/autocomplete/custom-data.html +++ b/demos/autocomplete/custom-data.html @@ -1,91 +1,91 @@ -<!doctype html>
-<html>
-<head>
- <title>jQuery UI Autocomplete Custom Data Demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
- #project-label {
- display: block;
- font-weight: bold;
- margin-bottom: 1em;
- }
- #project-icon {
- float: left;
- height: 32px;
- width: 32px;
- }
- #project-description {
- margin: 0;
- padding: 0;
- }
- </style>
- <script type="text/javascript">
- $(function() {
- var projects = [
- {
- value: 'jquery',
- label: 'jQuery',
- desc: 'the write less, do more, JavaScript library',
- icon: 'jquery_32x32.png'
- },
- {
- value: 'jquery-ui',
- label: 'jQuery UI',
- desc: 'the official user interface library for jQuery',
- icon: 'jqueryui_32x32.png'
- },
- {
- value: 'sizzlejs',
- label: 'Sizzle',
- desc: 'a pure-JavaScript CSS selector engine',
- icon: 'sizzlejs_32x32.png'
- }
- ];
-
- $('#project').autocomplete({
- minLength: 0,
- source: projects,
- focus: function(event, ui) {
- $('#project').val(ui.item.label);
-
- return false;
- },
- select: function(event, ui) {
- $('#project').val(ui.item.label);
- $('#project-id').val(ui.item.value);
- $('#project-description').html(ui.item.desc);
- $('#project-icon').attr('src', '../images/' + ui.item.icon);
-
- return false;
- }
- });
- });
- </script>
-</head>
-<body>
-
-<div class="demo">
- <label for="tags" id="project-label">Select a project:</label>
- <img id="project-icon" src="../images/transparent_1x1.png" class="ui-state-default">
- <input id="project">
- <input type="hidden" id="project-id">
- <p id="project-description"></p>
-</div><!-- End demo -->
-
-<div class="demo-description">
-<p>
-You can use your own custom data formats and displays by simply overriding the default focus and select actions.
-</p>
-<p>
-Try typing "j" to get a list of projects or just press the down arrow.
-</p>
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html> +<html> +<head> + <title>jQuery UI Autocomplete Custom Data Demo</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #project-label { + display: block; + font-weight: bold; + margin-bottom: 1em; + } + #project-icon { + float: left; + height: 32px; + width: 32px; + } + #project-description { + margin: 0; + padding: 0; + } + </style> + <script type="text/javascript"> + $(function() { + var projects = [ + { + value: 'jquery', + label: 'jQuery', + desc: 'the write less, do more, JavaScript library', + icon: 'jquery_32x32.png' + }, + { + value: 'jquery-ui', + label: 'jQuery UI', + desc: 'the official user interface library for jQuery', + icon: 'jqueryui_32x32.png' + }, + { + value: 'sizzlejs', + label: 'Sizzle', + desc: 'a pure-JavaScript CSS selector engine', + icon: 'sizzlejs_32x32.png' + } + ]; + + $('#project').autocomplete({ + minLength: 0, + source: projects, + focus: function(event, ui) { + $('#project').val(ui.item.label); + + return false; + }, + select: function(event, ui) { + $('#project').val(ui.item.label); + $('#project-id').val(ui.item.value); + $('#project-description').html(ui.item.desc); + $('#project-icon').attr('src', '../images/' + ui.item.icon); + + return false; + } + }); + }); + </script> +</head> +<body> + +<div class="demo"> + <label for="tags" id="project-label">Select a project:</label> + <img id="project-icon" src="../images/transparent_1x1.png" class="ui-state-default"> + <input id="project"> + <input type="hidden" id="project-id"> + <p id="project-description"></p> +</div><!-- End demo --> + +<div class="demo-description"> +<p> +You can use your own custom data formats and displays by simply overriding the default focus and select actions. +</p> +<p> +Try typing "j" to get a list of projects or just press the down arrow. +</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/demos/autocomplete/default.html b/demos/autocomplete/default.html index 1fbfd2d2a..d0f88859e 100644 --- a/demos/autocomplete/default.html +++ b/demos/autocomplete/default.html @@ -1,42 +1,42 @@ -<!doctype html>
-<html>
-<head>
- <title>jQuery UI Autocomplete Default Demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
- $(function() {
- var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
- $("#tags").autocomplete({
- source: availableTags
- });
- });
- </script>
-</head>
-<body>
-
-<div class="demo">
-
-<div class="ui-widget">
- <label for="tags">Tags: </label>
- <input id="tags" />
-</div>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-<p>
-The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.
-</p>
-<p>
-The datasource is a simple JavaScript array, provided to the widget using the source-option.
-</p>
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html> +<html> +<head> + <title>jQuery UI Autocomplete Default Demo</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; + $("#tags").autocomplete({ + source: availableTags + }); + }); + </script> +</head> +<body> + +<div class="demo"> + +<div class="ui-widget"> + <label for="tags">Tags: </label> + <input id="tags" /> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> +<p> +The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try. +</p> +<p> +The datasource is a simple JavaScript array, provided to the widget using the source-option. +</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/demos/autocomplete/index.html b/demos/autocomplete/index.html index d4cc75038..ffca515e0 100644 --- a/demos/autocomplete/index.html +++ b/demos/autocomplete/index.html @@ -1,20 +1,20 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Autocomplete Demos</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
-</head>
-<body>
- <div class="demos-nav">
- <h4>Examples</h4>
- <ul>
- <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
- <li><a href="remote.html">Remote datasource</a></li>
- <li><a href="remote-with-cache.html">Remote with caching</a></li>
- <li><a href="remote-jsonp.html">Remote JSONP datasource</a></li>
- <li><a href="combobox.html">Combobox</a></li>
- <li><a href="custom-data.html">Custom data and display</a></li>
- </ul>
- </div>
-</body>
-</html>
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Autocomplete Demos</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> +</head> +<body> + <div class="demos-nav"> + <h4>Examples</h4> + <ul> + <li class="demo-config-on"><a href="default.html">Default functionality</a></li> + <li><a href="remote.html">Remote datasource</a></li> + <li><a href="remote-with-cache.html">Remote with caching</a></li> + <li><a href="remote-jsonp.html">Remote JSONP datasource</a></li> + <li><a href="combobox.html">Combobox</a></li> + <li><a href="custom-data.html">Custom data and display</a></li> + </ul> + </div> +</body> +</html> diff --git a/demos/autocomplete/remote-jsonp.html b/demos/autocomplete/remote-jsonp.html index 0349e5a2c..46ac87d81 100644 --- a/demos/autocomplete/remote-jsonp.html +++ b/demos/autocomplete/remote-jsonp.html @@ -1,85 +1,85 @@ -<!doctype html>
-<html>
-<head>
- <title>jQuery UI Autocomplete Remote JSONP datasource demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
- $(function() {
- function log(message) {
- $("<div/>").text(message).prependTo("#log");
- $("#log").attr("scrollTop", 0);
- }
-
- $("#city").autocomplete({
- source: function(request, response) {
- $.ajax({
- url: "http://ws.geonames.org/searchJSON",
- dataType: "jsonp",
- data: {
- featureClass: "P",
- style: "full",
- maxRows: 15,
- name_startsWith: request.term
- },
- success: function(data) {
- response($.map(data.geonames, function(item) {
- return {
- label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
- value: item.name
- }
- }))
- }
- })
- },
- minLength: 2,
- select: function(event, ui) {
- log(ui.item ? ("Selected: " + ui.item.label) : "Nothing selected, input was " + this.value);
- },
- open: function() {
- $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
- },
- close: function() {
- $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
- }
- });
- });
- </script>
- <style>
- .ui-autocomplete-loading { background: url(indicator.gif) no-repeat right; }
- #city { width: 25em; }
- </style>
-</head>
-<body>
-
-<div class="demo">
-
-<div class="ui-widget">
- <label for="city">Your city: </label>
- <input id="city" />
- Powered by <a href="http://geonames.org">geonames.org</a>
-</div>
-
-<div class="ui-widget" style="margin-top:2em; font-family:Arial">
- Result:
- <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
-</div>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-<p>
-The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.
-</p>
-<p>
-In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.
-</p>
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html> +<html> +<head> + <title>jQuery UI Autocomplete Remote JSONP datasource demo</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + function log(message) { + $("<div/>").text(message).prependTo("#log"); + $("#log").attr("scrollTop", 0); + } + + $("#city").autocomplete({ + source: function(request, response) { + $.ajax({ + url: "http://ws.geonames.org/searchJSON", + dataType: "jsonp", + data: { + featureClass: "P", + style: "full", + maxRows: 15, + name_startsWith: request.term + }, + success: function(data) { + response($.map(data.geonames, function(item) { + return { + label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, + value: item.name + } + })) + } + }) + }, + minLength: 2, + select: function(event, ui) { + log(ui.item ? ("Selected: " + ui.item.label) : "Nothing selected, input was " + this.value); + }, + open: function() { + $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); + }, + close: function() { + $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); + } + }); + }); + </script> + <style> + .ui-autocomplete-loading { background: url(indicator.gif) no-repeat right; } + #city { width: 25em; } + </style> +</head> +<body> + +<div class="demo"> + +<div class="ui-widget"> + <label for="city">Your city: </label> + <input id="city" /> + Powered by <a href="http://geonames.org">geonames.org</a> +</div> + +<div class="ui-widget" style="margin-top:2em; font-family:Arial"> + Result: + <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> +<p> +The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field. +</p> +<p> +In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input. +</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/demos/autocomplete/remote-with-cache.html b/demos/autocomplete/remote-with-cache.html index aa0fb2eb5..4f470d17b 100644 --- a/demos/autocomplete/remote-with-cache.html +++ b/demos/autocomplete/remote-with-cache.html @@ -1,76 +1,76 @@ -<!doctype html>
-<html>
-<head>
- <title>jQuery UI Autocomplete Remote with caching demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
- $(function() {
- function log(message) {
- $("<div/>").text(message).prependTo("#log");
- $("#log").attr("scrollTop", 0);
- }
-
- var cache = {};
- $("#birds").autocomplete({
- source: function(request, response) {
- if (cache.term == request.term && cache.content) {
- response(cache.content);
- }
- if (new RegExp(cache.term).test(request.term) && cache.content && cache.content.length < 13) {
- var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
- response($.grep(cache.content, function(value) {
- return matcher.test(value.value)
- }));
- }
- $.ajax({
- url: "search.php",
- dataType: "json",
- data: request,
- success: function(data) {
- cache.term = request.term;
- cache.content = data;
- response(data);
- }
- });
- },
- minLength: 2,
- select: function(event, ui) {
- log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value);
- }
- });
- });
- </script>
-</head>
-<body>
-
-<div class="demo">
-
-<div class="ui-widget">
- <label for="birds">Birds: </label>
- <input id="birds" />
-</div>
-
-<div class="ui-widget" style="margin-top:2em; font-family:Arial">
- Result:
- <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
-</div>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-<p>
-The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.
-</p>
-<p>
-Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.
-</p>
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html> +<html> +<head> + <title>jQuery UI Autocomplete Remote with caching demo</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + function log(message) { + $("<div/>").text(message).prependTo("#log"); + $("#log").attr("scrollTop", 0); + } + + var cache = {}; + $("#birds").autocomplete({ + source: function(request, response) { + if (cache.term == request.term && cache.content) { + response(cache.content); + } + if (new RegExp(cache.term).test(request.term) && cache.content && cache.content.length < 13) { + var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); + response($.grep(cache.content, function(value) { + return matcher.test(value.value) + })); + } + $.ajax({ + url: "search.php", + dataType: "json", + data: request, + success: function(data) { + cache.term = request.term; + cache.content = data; + response(data); + } + }); + }, + minLength: 2, + select: function(event, ui) { + log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value); + } + }); + }); + </script> +</head> +<body> + +<div class="demo"> + +<div class="ui-widget"> + <label for="birds">Birds: </label> + <input id="birds" /> +</div> + +<div class="ui-widget" style="margin-top:2em; font-family:Arial"> + Result: + <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> +<p> +The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field. +</p> +<p> +Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term. +</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/demos/autocomplete/remote.html b/demos/autocomplete/remote.html index c183b5adb..cef9b549b 100644 --- a/demos/autocomplete/remote.html +++ b/demos/autocomplete/remote.html @@ -1,56 +1,56 @@ -<!doctype html>
-<html>
-<head>
- <title>jQuery UI Autocomplete Remote datasource demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
- $(function() {
- function log(message) {
- $("<div/>").text(message).prependTo("#log");
- $("#log").attr("scrollTop", 0);
- }
-
- $("#birds").autocomplete({
- // TODO doesn't work when loaded from /demos/#autocomplete|remote
- source: "search.php",
- minLength: 2,
- select: function(event, ui) {
- log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value);
- }
- });
- });
- </script>
-</head>
-<body>
-
-<div class="demo">
-
-<div class="ui-widget">
- <label for="birds">Birds: </label>
- <input id="birds" />
-</div>
-
-<div class="ui-widget" style="margin-top:2em; font-family:Arial">
- Result:
- <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
-</div>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-<p>
-The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.
-</p>
-<p>
-The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.
-</p>
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html> +<html> +<head> + <title>jQuery UI Autocomplete Remote datasource demo</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + function log(message) { + $("<div/>").text(message).prependTo("#log"); + $("#log").attr("scrollTop", 0); + } + + $("#birds").autocomplete({ + // TODO doesn't work when loaded from /demos/#autocomplete|remote + source: "search.php", + minLength: 2, + select: function(event, ui) { + log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value); + } + }); + }); + </script> +</head> +<body> + +<div class="demo"> + +<div class="ui-widget"> + <label for="birds">Birds: </label> + <input id="birds" /> +</div> + +<div class="ui-widget" style="margin-top:2em; font-family:Arial"> + Result: + <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> +<p> +The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field. +</p> +<p> +The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback. +</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/demos/button/checkbox.html b/demos/button/checkbox.html index 2dad5575e..1643837c0 100644 --- a/demos/button/checkbox.html +++ b/demos/button/checkbox.html @@ -1,46 +1,46 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Button - Checkboxes demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
- $(function() {
- $("#check").button();
- $("#format").buttonset();
- });
- </script>
- <style>
- #format { margin-top: 2em; }
- </style>
-</head>
-<body>
-
-<div class="demo">
-
- <input type="checkbox" id="check" /><label for="check">Toggle</label>
-
- <div id="format">
- <input type="checkbox" id="check1" /><label for="check1">B</label>
- <input type="checkbox" id="check2" /><label for="check2">I</label>
- <input type="checkbox" id="check3" /><label for="check3">U</label>
- </div>
-
-</div><!-- End demo -->
-
-
-
-<div class="demo-description">
-
-<p>TODO</p>
-
-</div><!-- End demo-description -->
-
-
-
-</body>
-</html>
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Button - Checkboxes demo</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + $("#check").button(); + $("#format").buttonset(); + }); + </script> + <style> + #format { margin-top: 2em; } + </style> +</head> +<body> + +<div class="demo"> + + <input type="checkbox" id="check" /><label for="check">Toggle</label> + + <div id="format"> + <input type="checkbox" id="check1" /><label for="check1">B</label> + <input type="checkbox" id="check2" /><label for="check2">I</label> + <input type="checkbox" id="check3" /><label for="check3">U</label> + </div> + +</div><!-- End demo --> + + + +<div class="demo-description"> + +<p>TODO</p> + +</div><!-- End demo-description --> + + + +</body> +</html> diff --git a/demos/button/default.html b/demos/button/default.html index 869aee747..c13bfc76d 100644 --- a/demos/button/default.html +++ b/demos/button/default.html @@ -1,43 +1,43 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Button - Default demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
- $(function() {
- $("button, input:submit, a").button();
- });
- </script>
- <style>
-
- </style>
-</head>
-<body>
-
-<div class="demo">
-
- <button>A button element</button>
-
- <input type="submit" value="A submit button">
-
- <a href="#">An anchor</a>
-
-</div><!-- End demo -->
-
-
-
-<div class="demo-description">
-
-<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
-
-</div><!-- End demo-description -->
-
-
-
-</body>
-</html>
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Button - Default demo</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + $("button, input:submit, a").button(); + }); + </script> + <style> + + </style> +</head> +<body> + +<div class="demo"> + + <button>A button element</button> + + <input type="submit" value="A submit button"> + + <a href="#">An anchor</a> + +</div><!-- End demo --> + + + +<div class="demo-description"> + +<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p> + +</div><!-- End demo-description --> + + + +</body> +</html> diff --git a/demos/button/icons.html b/demos/button/icons.html index ef5b15f5d..78c5791d5 100644 --- a/demos/button/icons.html +++ b/demos/button/icons.html @@ -1,62 +1,62 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Button - Icons demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
- $(function() {
- $("button:first").button({
- icons: {
- primary: 'ui-icon-locked'
- },
- text: false
- }).next().button({
- icons: {
- primary: 'ui-icon-locked'
- }
- }).next().button({
- icons: {
- primary: 'ui-icon-gear',
- secondary: 'ui-icon-triangle-1-s'
- }
- }).next().button({
- icons: {
- primary: 'ui-icon-gear',
- secondary: 'ui-icon-triangle-1-s'
- },
- text: false
- });
- });
- </script>
- <style>
-
- </style>
-</head>
-<body>
-
-<div class="demo">
-
- <button>Button with icon only</button>
- <button>Button with icon on the left</button>
- <button>Button with two icons</button>
- <button>Button with two icons and no text</button>
-
-</div><!-- End demo -->
-
-
-
-<div class="demo-description">
-
-<p>Some buttons with various combinations of text and icons, here specified via metadata.</p>
-
-</div><!-- End demo-description -->
-
-
-
-</body>
-</html>
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Button - Icons demo</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + $("button:first").button({ + icons: { + primary: 'ui-icon-locked' + }, + text: false + }).next().button({ + icons: { + primary: 'ui-icon-locked' + } + }).next().button({ + icons: { + primary: 'ui-icon-gear', + secondary: 'ui-icon-triangle-1-s' + } + }).next().button({ + icons: { + primary: 'ui-icon-gear', + secondary: 'ui-icon-triangle-1-s' + }, + text: false + }); + }); + </script> + <style> + + </style> +</head> +<body> + +<div class="demo"> + + <button>Button with icon only</button> + <button>Button with icon on the left</button> + <button>Button with two icons</button> + <button>Button with two icons and no text</button> + +</div><!-- End demo --> + + + +<div class="demo-description"> + +<p>Some buttons with various combinations of text and icons, here specified via metadata.</p> + +</div><!-- End demo-description --> + + + +</body> +</html> diff --git a/demos/button/index.html b/demos/button/index.html index 7752d72e2..e69c16d8d 100644 --- a/demos/button/index.html +++ b/demos/button/index.html @@ -1,22 +1,22 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Button Demos</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
-</head>
-<body>
-
-<div class="demos-nav">
- <h4>Examples</h4>
- <ul>
- <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
- <li><a href="radio.html">Radios</a></li>
- <li><a href="checkbox.html">Checkboxes</a></li>
- <li><a href="icons.html">Icons</a></li>
- <li><a href="toolbar.html">Toolbar</a></li>
- <li><a href="splitbutton.html">Split Button</a></li>
- </ul>
-</div>
-
-</body>
-</html>
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Button Demos</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> +</head> +<body> + +<div class="demos-nav"> + <h4>Examples</h4> + <ul> + <li class="demo-config-on"><a href="default.html">Default functionality</a></li> + <li><a href="radio.html">Radios</a></li> + <li><a href="checkbox.html">Checkboxes</a></li> + <li><a href="icons.html">Icons</a></li> + <li><a href="toolbar.html">Toolbar</a></li> + <li><a href="splitbutton.html">Split Button</a></li> + </ul> +</div> + +</body> +</html> diff --git a/demos/button/radio.html b/demos/button/radio.html index 13875209b..d5105e114 100644 --- a/demos/button/radio.html +++ b/demos/button/radio.html @@ -1,45 +1,45 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Button - Radio Buttons demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
- $(function() {
- $("#radio1").buttonset();
- });
- </script>
- <style>
-
- </style>
-</head>
-<body>
-
-<div class="demo">
-
- <form>
- <div id="radio1">
- <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
- <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
- <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
- </div>
- </form>
-
-</div><!-- End demo -->
-
-
-
-<div class="demo-description">
-
-<p>A set of three radio buttons transformed into a button set.</p>
-
-</div><!-- End demo-description -->
-
-
-
-</body>
-</html>
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Button - Radio Buttons demo</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + $("#radio1").buttonset(); + }); + </script> + <style> + + </style> +</head> +<body> + +<div class="demo"> + + <form> + <div id="radio1"> + <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label> + <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> + <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label> + </div> + </form> + +</div><!-- End demo --> + + + +<div class="demo-description"> + +<p>A set of three radio buttons transformed into a button set.</p> + +</div><!-- End demo-description --> + + + +</body> +</html> diff --git a/demos/button/splitbutton.html b/demos/button/splitbutton.html index 4f1f1e630..d90001634 100644 --- a/demos/button/splitbutton.html +++ b/demos/button/splitbutton.html @@ -1,57 +1,57 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Button - Default demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
- $(function() {
- $("#rerun").button().click(function() {
- alert("Running the last action");
- })
- .next()
- .button({
- text: false,
- icons: {
- primary: "ui-icon-triangle-1-s"
- }
- })
- .click(function() {
- alert("Could display a menu to select an action");
- })
- .parent()
- .buttonset();
- });
- </script>
- <style>
-
- </style>
-</head>
-<body>
-
-<div class="demo">
-
- <div>
- <button id="rerun">Run last action</button>
- <button id="select">Select an action</button>
- </div>
-
-</div><!-- End demo -->
-
-
-
-<div class="demo-description">
-
-<p>An example of a split button built with two buttons: A plan button with just text, one with only a primary icon
-and no text. Both are grouped together in a set.</p>
-
-</div><!-- End demo-description -->
-
-
-
-</body>
-</html>
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Button - Default demo</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + $("#rerun").button().click(function() { + alert("Running the last action"); + }) + .next() + .button({ + text: false, + icons: { + primary: "ui-icon-triangle-1-s" + } + }) + .click(function() { + alert("Could display a menu to select an action"); + }) + .parent() + .buttonset(); + }); + </script> + <style> + + </style> +</head> +<body> + +<div class="demo"> + + <div> + <button id="rerun">Run last action</button> + <button id="select">Select an action</button> + </div> + +</div><!-- End demo --> + + + +<div class="demo-description"> + +<p>An example of a split button built with two buttons: A plan button with just text, one with only a primary icon +and no text. Both are grouped together in a set.</p> + +</div><!-- End demo-description --> + + + +</body> +</html> diff --git a/demos/button/toolbar.html b/demos/button/toolbar.html index a56242bfc..e719a00a8 100644 --- a/demos/button/toolbar.html +++ b/demos/button/toolbar.html @@ -1,32 +1,32 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Button - Toolbar demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Button - Toolbar demo</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> <link type="text/css" href="../demos.css" rel="stylesheet" /> <style type="text/css"> #toolbar { padding: 10px 4px; } </style> - <script type="text/javascript">
- $(function() {
+ <script type="text/javascript"> + $(function() { $('#beginning').button({ text: false, icons: { primary: 'ui-icon-seek-start' } - });
+ }); $('#rewind').button({ text: false, icons: { primary: 'ui-icon-seek-prev' } - });
+ }); $('#play').button({ text: false, icons: { @@ -51,73 +51,73 @@ }; } $(this).button('option', options); - });
+ }); $('#stop').button({ text: false, icons: { primary: 'ui-icon-stop' } - })
- .click(function() {
- $('#play').button('option', {
- label: 'play',
- icons: {
- primary: 'ui-icon-play'
- }
- });
- });
+ }) + .click(function() { + $('#play').button('option', { + label: 'play', + icons: { + primary: 'ui-icon-play' + } + }); + }); $('#forward').button({ text: false, icons: { primary: 'ui-icon-seek-next' } - });
+ }); $('#end').button({ text: false, icons: { primary: 'ui-icon-seek-end' } - });
- $("#shuffle").button();
- $("#repeat").buttonset();
- });
- </script>
-</head>
-<body>
-
-<div class="demo">
-
+ }); + $("#shuffle").button(); + $("#repeat").buttonset(); + }); + </script> +</head> +<body> + +<div class="demo"> + <span id="toolbar" class="ui-widget-header ui-corner-all"> <button id="beginning">go to beginning</button> <button id="rewind">rewind</button> <button id="play">play</button> <button id="stop">stop</button> <button id="forward">fast forward</button> - <button id="end">go to end</button>
-
- <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
-
- <span id="repeat">
- <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
- <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
- <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
+ <button id="end">go to end</button> + + <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label> + + <span id="repeat"> + <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label> + <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label> + <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label> </span> - </span>
-
-</div><!-- End demo -->
-
-
-
-<div class="demo-description">
-
-<p>
- A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
- an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
-</p>
-
-</div><!-- End demo-description -->
-
-
-
-</body>
-</html>
+ </span> + +</div><!-- End demo --> + + + +<div class="demo-description"> + +<p> + A mediaplayer toolbar. Take a look at the underlying markup: A few button elements, + an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options. +</p> + +</div><!-- End demo-description --> + + + +</body> +</html> diff --git a/demos/datepicker/animation.html b/demos/datepicker/animation.html index 2185cdf00..c8ca11a42 100644 --- a/demos/datepicker/animation.html +++ b/demos/datepicker/animation.html @@ -1,55 +1,55 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Datepicker - Animations</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.4.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.effects.core.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.effects.blind.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.effects.bounce.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.effects.clip.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.effects.drop.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.effects.fold.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.effects.slide.js"></script>
- <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <script type="text/javascript">
- $(function() {
- $("#datepicker").datepicker();
- $("#anim").change(function() { $('#datepicker').datepicker('option', {showAnim: $(this).val()}); });
- });
- </script>
-</head>
-<body>
-
-<div class="demo">
-
-<p>Date: <input type="text" id="datepicker" size="30"/></p>
-
-<p>Animations:<br />
- <select id="anim">
- <option value="show">Show (default)</option>
- <option value="slideDown">Slide down</option>
- <option value="fadeIn">Fade in</option>
- <!-- <option value="blind">Blind (UI Effect)</option>
- <option value="bounce">Bounce (UI Effect)</option>
- <option value="clip">Clip (UI Effect)</option>
- <option value="drop">Drop (UI Effect)</option>
- <option value="fold">Fold (UI Effect)</option>
- <option value="slide">Slide (UI Effect)</option> -->
- <option value="">None</option>
- </select>
-</p>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-
-<p>Use different animations when opening or closing the datepicker. Choose an animation from the dropdown, then click on the input to see its effect. You can use one of the three standard animations or any of the UI Effects.</p>
-
-</div><!-- End demo-description -->
-
-</body>
-</html>
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Datepicker - Animations</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.4.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.effects.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.effects.blind.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.effects.bounce.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.effects.clip.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.effects.drop.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.effects.fold.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.effects.slide.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + $("#datepicker").datepicker(); + $("#anim").change(function() { $('#datepicker').datepicker('option', {showAnim: $(this).val()}); }); + }); + </script> +</head> +<body> + +<div class="demo"> + +<p>Date: <input type="text" id="datepicker" size="30"/></p> + +<p>Animations:<br /> + <select id="anim"> + <option value="show">Show (default)</option> + <option value="slideDown">Slide down</option> + <option value="fadeIn">Fade in</option> + <!-- <option value="blind">Blind (UI Effect)</option> + <option value="bounce">Bounce (UI Effect)</option> + <option value="clip">Clip (UI Effect)</option> + <option value="drop">Drop (UI Effect)</option> + <option value="fold">Fold (UI Effect)</option> + <option value="slide">Slide (UI Effect)</option> --> + <option value="">None</option> + </select> +</p> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p>Use different animations when opening or closing the datepicker. Choose an animation from the dropdown, then click on the input to see its effect. You can use one of the three standard animations or any of the UI Effects.</p> + +</div><!-- End demo-description --> + +</body> +</html> |