github/jquery-ui
1
1
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2026-04-20 03:02:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

eol-style and mime-type

Browse Source
This commit is contained in:
Richard Worth
2010-01-20 14:00:14 +00:00
parent a1e069759d
commit eecbde22a6
34 changed files with 1634 additions and 1634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
demos/autocomplete/combobox.html
View File

@@ -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>&nbsp;</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>&nbsp;</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>

182
demos/autocomplete/custom-data.html
View File

@@ -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>

84
demos/autocomplete/default.html
View File

@@ -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>

40
demos/autocomplete/index.html
View File

@@ -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>

170
demos/autocomplete/remote-jsonp.html
View File

@@ -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>

152
demos/autocomplete/remote-with-cache.html
View File

@@ -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>

112
demos/autocomplete/remote.html
View File

@@ -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>

92
demos/button/checkbox.html
View File

@@ -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>

86
demos/button/default.html
View File

@@ -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>

124
demos/button/icons.html
View File

@@ -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>

44
demos/button/index.html
View File

@@ -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>

90
demos/button/radio.html
View File

@@ -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>

114
demos/button/splitbutton.html
View File

@@ -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>

122
demos/button/toolbar.html
View File

@@ -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>

110
demos/datepicker/animation.html
View File

@@ -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>

70
tests/unit/autocomplete/autocomplete.html
View File

@@ -1,35 +1,35 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Autocomplete Test Suite</title>
<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.menu.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="../testsuite.css" rel="stylesheet" />
<script type="text/javascript" src="../../../external/testrunner-r6588.js"></script>
<script type="text/javascript" src="../../jquery.simulate.js"></script>
<script type="text/javascript" src="../testsuite.js"></script>
<script type="text/javascript" src="autocomplete_core.js"></script>
<script type="text/javascript" src="autocomplete_defaults.js"></script>
<script type="text/javascript" src="autocomplete_events.js"></script>
<script type="text/javascript" src="autocomplete_methods.js"></script>
<script type="text/javascript" src="autocomplete_options.js"></script>
<script type="text/javascript" src="autocomplete_tickets.js"></script>
</head>
<body>
<div id="main">
<div><input id="autocomplete" class="foo" /></div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Autocomplete Test Suite</title>
<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.menu.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
<link type="text/css" href="../testsuite.css" rel="stylesheet" />
<script type="text/javascript" src="../../../external/testrunner-r6588.js"></script>
<script type="text/javascript" src="../../jquery.simulate.js"></script>
<script type="text/javascript" src="../testsuite.js"></script>
<script type="text/javascript" src="autocomplete_core.js"></script>
<script type="text/javascript" src="autocomplete_defaults.js"></script>
<script type="text/javascript" src="autocomplete_events.js"></script>
<script type="text/javascript" src="autocomplete_methods.js"></script>
<script type="text/javascript" src="autocomplete_options.js"></script>
<script type="text/javascript" src="autocomplete_tickets.js"></script>
</head>
<body>
<div id="main">
<div><input id="autocomplete" class="foo" /></div>
</div>
</body>
</html>

78
tests/unit/autocomplete/autocomplete_core.js
View File

@@ -1,39 +1,39 @@
/*
* autocomplete_core.js
*/
(function($) {
module("autocomplete: core");
test("close-on-blur is properly delayed", function() {
var ac = $("#autocomplete").autocomplete({
source: ["java", "javascript"]
}).val("ja").autocomplete("search");
same( $(".ui-menu:visible").length, 1 );
ac.blur();
same( $(".ui-menu:visible").length, 1 );
stop();
setTimeout(function() {
same( $(".ui-menu:visible").length, 0 );
start();
}, 200);
})
test("close-on-blur is cancelled when starting a search", function() {
var ac = $("#autocomplete").autocomplete({
source: ["java", "javascript"]
}).val("ja").autocomplete("search");
same( $(".ui-menu:visible").length, 1 );
ac.blur();
same( $(".ui-menu:visible").length, 1 );
ac.autocomplete("search");
stop();
setTimeout(function() {
same( $(".ui-menu:visible").length, 1 );
start();
}, 200);
})
})(jQuery);
/*
* autocomplete_core.js
*/
(function($) {
module("autocomplete: core");
test("close-on-blur is properly delayed", function() {
var ac = $("#autocomplete").autocomplete({
source: ["java", "javascript"]
}).val("ja").autocomplete("search");
same( $(".ui-menu:visible").length, 1 );
ac.blur();
same( $(".ui-menu:visible").length, 1 );
stop();
setTimeout(function() {
same( $(".ui-menu:visible").length, 0 );
start();
}, 200);
})
test("close-on-blur is cancelled when starting a search", function() {
var ac = $("#autocomplete").autocomplete({
source: ["java", "javascript"]
}).val("ja").autocomplete("search");
same( $(".ui-menu:visible").length, 1 );
ac.blur();
same( $(".ui-menu:visible").length, 1 );
ac.autocomplete("search");
stop();
setTimeout(function() {
same( $(".ui-menu:visible").length, 1 );
start();
}, 200);
})
})(jQuery);

