aboutsummaryrefslogtreecommitdiffstats
path: root/demos
diff options
context:
space:
mode:
authorFelix Nagel <info@felixnagel.com>2016-11-09 10:13:10 +0100
committerFelix Nagel <info@felixnagel.com>2016-11-09 10:13:28 +0100
commit6b8ac7ef1ba05e879a09bd58dcd240f9cf16c8cb (patch)
treef5335d796b667c7a4a158ee754f756cc2dc18a52 /demos
parent68028e7262a14463b71539f4e3bca689e49acf33 (diff)
parentd85c68f6cdc02266ab8972e5c4159514b4d2598f (diff)
downloadjquery-ui-6b8ac7ef1ba05e879a09bd58dcd240f9cf16c8cb.tar.gz
jquery-ui-6b8ac7ef1ba05e879a09bd58dcd240f9cf16c8cb.zip
Merge branch 'master' into datepicker
Diffstat (limited to 'demos')
-rw-r--r--demos/autocomplete/images/jquery_32x32.pngbin1417 -> 1331 bytes
-rw-r--r--demos/autocomplete/images/jqueryui_32x32.pngbin1189 -> 1150 bytes
-rw-r--r--demos/autocomplete/images/sizzlejs_32x32.pngbin997 -> 965 bytes
-rw-r--r--demos/autocomplete/images/transparent_1x1.pngbin81 -> 68 bytes
-rw-r--r--demos/autocomplete/multiple-remote.html2
-rw-r--r--demos/autocomplete/remote-jsonp.html23
-rw-r--r--demos/autocomplete/remote.html4
-rw-r--r--demos/autocomplete/search.php16
-rw-r--r--demos/checkboxradio/images/jquery-mobile.pngbin6296 -> 4034 bytes
-rw-r--r--demos/checkboxradio/images/jquery-ui.pngbin7044 -> 4467 bytes
-rw-r--r--demos/checkboxradio/images/jquery.pngbin7206 -> 4507 bytes
-rw-r--r--demos/checkboxradio/images/qunit.pngbin6740 -> 4354 bytes
-rw-r--r--demos/checkboxradio/images/sizzle.pngbin8875 -> 6223 bytes
-rw-r--r--demos/controlgroup/default.html2
-rw-r--r--demos/dialog/modal-message.html2
-rw-r--r--demos/selectmenu/images/24-podcast-square.pngbin681 -> 395 bytes
-rw-r--r--demos/selectmenu/images/24-rss-square.pngbin594 -> 387 bytes
-rw-r--r--demos/selectmenu/images/24-video-square.pngbin649 -> 487 bytes
-rw-r--r--demos/slider/custom-handle.html42
-rw-r--r--demos/slider/index.html1
-rw-r--r--demos/tabs/sortable.html13
21 files changed, 81 insertions, 24 deletions
diff --git a/demos/autocomplete/images/jquery_32x32.png b/demos/autocomplete/images/jquery_32x32.png
index 9312f02d5..6f356f3ab 100644
--- a/demos/autocomplete/images/jquery_32x32.png
+++ b/demos/autocomplete/images/jquery_32x32.png
Binary files differ
diff --git a/demos/autocomplete/images/jqueryui_32x32.png b/demos/autocomplete/images/jqueryui_32x32.png
index 27c18a49b..8dd0cf7cc 100644
--- a/demos/autocomplete/images/jqueryui_32x32.png
+++ b/demos/autocomplete/images/jqueryui_32x32.png
Binary files differ
diff --git a/demos/autocomplete/images/sizzlejs_32x32.png b/demos/autocomplete/images/sizzlejs_32x32.png
index 449def98f..f5d8e2a04 100644
--- a/demos/autocomplete/images/sizzlejs_32x32.png
+++ b/demos/autocomplete/images/sizzlejs_32x32.png
Binary files differ
diff --git a/demos/autocomplete/images/transparent_1x1.png b/demos/autocomplete/images/transparent_1x1.png
index c7ebb7480..ac576dd6e 100644
--- a/demos/autocomplete/images/transparent_1x1.png
+++ b/demos/autocomplete/images/transparent_1x1.png
Binary files differ
diff --git a/demos/autocomplete/multiple-remote.html b/demos/autocomplete/multiple-remote.html
index e1babda4a..6b37ab93a 100644
--- a/demos/autocomplete/multiple-remote.html
+++ b/demos/autocomplete/multiple-remote.html
@@ -17,7 +17,7 @@
return val.split( /,\s*/ );
}
function extractLast( term ) {
- return split( termĀ ).pop();
+ return split( term ).pop();
}
$( "#birds" )
diff --git a/demos/autocomplete/remote-jsonp.html b/demos/autocomplete/remote-jsonp.html
index d43dbbb75..45976bb2c 100644
--- a/demos/autocomplete/remote-jsonp.html
+++ b/demos/autocomplete/remote-jsonp.html
@@ -10,7 +10,6 @@
.ui-autocomplete-loading {
background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}
- #city { width: 25em; }
</style>
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
@@ -19,24 +18,22 @@
$( "#log" ).scrollTop( 0 );
}
- $( "#city" ).autocomplete({
+ $( "#birds" ).autocomplete({
source: function( request, response ) {
$.ajax( {
- url: "http://gd.geobytes.com/AutoCompleteCity",
+ url: "search.php",
dataType: "jsonp",
data: {
- q: request.term
+ term: request.term
},
success: function( data ) {
-
- // Handle 'no match' indicated by [ "" ] response
- response( data.length === 1 && data[ 0 ].length === 0 ? [] : data );
+ response( data );
}
} );
},
- minLength: 3,
+ minLength: 2,
select: function( event, ui ) {
- log( "Selected: " + ui.item.label );
+ log( "Selected: " + ui.item.value + " aka " + ui.item.id );
}
} );
</script>
@@ -44,9 +41,8 @@
<body>
<div class="ui-widget">
- <label for="city">Your city: </label>
- <input id="city" type="text">
- Powered by <a href="http://geobytes.com">geobytes.com</a>
+ <label for="birds">Birds: </label>
+ <input id="birds">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
@@ -55,7 +51,8 @@
</div>
<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 three characters are entered into the field. The datasource is the <a href="http://geobytes.com">geobytes.com webservice</a>. That data is also available in callbacks, as illustrated by the Result area below the input.</p>
+<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 JSONP data, specified via a function which uses <code>jQuery.ajax()</code> for the <code>source</code> option.</p>
</div>
</body>
</html>
diff --git a/demos/autocomplete/remote.html b/demos/autocomplete/remote.html
index 66c28e365..9fa4519cd 100644
--- a/demos/autocomplete/remote.html
+++ b/demos/autocomplete/remote.html
@@ -22,9 +22,7 @@
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 );
+ log( "Selected: " + ui.item.value + " aka " + ui.item.id );
}
});
</script>
diff --git a/demos/autocomplete/search.php b/demos/autocomplete/search.php
index 04bda4224..6ab404ccb 100644
--- a/demos/autocomplete/search.php
+++ b/demos/autocomplete/search.php
@@ -1,6 +1,6 @@
<?php
-sleep( 3 );
+sleep( 2 );
// no term passed - just exit early with no response
if (empty($_GET['term'])) exit ;
$q = strtolower($_GET["term"]);
@@ -573,7 +573,6 @@ $items = array(
"Heuglin's Gull"=>"Larus heuglini"
);
-
$result = array();
foreach ($items as $key=>$value) {
if (strpos(strtolower($key), $q) !== false) {
@@ -584,6 +583,15 @@ foreach ($items as $key=>$value) {
}
// json_encode is available in PHP 5.2 and above, or you can install a PECL module in earlier versions
-echo json_encode($result);
+$output = json_encode($result);
+
+if ($_GET["callback"]) {
+ // Escape special characters to avoid XSS attacks via direct loads of this
+ // page with a callback that contains HTML. This is a lot easier than validating
+ // the callback name.
+ $output = htmlspecialchars($_GET["callback"]) . "($output);";
+}
+
+echo $output;
-?> \ No newline at end of file
+?>
diff --git a/demos/checkboxradio/images/jquery-mobile.png b/demos/checkboxradio/images/jquery-mobile.png
index fe2c36376..006230c13 100644
--- a/demos/checkboxradio/images/jquery-mobile.png
+++ b/demos/checkboxradio/images/jquery-mobile.png
Binary files differ
diff --git a/demos/checkboxradio/images/jquery-ui.png b/demos/checkboxradio/images/jquery-ui.png
index 651e2e115..69f65c96b 100644
--- a/demos/checkboxradio/images/jquery-ui.png
+++ b/demos/checkboxradio/images/jquery-ui.png
Binary files differ
diff --git a/demos/checkboxradio/images/jquery.png b/demos/checkboxradio/images/jquery.png
index ff3fdc21d..034051570 100644
--- a/demos/checkboxradio/images/jquery.png
+++ b/demos/checkboxradio/images/jquery.png
Binary files differ
diff --git a/demos/checkboxradio/images/qunit.png b/demos/checkboxradio/images/qunit.png
index 048bcfddb..1a0eb6ab9 100644
--- a/demos/checkboxradio/images/qunit.png
+++ b/demos/checkboxradio/images/qunit.png
Binary files differ
diff --git a/demos/checkboxradio/images/sizzle.png b/demos/checkboxradio/images/sizzle.png
index 6145cd8ec..41a0dac1d 100644
--- a/demos/checkboxradio/images/sizzle.png
+++ b/demos/checkboxradio/images/sizzle.png
Binary files differ
diff --git a/demos/controlgroup/default.html b/demos/controlgroup/default.html
index 0c26bd6cd..12e1a9af1 100644
--- a/demos/controlgroup/default.html
+++ b/demos/controlgroup/default.html
@@ -75,7 +75,7 @@
<input type="checkbox" name="insurance" id="insurance-v">
<label for="vertical-spinner" class="ui-controlgroup-label"># of cars</label>
<input id="vertical-spinner" class="ui-spinner-input">
- <button>Book Now!</button>
+ <button id="book">Book Now!</button>
</div>
</fieldset>
</div>
diff --git a/demos/dialog/modal-message.html b/demos/dialog/modal-message.html
index 891959e9e..a26f3a2b5 100644
--- a/demos/dialog/modal-message.html
+++ b/demos/dialog/modal-message.html
@@ -12,7 +12,7 @@
modal: true,
buttons: {
Ok: function() {
- $( thisĀ ).dialog( "close" );
+ $( this ).dialog( "close" );
}
}
});
diff --git a/demos/selectmenu/images/24-podcast-square.png b/demos/selectmenu/images/24-podcast-square.png
index 3c3e38f3f..f49fe0965 100644
--- a/demos/selectmenu/images/24-podcast-square.png
+++ b/demos/selectmenu/images/24-podcast-square.png
Binary files differ
diff --git a/demos/selectmenu/images/24-rss-square.png b/demos/selectmenu/images/24-rss-square.png
index f59b69ed3..822d34c6e 100644
--- a/demos/selectmenu/images/24-rss-square.png
+++ b/demos/selectmenu/images/24-rss-square.png
Binary files differ
diff --git a/demos/selectmenu/images/24-video-square.png b/demos/selectmenu/images/24-video-square.png
index ce50ccfde..54b6455ae 100644
--- a/demos/selectmenu/images/24-video-square.png
+++ b/demos/selectmenu/images/24-video-square.png
Binary files differ
diff --git a/demos/slider/custom-handle.html b/demos/slider/custom-handle.html
new file mode 100644
index 000000000..11192f318
--- /dev/null
+++ b/demos/slider/custom-handle.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery UI Slider - Custom handle</title>
+ <link rel="stylesheet" href="../../themes/base/all.css">
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ #custom-handle {
+ width: 3em;
+ height: 1.6em;
+ top: 50%;
+ margin-top: -.8em;
+ text-align: center;
+ line-height: 1.6em;
+ }
+ </style>
+ <script src="../../external/requirejs/require.js"></script>
+ <script src="../bootstrap.js">
+ var handle = $( "#custom-handle" );
+ $( "#slider" ).slider({
+ create: function() {
+ handle.text( $( this ).slider( "value" ) );
+ },
+ slide: function( event, ui ) {
+ handle.text( ui.value );
+ }
+ });
+ </script>
+</head>
+<body>
+
+<div id="slider">
+ <div id="custom-handle" class="ui-slider-handle"></div>
+</div>
+
+<div class="demo-description">
+<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
+</div>
+</body>
+</html>
diff --git a/demos/slider/index.html b/demos/slider/index.html
index 1bc1198c4..f853a79aa 100644
--- a/demos/slider/index.html
+++ b/demos/slider/index.html
@@ -18,6 +18,7 @@
<li><a href="range-vertical.html">Vertical range slider</a></li>
<li><a href="multiple-vertical.html">Multiple sliders</a></li>
<li><a href="colorpicker.html">Simple colorpicker</a></li>
+ <li><a href="custom-handle.html">Custom handle</a></li>
</ul>
</body>
diff --git a/demos/tabs/sortable.html b/demos/tabs/sortable.html
index 051663ed4..9888cff77 100644
--- a/demos/tabs/sortable.html
+++ b/demos/tabs/sortable.html
@@ -9,10 +9,21 @@
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="sortable">
var tabs = $( "#tabs" ).tabs();
+ var previouslyFocused = false;
+
tabs.find( ".ui-tabs-nav" ).sortable({
axis: "x",
- stop: function() {
+
+ // Sortable removes focus, so we need to restore it if the tab was focused
+ // prior to sorting
+ start: function(event, ui) {
+ previouslyFocused = document.activeElement === ui.item[ 0 ];
+ },
+ stop: function(event, ui) {
tabs.tabs( "refresh" );
+ if (previouslyFocused) {
+ ui.item.focus();
+ }
}
});
</script>