aboutsummaryrefslogtreecommitdiffstats
path: root/demos
diff options
context:
space:
mode:
Diffstat (limited to 'demos')
-rw-r--r--demos/autocomplete/combobox.html38
-rw-r--r--demos/autocomplete/custom-data.html2
-rw-r--r--demos/autocomplete/maxheight.html2
-rw-r--r--demos/datepicker/date-range.html18
-rw-r--r--demos/demos.css2
-rw-r--r--demos/draggable/snap-to.html4
-rw-r--r--demos/index.html2
-rw-r--r--demos/menu/default.html4
-rw-r--r--demos/menu/index.html1
-rw-r--r--demos/menu/navigationmenu.html2
-rw-r--r--demos/menu/topalignmenu.html17
-rw-r--r--demos/position/cycler.html6
-rw-r--r--demos/position/default.html37
-rw-r--r--demos/sortable/empty-lists.html2
-rw-r--r--demos/tooltip/custom-content.html10
-rw-r--r--demos/tooltip/custom-style.html101
-rw-r--r--demos/tooltip/forms.html33
17 files changed, 124 insertions, 157 deletions
diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html
index ed457b206..e2ef40dd9 100644
--- a/demos/autocomplete/combobox.html
+++ b/demos/autocomplete/combobox.html
@@ -14,25 +14,37 @@
<script src="../../ui/jquery.ui.tooltip.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
+ .ui-combobox {
+ position: relative;
+ display: inline-block;
+ }
.ui-button {
+ position: absolute;
+ top: 0;
+ bottom: 0;
margin-left: -1px;
+ padding: 0;
+ /* adjust styles for IE 6/7 */
+ *height: 1.7em;
+ *top: 0.1em;
}
- .ui-button-icon-only .ui-button-text {
- padding: 0.35em;
- }
.ui-autocomplete-input {
margin: 0;
- padding: 0.4em 0 0.4em 0.45em;
+ padding: 0.3em;
}
</style>
<script>
(function( $ ) {
$.widget( "ui.combobox", {
_create: function() {
- var that = this,
+ var input,
+ that = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
- value = selected.val() ? selected.text() : "";
+ value = selected.val() ? selected.text() : "",
+ wrapper = this.wrapper = $( "<span>" )
+ .addClass( "ui-combobox" )
+ .insertAfter( select );
function removeIfInvalid(element) {
var value = $( element ).val(),
@@ -59,10 +71,11 @@
}
}
- var input = this.input = $( "<input>" )
- .insertAfter( select )
+ input = $( "<input>" )
+ .appendTo( wrapper )
.val( value )
.attr( "title", "" )
+ .addClass( "ui-state-default" )
.autocomplete({
delay: 0,
minLength: 0,
@@ -103,11 +116,11 @@
.appendTo( ul );
};
- this.button = $( "<button type='button'>&nbsp;</button>" )
+ $( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.tooltip()
- .insertAfter( input )
+ .appendTo( wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
@@ -142,8 +155,7 @@
},
destroy: function() {
- this.input.remove();
- this.button.remove();
+ this.wrapper.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
@@ -159,7 +171,7 @@
</script>
</head>
<body>
-
+
<div class="demo">
<div class="ui-widget">
diff --git a/demos/autocomplete/custom-data.html b/demos/autocomplete/custom-data.html
index c04c6905a..8f6eaa633 100644
--- a/demos/autocomplete/custom-data.html
+++ b/demos/autocomplete/custom-data.html
@@ -79,7 +79,7 @@
<div class="demo">
<div id="project-label">Select a project (type "j" for a start):</div>
- <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default">
+ <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>
diff --git a/demos/autocomplete/maxheight.html b/demos/autocomplete/maxheight.html
index 9a2cc96a5..3804249dc 100644
--- a/demos/autocomplete/maxheight.html
+++ b/demos/autocomplete/maxheight.html
@@ -17,8 +17,6 @@
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
- /* add padding to account for vertical scrollbar */
- padding-right: 20px;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
diff --git a/demos/datepicker/date-range.html b/demos/datepicker/date-range.html
index f939e8e93..09ebba842 100644
--- a/demos/datepicker/date-range.html
+++ b/demos/datepicker/date-range.html
@@ -11,18 +11,20 @@
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
- var dates = $( "#from, #to" ).datepicker({
+ $( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onSelect: function( selectedDate ) {
- var option = this.id == "from" ? "minDate" : "maxDate",
- instance = $( this ).data( "datepicker" ),
- date = $.datepicker.parseDate(
- instance.settings.dateFormat ||
- $.datepicker._defaults.dateFormat,
- selectedDate, instance.settings );
- dates.not( this ).datepicker( "option", option, date );
+ $( "#to" ).datepicker( "option", "minDate", selectedDate );
+ }
+ });
+ $( "#to" ).datepicker({
+ defaultDate: "+1w",
+ changeMonth: true,
+ numberOfMonths: 3,
+ onSelect: function( selectedDate ) {
+ $( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
diff --git a/demos/demos.css b/demos/demos.css
index cf6da8bd1..807d025b5 100644
--- a/demos/demos.css
+++ b/demos/demos.css
@@ -18,6 +18,8 @@ body {
.layout-grid {
width: 960px;
+ border-spacing: 0;
+ border-collapse: collapse;
}
.layout-grid td {
diff --git a/demos/draggable/snap-to.html b/demos/draggable/snap-to.html
index 320cb7947..a0f38f866 100644
--- a/demos/draggable/snap-to.html
+++ b/demos/draggable/snap-to.html
@@ -28,12 +28,12 @@
<body>
<div class="demo">
-
+
<div id="snaptarget" class="ui-widget-header">
<p>I'm a snap target</p>
</div>
-<br clear="both" />
+<br style="clear:both" />
<div id="draggable" class="draggable ui-widget-content">
<p>Default (snap: true), snaps to all other draggable elements</p>
diff --git a/demos/index.html b/demos/index.html
index f96753d37..678c9961f 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -269,7 +269,7 @@
</head>
<body>
-<table class="layout-grid" cellspacing="0" cellpadding="0">
+<table class="layout-grid">
<tr>
<td class="left-nav">
<dl class="demos-nav">
diff --git a/demos/menu/default.html b/demos/menu/default.html
index 9f2e21622..b1c0b9fbb 100644
--- a/demos/menu/default.html
+++ b/demos/menu/default.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
+ <meta charset="utf-8">
<title>jQuery UI Menu - Default demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script src="../../jquery-1.7.2.js"></script>
@@ -15,7 +15,7 @@
});
</script>
<style>
-
+
</style>
</head>
<body>
diff --git a/demos/menu/index.html b/demos/menu/index.html
index f55d16514..b5bdb43fd 100644
--- a/demos/menu/index.html
+++ b/demos/menu/index.html
@@ -10,7 +10,6 @@
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
- <li><a href="contextmenu.html">Contextmenu</a></li>
<li><a href="topalignmenu.html">Top-aligned sub menus</a></li>
<li><a href="navigationmenu.html">Navigation menu</a></li>
</ul>
diff --git a/demos/menu/navigationmenu.html b/demos/menu/navigationmenu.html
index 970b20890..8c7b2b993 100644
--- a/demos/menu/navigationmenu.html
+++ b/demos/menu/navigationmenu.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8" />
+ <meta charset="utf-8">
<title>jQuery UI Menu - Navigation Menu demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script src="../../jquery-1.7.2.js"></script>
diff --git a/demos/menu/topalignmenu.html b/demos/menu/topalignmenu.html
index deb8fbb6f..7b7e052e4 100644
--- a/demos/menu/topalignmenu.html
+++ b/demos/menu/topalignmenu.html
@@ -1,15 +1,16 @@
<!doctype html>
<html>
<head>
+ <meta charset="utf-8">
<title>Menu Demo: Top-aligned Menu</title>
- <link rel="stylesheet" href="../demos.css" type="text/css" />
- <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
- <script type="text/javascript" src="../../jquery-1.7.2.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">
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script src="../../jquery-1.7.2.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script>
$(function() {
$("#topMenu").menu({
position: { of: "ul:has(a.ui-state-focus):last" }
diff --git a/demos/position/cycler.html b/demos/position/cycler.html
index 084b10fc1..490d88fcb 100644
--- a/demos/position/cycler.html
+++ b/demos/position/cycler.html
@@ -101,9 +101,9 @@
<div class="demo">
-<img src="images/earth.jpg" width="458" height="308" />
-<img src="images/flight.jpg" width="512" height="307" />
-<img src="images/rocket.jpg" width="300" height="353" />
+<img src="images/earth.jpg" width="458" height="308" alt="earth" />
+<img src="images/flight.jpg" width="512" height="307" alt="flight" />
+<img src="images/rocket.jpg" width="300" height="353" alt="rocket" />
<a id="previous" href="#">Previous</a>
<a id="next" href="#">Next</a>
diff --git a/demos/position/default.html b/demos/position/default.html
index 202417348..01137be62 100644
--- a/demos/position/default.html
+++ b/demos/position/default.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -37,53 +37,28 @@
width: 120px;
height: 40px;
}
- .ui-flipped-top {
- border-top: 3px solid #000000;
- }
- .ui-flipped-bottom {
- border-bottom: 3px solid #000000;
- }
- .ui-flipped-left {
- border-left: 3px solid #000000;
- }
- .ui-flipped-right {
- border-right: 3px solid #000000;
- }
select, input {
margin-left: 15px;
}
</style>
<script>
$(function() {
- function position( using ) {
+ function position() {
$( ".positionable" ).position({
of: $( "#parent" ),
my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
offset: $( "#offset" ).val(),
- using: using,
- collision: $( "#collision_horizontal" ).val() + ' ' + $( "#collision_vertical" ).val()
+ collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
});
}
$( ".positionable" ).css( "opacity", 0.5 );
- $( ":input" ).bind( "click keyup change", function() { position(); });
+ $( ":input" ).bind( "click keyup change", position );
$( "#parent" ).draggable({
- drag: function() { position(); }
- });
-
- $( ".positionable" ).draggable({
- drag: function( event, ui ) {
- // reset offset before calculating it
- $( "#offset" ).val( "0" );
- position(function( result ) {
- $( "#offset" ).val( "" + ( ui.offset.left - result.left ) +
- " " + ( ui.offset.top - result.top ) );
- position();
- });
- }
+ drag: position
});
position();
@@ -142,7 +117,7 @@
</div>
<div style="padding-bottom: 20px;">
<b>offset:</b>
- <input id="offset" type="text" size="15"/>
+ <input id="offset">
</div>
<div style="padding-bottom: 20px;">
<b>collision:</b>
diff --git a/demos/sortable/empty-lists.html b/demos/sortable/empty-lists.html
index f49b1072f..87b581844 100644
--- a/demos/sortable/empty-lists.html
+++ b/demos/sortable/empty-lists.html
@@ -51,7 +51,7 @@
<ul id="sortable3" class='droptrue'>
</ul>
-<br clear="both" />
+<br style="clear:both" />
</div><!-- End demo -->
diff --git a/demos/tooltip/custom-content.html b/demos/tooltip/custom-content.html
index 41739cfa7..3b3308153 100644
--- a/demos/tooltip/custom-content.html
+++ b/demos/tooltip/custom-content.html
@@ -30,9 +30,11 @@
content: function() {
var element = $( this );
if ( element.is( "[data-geo]" ) ) {
- return "<img class='map' src='http://maps.google.com/maps/api/staticmap?" +
+ var text = element.text();
+ return "<img class='map' alt='" + text +
+ "' src='http://maps.google.com/maps/api/staticmap?" +
"zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
- element.text() + "'>";
+ text + "'>";
}
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
@@ -52,7 +54,7 @@
<div class="ui-widget photo">
<div class="ui-widget-header ui-corner-all">
<h2>St. Stephen's Cathedral</h2>
- <h3><a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo>Vienna, Austria</a></h3>
+ <h3><a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo>Vienna, Austria</a></h3>
</div>
<a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
<img src="images/st-stephens.jpg" alt="St. Stephen's Cathedral" class="ui-corner-all">
@@ -62,7 +64,7 @@
<div class="ui-widget photo">
<div class="ui-widget-header ui-corner-all">
<h2>Tower Bridge</h2>
- <h3><a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo>London, England</a></h3>
+ <h3><a href="http://maps.google.com/maps?q=london,+england&amp;z=11" data-geo>London, England</a></h3>
</div>
<a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
<img src="images/tower-bridge.jpg" alt="Tower Bridge" class="ui-corner-all">
diff --git a/demos/tooltip/custom-style.html b/demos/tooltip/custom-style.html
index 4d48616cb..633da3d95 100644
--- a/demos/tooltip/custom-style.html
+++ b/demos/tooltip/custom-style.html
@@ -13,76 +13,67 @@
<script>
$(function() {
$( ".demo" ).tooltip({
- open: function(event, ui) {
- $("<div>").addClass("arrow").appendTo(ui.tooltip);
- },
position: {
- my: "center bottom",
+ my: "center bottom-20",
at: "center top",
- offset: "0 -20px"
+ using: function( position, feedback ) {
+ $( this ).css( position );
+ $( "<div>" )
+ .addClass( "arrow" )
+ .addClass( feedback.vertical )
+ .addClass( feedback.horizontal )
+ .appendTo( this );
+ }
}
});
});
</script>
<style>
- label {
- display: inline-block;
- width: 5em;
- }
- .demo {
- margin: 10em 0 0 10em;
- }
.ui-tooltip, .arrow:after {
- background: black;
- border: 2px solid white;
+ background: black;
+ border: 2px solid white;
}
.ui-tooltip {
- display: inline-block;
- position: relative;
- padding: 10px 20px;
- color: white;
- border-radius: 20px;
- text-align: center;
- font: bold 14px "Helvetica Neue", Sans-Serif;
- font-stretch: condensed;
- text-decoration: none;
- text-transform: uppercase;
- box-shadow: 0 0 7px black;
+ padding: 10px 20px;
+ color: white;
+ border-radius: 20px;
+ font: bold 14px "Helvetica Neue", Sans-Serif;
+ text-transform: uppercase;
+ box-shadow: 0 0 7px black;
}
.arrow {
- width: 70px;
- height: 16px;
- overflow: hidden;
- position: absolute;
- left: 50%;
- margin-left: -35px;
- bottom: -16px;
+ width: 70px;
+ height: 16px;
+ overflow: hidden;
+ position: absolute;
+ left: 50%;
+ margin-left: -35px;
+ bottom: -16px;
}
- .arrow:after {
- content: "";
- position: absolute;
- left: 20px;
- top: -20px;
- width: 25px;
- height: 25px;
- -webkit-box-shadow: 6px 5px 9px -9px black,
- 5px 6px 9px -9px black;
- -moz-box-shadow: 6px 5px 9px -9px black,
- 5px 6px 9px -9px black;
- box-shadow: 6px 5px 9px -9px black,
- 5px 6px 9px -9px black;
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- -o-transform: rotate(45deg);
+ .arrow.top {
+ top: -16px;
+ bottom: auto;
}
- div[data-tooltip].active {
- opacity: 1;
- margin-top: 6px;
+ .arrow.left {
+ left: 20%;
+ }
+ .arrow:after {
+ content: "";
+ position: absolute;
+ left: 20px;
+ top: -20px;
+ width: 25px;
+ height: 25px;
+ box-shadow: 6px 5px 9px -9px black;
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ tranform: rotate(45deg);
}
- div[data-tooltip].out {
- opacity: 0;
- margin-top: -20px;
+ .arrow.top:after {
+ bottom: -20px;
+ top: auto;
}
</style>
</head>
diff --git a/demos/tooltip/forms.html b/demos/tooltip/forms.html
index ec01396a7..6440bf89e 100644
--- a/demos/tooltip/forms.html
+++ b/demos/tooltip/forms.html
@@ -27,26 +27,14 @@
</style>
<script>
$(function() {
- var tooltips = $( "[title]" )
- .click(function() {
- $( this ).tooltip( $( this ).attr( "title" ) ? "open" : "close" );
- })
- .bind( "mouseover focusin mouseleave blur click", function( event ) {
- event.stopImmediatePropagation();
- })
- .tooltip();
+ var tooltips = $( "[title]" ).tooltip();
$( "<button>" )
.text( "Show help" )
.button()
- .toggle(
- function() {
- tooltips.tooltip( "open" );
- },
- function() {
- tooltips.tooltip( "close" );
- }
- )
- .appendTo( "form" );
+ .click(function() {
+ tooltips.tooltip( "open" );
+ })
+ .insertAfter( "form" );
});
</script>
</head>
@@ -58,18 +46,15 @@
<fieldset>
<div>
<label for="firstname">Firstname</label>
- <input id="firstname" name="firstname">
- <span title="Please provide your firstname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
+ <input id="firstname" name="firstname" title="Please provide your firstname.">
</div>
<div>
<label for="lastname">Lastname</label>
- <input id="lastname" name="lastname">
- <span title="Please provide also your lastname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
+ <input id="lastname" name="lastname" title="Please provide also your lastname.">
</div>
<div>
<label for="address">Address</label>
- <input id="address" name="address">
- <span title="Your home or work address." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span>
+ <input id="address" name="address" title="Your home or work address.">
</div>
</fieldset>
</form>
@@ -79,7 +64,7 @@
<div class="demo-description">
-<p>Use the button below to display the help texts. Click again to hide them. Default hover and focus events are removed to show tooltip only programmatically.</p>
+<p>Use the button below to display the help texts, or just focus or mouseover the indivdual inputs.</p>
<p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
</div><!-- End demo-description -->
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-17 04:53:05 +0000