24
tests/unit/autocomplete/autocomplete_defaults.js
View File

@@ -1,12 +1,12 @@
/*
* autocomplete_defaults.js
*/
var autocomplete_defaults = {
delay: 300,
disabled: false,
minLength: 1,
source: undefined
};
commonWidgetTests('autocomplete', { defaults: autocomplete_defaults });
/*
* autocomplete_defaults.js
*/
var autocomplete_defaults = {
delay: 300,
disabled: false,
minLength: 1,
source: undefined
};
commonWidgetTests('autocomplete', { defaults: autocomplete_defaults });

240
tests/unit/autocomplete/autocomplete_events.js
View File

@@ -1,120 +1,120 @@
/*
* autocomplete_events.js
*/
(function($) {
module("autocomplete: events");
var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"];
test("all events", function() {
expect(11);
var ac = $("#autocomplete").autocomplete({
delay: 0,
source: data,
search: function(event) {
same(event.type, "autocompletesearch");
},
open: function(event) {
same(event.type, "autocompleteopen");
},
focus: function(event, ui) {
same(event.type, "autocompletefocus");
same(ui.item, {label:"java", value:"java"});
},
close: function(event) {
same(event.type, "autocompleteclose");
same( $(".ui-menu").length, 1 );
},
select: function(event, ui) {
same(event.type, "autocompleteselect");
same(ui.item, {label:"java", value:"java"});
},
change: function(event) {
same(event.type, "autocompletechange");
same( $(".ui-menu").length, 0 );
}
});
stop();
ac.val("ja").keydown();
setTimeout(function() {
same( $(".ui-menu").length, 1 );
ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER });
start();
}, 50);
});
test("cancel search", function() {
expect(6);
var first = true;
var ac = $("#autocomplete").autocomplete({
delay: 0,
source: data,
search: function() {
if (first) {
same( ac.val(), "ja" );
first = false;
return false;
}
same( ac.val(), "java" );
},
open: function() {
ok(true);
}
});
stop();
ac.val("ja").keydown();
setTimeout(function() {
same( $(".ui-menu").length, 0 );
ac.val("java").keydown();
setTimeout(function() {
same( $(".ui-menu").length, 1 );
same( $(".ui-menu .ui-menu-item").length, 2 );
start();
}, 50);
}, 50);
});
test("cancel focus", function() {
expect(1);
var customVal = 'custom value';
var ac = $("#autocomplete").autocomplete({
delay: 0,
source: data,
focus: function(event, ui) {
$(this).val(customVal);
return false;
}
});
stop();
ac.val("ja").keydown();
setTimeout(function() {
ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
same( ac.val(), customVal );
start();
}, 50);
});
test("cancel select", function() {
expect(1);
var customVal = 'custom value';
var ac = $("#autocomplete").autocomplete({
delay: 0,
source: data,
select: function(event, ui) {
$(this).val(customVal);
return false;
}
});
stop();
ac.val("ja").keydown();
setTimeout(function() {
ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER });
same( ac.val(), customVal );
start();
}, 50);
});
})(jQuery);
/*
* autocomplete_events.js
*/
(function($) {
module("autocomplete: events");
var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"];
test("all events", function() {
expect(11);
var ac = $("#autocomplete").autocomplete({
delay: 0,
source: data,
search: function(event) {
same(event.type, "autocompletesearch");
},
open: function(event) {
same(event.type, "autocompleteopen");
},
focus: function(event, ui) {
same(event.type, "autocompletefocus");
same(ui.item, {label:"java", value:"java"});
},
close: function(event) {
same(event.type, "autocompleteclose");
same( $(".ui-menu").length, 1 );
},
select: function(event, ui) {
same(event.type, "autocompleteselect");
same(ui.item, {label:"java", value:"java"});
},
change: function(event) {
same(event.type, "autocompletechange");
same( $(".ui-menu").length, 0 );
}
});
stop();
ac.val("ja").keydown();
setTimeout(function() {
same( $(".ui-menu").length, 1 );
ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER });
start();
}, 50);
});
test("cancel search", function() {
expect(6);
var first = true;
var ac = $("#autocomplete").autocomplete({
delay: 0,
source: data,
search: function() {
if (first) {
same( ac.val(), "ja" );
first = false;
return false;
}
same( ac.val(), "java" );
},
open: function() {
ok(true);
}
});
stop();
ac.val("ja").keydown();
setTimeout(function() {
same( $(".ui-menu").length, 0 );
ac.val("java").keydown();
setTimeout(function() {
same( $(".ui-menu").length, 1 );
same( $(".ui-menu .ui-menu-item").length, 2 );
start();
}, 50);
}, 50);
});
test("cancel focus", function() {
expect(1);
var customVal = 'custom value';
var ac = $("#autocomplete").autocomplete({
delay: 0,
source: data,
focus: function(event, ui) {
$(this).val(customVal);
return false;
}
});
stop();
ac.val("ja").keydown();
setTimeout(function() {
ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
same( ac.val(), customVal );
start();
}, 50);
});
test("cancel select", function() {
expect(1);
var customVal = 'custom value';
var ac = $("#autocomplete").autocomplete({
delay: 0,
source: data,
select: function(event, ui) {
$(this).val(customVal);
return false;
}
});
stop();
ac.val("ja").keydown();
setTimeout(function() {
ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER });
same( ac.val(), customVal );
start();
}, 50);
});
})(jQuery);

70
tests/unit/autocomplete/autocomplete_methods.js
View File

@@ -1,35 +1,35 @@
/*
* autocomplete_methods.js
*/
(function($) {
module("autocomplete: methods");
test("destroy", function() {
var beforeHtml = $("#autocomplete").parent().html();
var afterHtml = $("#autocomplete").autocomplete().autocomplete("destroy").parent().html();
same( beforeHtml, afterHtml );
})
var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"];
test("search", function() {
var ac = $("#autocomplete").autocomplete({
source: data,
minLength: 0
});
ac.autocomplete("search");
same( $(".ui-menu .ui-menu-item").length, data.length, "all items for a blank search" );
ac.val("has");
ac.autocomplete("search")
same( $(".ui-menu .ui-menu-item").text(), "haskell", "only one item for set input value" );
ac.autocomplete("search", "ja");
same( $(".ui-menu .ui-menu-item").length, 2, "only java and javascript for 'ja'" );
$("#autocomplete").autocomplete("destroy");
})
})(jQuery);
/*
* autocomplete_methods.js
*/
(function($) {
module("autocomplete: methods");
test("destroy", function() {
var beforeHtml = $("#autocomplete").parent().html();
var afterHtml = $("#autocomplete").autocomplete().autocomplete("destroy").parent().html();
same( beforeHtml, afterHtml );
})
var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"];
test("search", function() {
var ac = $("#autocomplete").autocomplete({
source: data,
minLength: 0
});
ac.autocomplete("search");
same( $(".ui-menu .ui-menu-item").length, data.length, "all items for a blank search" );
ac.val("has");
ac.autocomplete("search")
same( $(".ui-menu .ui-menu-item").text(), "haskell", "only one item for set input value" );
ac.autocomplete("search", "ja");
same( $(".ui-menu .ui-menu-item").length, 2, "only java and javascript for 'ja'" );
$("#autocomplete").autocomplete("destroy");
})
})(jQuery);

348
tests/unit/autocomplete/autocomplete_options.js
View File

@@ -1,174 +1,174 @@
/*
* autocomplete_options.js
*/
(function($) {
module("autocomplete: options");
/* disabled until autocomplete actually has built-in support for caching
// returns at most 4 items
function source(request) {
ok(true, "handling a request");
switch(request.term) {
case "cha":
return ["Common Pochard", "Common Chiffchaff", "Common Chaffinch", "Iberian Chiffchaff"]
case "chaf":
case "chaff":
return ["Common Chiffchaff", "Common Chaffinch", "Iberian Chiffchaff"]
case "chaffi":
return ["Common Chaffinch"]
case "schi":
return ["schifpre"]
}
}
function search(input) {
var autocomplete = input.data("autocomplete");
autocomplete.search("cha");
autocomplete.close();
autocomplete.search("chaf");
autocomplete.close();
autocomplete.search("chaff");
autocomplete.close();
autocomplete.search("chaffi");
autocomplete.close();
autocomplete.search("schi");
}
test("cache: default", function() {
expect(2);
search($("#autocomplete").autocomplete({
source: source
}));
});
test("cache: {limit:4}", function() {
expect(3);
search($("#autocomplete").autocomplete({
cache: {
limit: 4
},
source: source
}));
});
test("cache: false", function() {
expect(5);
search($("#autocomplete").autocomplete({
cache: false,
source: source
}));
});
*/
var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"];
test("delay", function() {
var ac = $("#autocomplete").autocomplete({
source: data,
delay: 50
});
ac.val("ja").keydown();
same( $(".ui-menu").length, 0 );
// wait half a second for the default delay to open the menu
stop();
setTimeout(function() {
same( $(".ui-menu").length, 1 );
ac.autocomplete("destroy");
start();
}, 100);
});
test("minLength", function() {
var ac = $("#autocomplete").autocomplete({
source: data
});
ac.autocomplete("search", "");
same( $(".ui-menu").length, 0, "blank not enough for minLength: 1" );
ac.autocomplete("option", "minLength", 0);
ac.autocomplete("search", "");
same( $(".ui-menu").length, 1, "blank enough for minLength: 0" );
ac.autocomplete("destroy");
});
test("source, local string array", function() {
var ac = $("#autocomplete").autocomplete({
source: data
});
ac.val("ja").autocomplete("search");
same( $(".ui-menu .ui-menu-item").text(), "javajavascript" );
ac.autocomplete("destroy");
});
function source_test(source, async) {
var ac = $("#autocomplete").autocomplete({
source: source
});
ac.val("ja").autocomplete("search");
function result(){
same( $(".ui-menu .ui-menu-item").text(), "javajavascript" );
ac.autocomplete("destroy");
async && start();
}
if (async) {
stop();
setTimeout(result, 100);
} else {
result();
}
}
test("source, local object array, only label property", function() {
source_test([
{label:"java"},
{label:"php"},
{label:"coldfusion"},
{label:"javascript"}
]);
});
test("source, local object array, only value property", function() {
source_test([
{value:"java"},
{value:"php"},
{value:"coldfusion"},
{value:"javascript"}
]);
});
test("source, url string with remote json string array", function() {
source_test("remote_string_array.txt", true);
});
test("source, url string with remote json object array, only value properties", function() {
source_test("remote_object_array_values.txt", true);
});
test("source, url string with remote json object array, only label properties", function() {
source_test("remote_object_array_labels.txt", true);
});
test("source, custom", function() {
source_test(function(request, response) {
same( request.term, "ja" );
response(["java", "javascript"]);
});
});
test("source, update after init", function() {
var ac = $("#autocomplete").autocomplete({
source: ["java", "javascript", "haskell"]
});
ac.val("ja").autocomplete("search");
same( $(".ui-menu .ui-menu-item").text(), "javajavascript" );
ac.autocomplete("option", "source", ["php", "asp"]);
ac.val("ph").autocomplete("search");
same( $(".ui-menu .ui-menu-item").text(), "php" );
ac.autocomplete("destroy");
});
})(jQuery);
/*
* autocomplete_options.js
*/
(function($) {
module("autocomplete: options");
/* disabled until autocomplete actually has built-in support for caching
// returns at most 4 items
function source(request) {
ok(true, "handling a request");
switch(request.term) {
case "cha":
return ["Common Pochard", "Common Chiffchaff", "Common Chaffinch", "Iberian Chiffchaff"]
case "chaf":
case "chaff":
return ["Common Chiffchaff", "Common Chaffinch", "Iberian Chiffchaff"]
case "chaffi":
return ["Common Chaffinch"]
case "schi":
return ["schifpre"]
}
}
function search(input) {
var autocomplete = input.data("autocomplete");
autocomplete.search("cha");
autocomplete.close();
autocomplete.search("chaf");
autocomplete.close();
autocomplete.search("chaff");
autocomplete.close();
autocomplete.search("chaffi");
autocomplete.close();
autocomplete.search("schi");
}
test("cache: default", function() {
expect(2);
search($("#autocomplete").autocomplete({
source: source
}));
});
test("cache: {limit:4}", function() {
expect(3);
search($("#autocomplete").autocomplete({
cache: {
limit: 4
},
source: source
}));
});
test("cache: false", function() {
expect(5);
search($("#autocomplete").autocomplete({
cache: false,
source: source
}));
});
*/
var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"];
test("delay", function() {
var ac = $("#autocomplete").autocomplete({
source: data,
delay: 50
});
ac.val("ja").keydown();
same( $(".ui-menu").length, 0 );
// wait half a second for the default delay to open the menu
stop();
setTimeout(function() {
same( $(".ui-menu").length, 1 );
ac.autocomplete("destroy");
start();
}, 100);
});
test("minLength", function() {
var ac = $("#autocomplete").autocomplete({
source: data
});
ac.autocomplete("search", "");
same( $(".ui-menu").length, 0, "blank not enough for minLength: 1" );
ac.autocomplete("option", "minLength", 0);
ac.autocomplete("search", "");
same( $(".ui-menu").length, 1, "blank enough for minLength: 0" );
ac.autocomplete("destroy");
});
test("source, local string array", function() {
var ac = $("#autocomplete").autocomplete({
source: data
});
ac.val("ja").autocomplete("search");
same( $(".ui-menu .ui-menu-item").text(), "javajavascript" );
ac.autocomplete("destroy");
});
function source_test(source, async) {
var ac = $("#autocomplete").autocomplete({
source: source
});
ac.val("ja").autocomplete("search");
function result(){
same( $(".ui-menu .ui-menu-item").text(), "javajavascript" );
ac.autocomplete("destroy");
async && start();
}
if (async) {
stop();
setTimeout(result, 100);
} else {
result();
}
}
test("source, local object array, only label property", function() {
source_test([
{label:"java"},
{label:"php"},
{label:"coldfusion"},
{label:"javascript"}
]);
});
test("source, local object array, only value property", function() {
source_test([
{value:"java"},
{value:"php"},
{value:"coldfusion"},
{value:"javascript"}
]);
});
test("source, url string with remote json string array", function() {
source_test("remote_string_array.txt", true);
});
test("source, url string with remote json object array, only value properties", function() {
source_test("remote_object_array_values.txt", true);
});
test("source, url string with remote json object array, only label properties", function() {
source_test("remote_object_array_labels.txt", true);
});
test("source, custom", function() {
source_test(function(request, response) {
same( request.term, "ja" );
response(["java", "javascript"]);
});
});
test("source, update after init", function() {
var ac = $("#autocomplete").autocomplete({
source: ["java", "javascript", "haskell"]
});
ac.val("ja").autocomplete("search");
same( $(".ui-menu .ui-menu-item").text(), "javajavascript" );
ac.autocomplete("option", "source", ["php", "asp"]);
ac.val("ph").autocomplete("search");
same( $(".ui-menu .ui-menu-item").text(), "php" );
ac.autocomplete("destroy");
});
})(jQuery);

20
tests/unit/autocomplete/autocomplete_tickets.js
View File

@@ -1,10 +1,10 @@
/*
* autocomplete_tickets.js
*/
(function($) {
module("autocomplete: tickets");
})(jQuery);
/*
* autocomplete_tickets.js
*/
(function($) {
module("autocomplete: tickets");
})(jQuery);

112
tests/unit/button/button.html
View File

@@ -1,56 +1,56 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Button Test Suite</title>
<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="../testsuite.css" rel="stylesheet" />
<script type="text/javascript" src="../../../external/testrunner-r6588.js"></script>
<script type="text/javascript" src="../../jquery.simulate.js"></script>
<script type="text/javascript" src="../testsuite.js"></script>
<script type="text/javascript" src="button_core.js"></script>
<script type="text/javascript" src="button_defaults.js"></script>
<script type="text/javascript" src="button_events.js"></script>
<script type="text/javascript" src="button_methods.js"></script>
<script type="text/javascript" src="button_options.js"></script>
<script type="text/javascript" src="button_tickets.js"></script>
</head>
<body>
<div id="main">
<div><button id="button" class="foo">Label</button></div>
<div id="radio0" style="margin-top: 2em;">
<input type="radio" id="radio01" name="radio" checked="checked" /><label for="radio01">Choice 1</label>
<input type="radio" id="radio02" name="radio" /><label for="radio02">Choice 2</label>
<input type="radio" id="radio03" name="radio" /><label for="radio03">Choice 3</label>
</div>
<form>
<div id="radio1" style="margin-top: 2em;">
<input type="radio" id="radio11" name="radio" /><label for="radio11">Choice 1</label>
<input type="radio" id="radio12" name="radio" checked="checked" /><label for="radio12">Choice 2</label>
<input type="radio" id="radio13" name="radio" /><label for="radio13">Choice 3</label>
</div>
</form>
<form>
<div id="radio2" style="margin-top: 2em;">
<input type="radio" id="radio21" name="radio" /><label for="radio21">Choice 1</label>
<input type="radio" id="radio22" name="radio" /><label for="radio22">Choice 2</label>
<input type="radio" id="radio23" name="radio" checked="checked" /><label for="radio23">Choice 3</label>
</div>
</form>
<input type="checkbox" id="check" /><label for="check">Toggle</label>
<div><input id="submit" type="submit" value="Label" /></div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Button Test Suite</title>
<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="../testsuite.css" rel="stylesheet" />
<script type="text/javascript" src="../../../external/testrunner-r6588.js"></script>
<script type="text/javascript" src="../../jquery.simulate.js"></script>
<script type="text/javascript" src="../testsuite.js"></script>
<script type="text/javascript" src="button_core.js"></script>
<script type="text/javascript" src="button_defaults.js"></script>
<script type="text/javascript" src="button_events.js"></script>
<script type="text/javascript" src="button_methods.js"></script>
<script type="text/javascript" src="button_options.js"></script>
<script type="text/javascript" src="button_tickets.js"></script>
</head>
<body>
<div id="main">
<div><button id="button" class="foo">Label</button></div>
<div id="radio0" style="margin-top: 2em;">
<input type="radio" id="radio01" name="radio" checked="checked" /><label for="radio01">Choice 1</label>
<input type="radio" id="radio02" name="radio" /><label for="radio02">Choice 2</label>
<input type="radio" id="radio03" name="radio" /><label for="radio03">Choice 3</label>
</div>
<form>
<div id="radio1" style="margin-top: 2em;">
<input type="radio" id="radio11" name="radio" /><label for="radio11">Choice 1</label>
<input type="radio" id="radio12" name="radio" checked="checked" /><label for="radio12">Choice 2</label>
<input type="radio" id="radio13" name="radio" /><label for="radio13">Choice 3</label>
</div>
</form>
<form>
<div id="radio2" style="margin-top: 2em;">
<input type="radio" id="radio21" name="radio" /><label for="radio21">Choice 1</label>
<input type="radio" id="radio22" name="radio" /><label for="radio22">Choice 2</label>
<input type="radio" id="radio23" name="radio" checked="checked" /><label for="radio23">Choice 3</label>
</div>
</form>
<input type="checkbox" id="check" /><label for="check">Toggle</label>
<div><input id="submit" type="submit" value="Label" /></div>
</div>
</body>
</html>

140
tests/unit/button/button_core.js
View File

@@ -1,70 +1,70 @@
/*
* button_core.js
*/
(function($) {
module("button: core");
test("checkbox", function() {
var input = $("#check");
label = $("label[for=check]");
ok( input.is(":visible") );
ok( label.is(":not(.ui-button)") );
input.button();
ok( input.is(":hidden") );
ok( label.is(".ui-button") );
});
test("radios", function() {
var inputs = $("#radio0 input");
labels = $("#radio0 label");
ok( inputs.is(":visible") );
ok( labels.is(":not(.ui-button)") );
inputs.button();
ok( inputs.is(":hidden") );
ok( labels.is(".ui-button") );
});
function assert(noForm, form1, form2) {
ok( $("#radio0 .ui-button" + noForm).is(".ui-state-active") );
ok( $("#radio1 .ui-button" + form1).is(".ui-state-active") );
ok( $("#radio2 .ui-button" + form2).is(".ui-state-active") );
}
test("radio groups", function() {
$(":radio").button();
assert(":eq(0)", ":eq(1)", ":eq(2)");
// click outside of forms
$("#radio0 .ui-button:eq(1)").click();
assert(":eq(1)", ":eq(1)", ":eq(2)");
// click in first form
$("#radio1 .ui-button:eq(0)").click();
assert(":eq(1)", ":eq(0)", ":eq(2)");
// click in second form
$("#radio2 .ui-button:eq(0)").click();
assert(":eq(1)", ":eq(0)", ":eq(0)");
});
test("input type submit, don't create child elements", function() {
var input = $("#submit")
same( input.children().length, 0 );
input.button();
same( input.children().length, 0 );
});
test("buttonset", function() {
var set = $("#radio1").buttonset();
ok( set.is(".ui-button-set") );
same( set.children(".ui-button").length, 3 );
same( set.children("input:radio:hidden").length, 3 );
ok( set.children("label:eq(0)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") );
ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") );
ok( set.children("label:eq(2)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") );
});
})(jQuery);
/*
* button_core.js
*/
(function($) {
module("button: core");
test("checkbox", function() {
var input = $("#check");
label = $("label[for=check]");
ok( input.is(":visible") );
ok( label.is(":not(.ui-button)") );
input.button();
ok( input.is(":hidden") );
ok( label.is(".ui-button") );
});
test("radios", function() {
var inputs = $("#radio0 input");
labels = $("#radio0 label");
ok( inputs.is(":visible") );
ok( labels.is(":not(.ui-button)") );
inputs.button();
ok( inputs.is(":hidden") );
ok( labels.is(".ui-button") );
});
function assert(noForm, form1, form2) {
ok( $("#radio0 .ui-button" + noForm).is(".ui-state-active") );
ok( $("#radio1 .ui-button" + form1).is(".ui-state-active") );
ok( $("#radio2 .ui-button" + form2).is(".ui-state-active") );
}
test("radio groups", function() {
$(":radio").button();
assert(":eq(0)", ":eq(1)", ":eq(2)");
// click outside of forms
$("#radio0 .ui-button:eq(1)").click();
assert(":eq(1)", ":eq(1)", ":eq(2)");
// click in first form
$("#radio1 .ui-button:eq(0)").click();
assert(":eq(1)", ":eq(0)", ":eq(2)");
// click in second form
$("#radio2 .ui-button:eq(0)").click();
assert(":eq(1)", ":eq(0)", ":eq(0)");
});
test("input type submit, don't create child elements", function() {
var input = $("#submit")
same( input.children().length, 0 );
input.button();
same( input.children().length, 0 );
});
test("buttonset", function() {
var set = $("#radio1").buttonset();
ok( set.is(".ui-button-set") );
same( set.children(".ui-button").length, 3 );
same( set.children("input:radio:hidden").length, 3 );
ok( set.children("label:eq(0)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") );
ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") );
ok( set.children("label:eq(2)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") );
});
})(jQuery);

30
tests/unit/button/button_defaults.js
View File

@@ -1,15 +1,15 @@
/*
* button_defaults.js
*/
var button_defaults = {
disabled: false,
text: true,
label: null,
icons: {
primary: null,
secondary: null
}
};
commonWidgetTests('button', { defaults: button_defaults });
/*
* button_defaults.js
*/
var button_defaults = {
disabled: false,
text: true,
label: null,
icons: {
primary: null,
secondary: null
}
};
commonWidgetTests('button', { defaults: button_defaults });

34
tests/unit/button/button_events.js
View File

@@ -1,17 +1,17 @@
/*
* button_events.js
*/
(function($) {
module("button: events");
test("click-through", function() {
expect(2);
var set = $("#radio1").buttonset();
set.find("input:first").click(function() {
ok( true );
});
ok( set.find("label:first").click().is(".ui-button") );
});
})(jQuery);
/*
* button_events.js
*/
(function($) {
module("button: events");
test("click-through", function() {
expect(2);
var set = $("#radio1").buttonset();
set.find("input:first").click(function() {
ok( true );
});
ok( set.find("label:first").click().is(".ui-button") );
});
})(jQuery);

30
tests/unit/button/button_methods.js
View File

@@ -1,15 +1,15 @@
/*
* button_methods.js
*/
(function($) {
module("button: methods");
test("destroy", function() {
var beforeHtml = $("#button").parent().html();
var afterHtml = $("#button").button().button("destroy").parent().html();
same( beforeHtml, afterHtml );
});
})(jQuery);
/*
* button_methods.js
*/
(function($) {
module("button: methods");
test("destroy", function() {
var beforeHtml = $("#button").parent().html();
var afterHtml = $("#button").button().button("destroy").parent().html();
same( beforeHtml, afterHtml );
});
})(jQuery);

138
tests/unit/button/button_options.js
View File

@@ -1,69 +1,69 @@
/*
* button_options.js
*/
(function($) {
module("button: options");
test("text false without icon", function() {
$("#button").button({
text: false
});
ok( $("#button").is(".ui-button-text-only:not(.ui-button-icon-only)") );
$("#button").button("destroy");
});
test("text false with icon", function() {
$("#button").button({
text: false,
icons: {
primary: "iconclass"
}
});
ok( $("#button").is(".ui-button-icon-only:not(.ui-button-text):has(span.ui-icon.iconclass)") );
$("#button").button("destroy");
});
test("label, default", function() {
$("#button").button();
same( $("#button").text(), "Label" );
$("#button").button("destroy");
});
test("label", function() {
$("#button").button({
label: "xxx"
});
same( $("#button").text(), "xxx" );
$("#button").button("destroy");
});
test("label default with input type submit", function() {
same( $("#submit").button().val(), "Label" );
});
test("label with input type submit", function() {
var label = $("#submit").button({
label: "xxx"
}).val();
same( label, "xxx" );
});
test("icons", function() {
$("#button").button({
text: false,
icons: {
primary: "iconclass",
secondary: "iconclass2"
}
});
ok( $("#button").is(":has(span.ui-icon.ui-button-icon-primary.iconclass):has(span.ui-icon.ui-button-icon-secondary.iconclass2)") );
$("#button").button("destroy");
});
})(jQuery);
/*
* button_options.js
*/
(function($) {
module("button: options");
test("text false without icon", function() {
$("#button").button({
text: false
});
ok( $("#button").is(".ui-button-text-only:not(.ui-button-icon-only)") );
$("#button").button("destroy");
});
test("text false with icon", function() {
$("#button").button({
text: false,
icons: {
primary: "iconclass"
}
});
ok( $("#button").is(".ui-button-icon-only:not(.ui-button-text):has(span.ui-icon.iconclass)") );
$("#button").button("destroy");
});
test("label, default", function() {
$("#button").button();
same( $("#button").text(), "Label" );
$("#button").button("destroy");
});
test("label", function() {
$("#button").button({
label: "xxx"
});
same( $("#button").text(), "xxx" );
$("#button").button("destroy");
});
test("label default with input type submit", function() {
same( $("#submit").button().val(), "Label" );
});
test("label with input type submit", function() {
var label = $("#submit").button({
label: "xxx"
}).val();
same( label, "xxx" );
});
test("icons", function() {
$("#button").button({
text: false,
icons: {
primary: "iconclass",
secondary: "iconclass2"
}
});
ok( $("#button").is(":has(span.ui-icon.ui-button-icon-primary.iconclass):has(span.ui-icon.ui-button-icon-secondary.iconclass2)") );
$("#button").button("destroy");
});
})(jQuery);

20
tests/unit/button/button_tickets.js
View File

@@ -1,10 +1,10 @@
/*
* button_tickets.js
*/
(function($) {
module("button: tickets");
})(jQuery);
/*
* button_tickets.js
*/
(function($) {
module("button: tickets");
})(jQuery);

46
ui/i18n/jquery.ui.datepicker-af.js vendored
View File

@@ -1,23 +1,23 @@
/* Afrikaans initialisation for the jQuery UI date picker plugin. */
/* Written by Renier Pretorius. */
jQuery(function($){
$.datepicker.regional['af'] = {
closeText: 'Selekteer',
prevText: 'Vorige',
nextText: 'Volgende',
currentText: 'Vandag',
monthNames: ['Januarie','Februarie','Maart','April','Mei','Junie',
'Julie','Augustus','September','Oktober','November','Desember'],
monthNamesShort: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun',
'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des'],
dayNames: ['Sondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrydag', 'Saterdag'],
dayNamesShort: ['Son', 'Maa', 'Din', 'Woe', 'Don', 'Vry', 'Sat'],
dayNamesMin: ['So','Ma','Di','Wo','Do','Vr','Sa'],
weekHeader: 'Wk',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['af']);
});
/* Afrikaans initialisation for the jQuery UI date picker plugin. */
/* Written by Renier Pretorius. */
jQuery(function($){
$.datepicker.regional['af'] = {
closeText: 'Selekteer',
prevText: 'Vorige',
nextText: 'Volgende',
currentText: 'Vandag',
monthNames: ['Januarie','Februarie','Maart','April','Mei','Junie',
'Julie','Augustus','September','Oktober','November','Desember'],
monthNamesShort: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun',
'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des'],
dayNames: ['Sondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrydag', 'Saterdag'],
dayNamesShort: ['Son', 'Maa', 'Din', 'Woe', 'Don', 'Vry', 'Sat'],
dayNamesMin: ['So','Ma','Di','Wo','Do','Vr','Sa'],
weekHeader: 'Wk',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['af']);
});

44
ui/i18n/jquery.ui.datepicker-bs.js vendored
View File

@@ -1,23 +1,23 @@
/* Bosnian i18n for the jQuery UI date picker plugin. */
/* Written by Kenan Konjo. */
jQuery(function($){
$.datepicker.regional['bs'] = {
closeText: 'Zatvori',
prevText: '&#x3c;',
nextText: '&#x3e;',
currentText: 'Danas',
monthNames: ['Januar','Februar','Mart','April','Maj','Juni',
'Juli','August','Septembar','Oktobar','Novembar','Decembar'],
monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun',
'Jul','Aug','Sep','Okt','Nov','Dec'],
dayNames: ['Nedelja','Ponedeljak','Utorak','Srijeda','Četvrtak','Petak','Subota'],
dayNamesShort: ['Ned','Pon','Uto','Sri','Čet','Pet','Sub'],
dayNamesMin: ['Ne','Po','Ut','Sr','Če','Pe','Su'],
weekHeader: 'Wk',
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['bs']);
/* Bosnian i18n for the jQuery UI date picker plugin. */
/* Written by Kenan Konjo. */
jQuery(function($){
$.datepicker.regional['bs'] = {
closeText: 'Zatvori',
prevText: '&#x3c;',
nextText: '&#x3e;',
currentText: 'Danas',
monthNames: ['Januar','Februar','Mart','April','Maj','Juni',
'Juli','August','Septembar','Oktobar','Novembar','Decembar'],
monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun',
'Jul','Aug','Sep','Okt','Nov','Dec'],
dayNames: ['Nedelja','Ponedeljak','Utorak','Srijeda','Četvrtak','Petak','Subota'],
dayNamesShort: ['Ned','Pon','Uto','Sri','Čet','Pet','Sub'],
dayNamesMin: ['Ne','Po','Ut','Sr','Če','Pe','Su'],
weekHeader: 'Wk',
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['bs']);
});

46
ui/i18n/jquery.ui.datepicker-en-GB.js vendored
View File

@@ -1,23 +1,23 @@
/* English/UK initialisation for the jQuery UI date picker plugin. */
/* Written by Stuart. */
jQuery(function($){
$.datepicker.regional['en-GB'] = {
closeText: 'Done',
prevText: 'Prev',
nextText: 'Next',
currentText: 'Today',
monthNames: ['January','February','March','April','May','June',
'July','August','September','October','November','December'],
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'],
weekHeader: 'Wk',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['en-GB']);
});
/* English/UK initialisation for the jQuery UI date picker plugin. */
/* Written by Stuart. */
jQuery(function($){
$.datepicker.regional['en-GB'] = {
closeText: 'Done',
prevText: 'Prev',
nextText: 'Next',
currentText: 'Today',
monthNames: ['January','February','March','April','May','June',
'July','August','September','October','November','December'],
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'],
weekHeader: 'Wk',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['en-GB']);
});

2
ui/i18n/jquery.ui.datepicker-sr-SR.js vendored
View File

@@ -20,4 +20,4 @@ jQuery(function($){
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['sr-SR']);
});
});

2
ui/i18n/jquery.ui.datepicker-sr.js vendored
View File

@@ -20,4 +20,4 @@ jQuery(function($){
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['sr']);
});
});