aboutsummaryrefslogtreecommitdiffstats
path: root/demos
diff options
context:
space:
mode:
authorRichard Worth <rdworth@gmail.com>2009-01-01 00:27:45 +0000
committerRichard Worth <rdworth@gmail.com>2009-01-01 00:27:45 +0000
commitdb5edc794f7b9479cd02a05d0fe0d690b71ffaf7 (patch)
treef3dc177b199381840bb0d9ba0ec57ee307527a2e /demos
parent48af692c1bc73e132dd7f140e45c422ee5dc05a1 (diff)
downloadjquery-ui-db5edc794f7b9479cd02a05d0fe0d690b71ffaf7.tar.gz
jquery-ui-db5edc794f7b9479cd02a05d0fe0d690b71ffaf7.zip
demos: touch up
Diffstat (limited to 'demos')
-rw-r--r--demos/datepicker/buttonbar.html7
-rw-r--r--demos/datepicker/default.html6
-rw-r--r--demos/datepicker/dropdown_month_year.html6
-rw-r--r--demos/datepicker/inline.html12
-rw-r--r--demos/datepicker/multiple_calendars.html23
-rw-r--r--demos/draggable/index.html2
-rw-r--r--demos/droppable/greedy.html14
-rw-r--r--demos/droppable/index.html13
-rw-r--r--demos/droppable/tolerance.html93
-rw-r--r--demos/resizable/alsoresize.html5
-rw-r--r--demos/resizable/animate.html3
-rw-r--r--demos/resizable/aspectratio.html3
-rw-r--r--demos/resizable/containment.html9
-rw-r--r--demos/resizable/default.html3
-rw-r--r--demos/resizable/delay.html3
-rw-r--r--demos/resizable/distance.html3
-rw-r--r--demos/resizable/ghost.html3
-rw-r--r--demos/resizable/grid.html3
-rw-r--r--demos/resizable/index.html2
-rw-r--r--demos/resizable/max.html3
-rw-r--r--demos/resizable/min.html3
21 files changed, 70 insertions, 149 deletions
diff --git a/demos/datepicker/buttonbar.html b/demos/datepicker/buttonbar.html
index d90796c8d..3b53528b6 100644
--- a/demos/datepicker/buttonbar.html
+++ b/demos/datepicker/buttonbar.html
@@ -9,7 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
- $('#date123').datepicker({
+ $('#datepicker').datepicker({
showButtonPanel: true
});
});
@@ -19,13 +19,10 @@
<div class="demo">
-<p>Date: <input type="text" id="date123"></p>
-
+<p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->
-
-
<div class="demo-description">
<p>This example adds a bar at the bottom of the calendar with buttons for selecting Today's date and a Done button for closing the calendar. The individual buttons are on by default if the bar is added but each can be turned off via options. The button text is customizable.</p>
diff --git a/demos/datepicker/default.html b/demos/datepicker/default.html
index b0b3ac0dc..7abcbcc17 100644
--- a/demos/datepicker/default.html
+++ b/demos/datepicker/default.html
@@ -9,7 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
- $("#date123").datepicker();
+ $("#datepicker").datepicker();
});
</script>
</head>
@@ -17,12 +17,10 @@
<div class="demo">
-Date: <input type="text" id="date123" />
+<p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->
-
-
<div class="demo-description">
<p>This is a default datepicker which is tied to a standard form input. The calendar opens in a small overlay onFocus and closes automatically onBlur if a date if selected.</p>
diff --git a/demos/datepicker/dropdown_month_year.html b/demos/datepicker/dropdown_month_year.html
index b8ce20f05..f9afd267b 100644
--- a/demos/datepicker/dropdown_month_year.html
+++ b/demos/datepicker/dropdown_month_year.html
@@ -9,7 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
- $('#date123').datepicker({
+ $('#datepicker').datepicker({
changeMonth: true,
changeYear: true
});
@@ -20,12 +20,10 @@
<div class="demo">
-<p>Date: <input type="text" id="date123"></p>
+<p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->
-
-
<div class="demo-description">
<p>This datepicker has an optional month and year dropdown added to make it easier to navigate through large timeframes. This is done by adding the changeMonth:true and changeYear:true options.</p>
diff --git a/demos/datepicker/inline.html b/demos/datepicker/inline.html
index 5682f455e..7139cf9b0 100644
--- a/demos/datepicker/inline.html
+++ b/demos/datepicker/inline.html
@@ -9,24 +9,24 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
- $("#date123").datepicker();
+ $("#datepicker").datepicker();
});
</script>
</head>
<body>
-
<div class="demo">
-Date: <div id="date123" /></div>
+Date: <div id="datepicker" /></div>
</div><!-- End demo -->
-
-
<div class="demo-description">
-<p>This is an example of an inline date picker that is embedded in the page instead of opening in an overlay. This is done by calling .datepicker() in a div instead of an input.</p>
+<p>
+This is an example of an inline date picker that is embedded in the page instead of opening in an overlay.
+This is done by calling .datepicker() on a div instead of an input.
+</p>
</div><!-- End demo-description -->
diff --git a/demos/datepicker/multiple_calendars.html b/demos/datepicker/multiple_calendars.html
index 57854098f..3912b94d5 100644
--- a/demos/datepicker/multiple_calendars.html
+++ b/demos/datepicker/multiple_calendars.html
@@ -9,7 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
- $('#date123').datepicker({
+ $('#datepicker').datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
@@ -20,18 +20,29 @@
<div class="demo">
-<p>Date: <input type="text" id="date123"></p>
+<p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->
-
-
<div class="demo-description">
-<p>This datepicker shows two months at a time by setting the numberOfMonths option to 3. This can be set to any number that will fit within your layout. The multiple calendars are used to make it easier to visually scan across months and make a selection. This is not a date range picker. In a future release, a custom date range plugin will be added. For users that want to use the old date range picker built into the datepicker, they must use the previous version of this plugin.</p>
+<p>
+This datepicker shows three months at a time by setting the <code>numberOfMonths</code> option to 3.
+This can be set to any number that will fit within your layout.
+The multiple calendars are used to make it easier to visually scan across months and make a selection.
+</p>
+
+<div style="padding: 0pt 0.7em; margin-top: 20px;" class="ui-state-highlight ui-corner-all">
+<p>
+<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
+<strong>Note:</strong>
+This is not a date range picker.
+In a future release, a custom date range plugin will be added.
+For users that want to use the old date range picker built into the datepicker, they must use the previous version of this plugin (v1.5.3).
+</p>
+</div>
</div><!-- End demo-description -->
-
</body>
</html>
diff --git a/demos/draggable/index.html b/demos/draggable/index.html
index 06cd87235..244df8c3d 100644
--- a/demos/draggable/index.html
+++ b/demos/draggable/index.html
@@ -9,7 +9,7 @@
<div class="demos-nav">
<h4>Examples</h4>
<ul>
- <li class="demo-config-on"><a href="default.html">Default</a></li>
+ <li class="demo-config-on"><a href="default.html">Default Draggable</a></li>
<li><a href="axis.html">Axis</a></li>
<li><a href="containment.html">Containment</a></li>
<li><a href="cursorat.html">cursorAt</a></li>
diff --git a/demos/droppable/greedy.html b/demos/droppable/greedy.html
index 9aa1b5675..9d6be3ad7 100644
--- a/demos/droppable/greedy.html
+++ b/demos/droppable/greedy.html
@@ -9,9 +9,9 @@
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
- #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
- #droppable, #droppable2 { width: 200px; height: 160px; padding: 0.5em; float: left; margin: 10px; }
- #droppable-inner, #droppable2-inner { width: 140px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+ #draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px; }
+ #droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
+ #droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script type="text/javascript">
$(function() {
@@ -46,16 +46,16 @@
</div>
<div id="droppable" class="ui-widget-header">
- <p>Outer droppable (greedy deactivated)</p>
+ <p>Outer droppable</p>
<div id="droppable-inner" class="ui-widget-header">
- <p>Inner droppable (greedy deactivated)</p>
+ <p>Inner droppable (not greedy)</p>
</div>
</div>
<div id="droppable2" class="ui-widget-header">
- <p>Outer droppable (greedy deactivated)</p>
+ <p>Outer droppable</p>
<div id="droppable2-inner" class="ui-widget-header">
- <p>Inner droppable (greedy deactivated)</p>
+ <p>Inner droppable (greedy)</p>
</div>
</div>
diff --git a/demos/droppable/index.html b/demos/droppable/index.html
index 6fd371a25..cc45f31b1 100644
--- a/demos/droppable/index.html
+++ b/demos/droppable/index.html
@@ -9,13 +9,12 @@
<div class="demos-nav">
<h4>Examples</h4>
<ul>
- <li class="demo-config-on"><a href="default.html">Default</a></li>
- <li><a href="accept.html">accept</a></li>
- <li><a href="hoverclass.html">hoverClass</a></li>
- <li><a href="activeclass.html">activeClass</a></li>
- <li><a href="greedy.html">greedy</a></li>
- <li><a href="tolerance.html">tolerance</a></li>
- <li><a href="revert.html">revert</a></li>
+ <li class="demo-config-on"><a href="default.html">Default Droppable</a></li>
+ <li><a href="accept.html">Accept</a></li>
+ <li><a href="hoverclass.html">Hover Class</a></li>
+ <li><a href="activeclass.html">Active Class</a></li>
+ <li><a href="greedy.html">Greedy</a></li>
+ <li><a href="revert.html">Revert</a></li>
</ul>
</div>
diff --git a/demos/droppable/tolerance.html b/demos/droppable/tolerance.html
deleted file mode 100644
index 5447673b7..000000000
--- a/demos/droppable/tolerance.html
+++ /dev/null
@@ -1,93 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Droppable - Tolerance Demo</title>
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
- <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
- #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
- #dropppable, #dropppable-fit, #dropppable-pointer, #dropppable-touch { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
- </style>
- <script type="text/javascript">
- $(function() {
-
- $("#draggable").draggable();
-
- $("#droppable").droppable({
- activeClass: 'ui-state-hover',
- hoverClass: 'ui-state-active',
- drop: function(event, ui) {
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
- }
- });
-
- $("#droppable-fit").droppable({
- activeClass: 'ui-state-hover',
- hoverClass: 'ui-state-active',
- tolerance: 'fit',
- drop: function(event, ui) {
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
- }
- });
-
- $("#droppable-pointer").droppable({
- activeClass: 'ui-state-hover',
- hoverClass: 'ui-state-active',
- tolerance: 'pointer',
- drop: function(event, ui) {
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
- }
- });
-
- $("#droppable-touch").droppable({
- activeClass: 'ui-state-hover',
- hoverClass: 'ui-state-active',
- tolerance: 'touch',
- drop: function(event, ui) {
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
- }
- });
-
- });
- </script>
-</head>
-<body>
-<div class="demo">
-
-<div id="draggable" class="ui-widget-content">
- <p>Drag me to my target</p>
-</div>
-
-<br clear="both" />
-
-<div id="droppable" class="ui-widget-header">
- <p>Default tolerance</p>
-</div>
-
-<div id="droppable-fit" class="ui-widget-header">
- <p>tolerance: 'fit'</p>
-</div>
-
-<div id="droppable-pointer" class="ui-widget-header">
- <p>tolerance: 'pointer'</p>
-</div>
-
-<div id="droppable-touch" class="ui-widget-header">
- <p>tolerance: 'touch'</p>
-</div>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-
-<p>
-<!-- Add description here -->
-</p>
-
-</div><!-- End demo-description -->
-</body>
-</html>
diff --git a/demos/resizable/alsoresize.html b/demos/resizable/alsoresize.html
index 31d5a1333..f200ffcf7 100644
--- a/demos/resizable/alsoresize.html
+++ b/demos/resizable/alsoresize.html
@@ -10,6 +10,7 @@
<style type="text/css">
#resizable { background-position: top left; }
#resizable, #also { width: 150px; height: 120px; padding: 0.5em; }
+ #resizable h3, #also h3 { text-align: center; margin: 0; }
#also { margin-top: 1em; }
</style>
<script type="text/javascript">
@@ -25,11 +26,11 @@
<div class="demo">
<div id="resizable" class="ui-widget-header">
- <p>Resize me</p>
+ <h3 class="ui-state-active">Resize</h3>
</div>
<div id="also" class="ui-widget-content">
- <p>I will resize with the other div. I can also be resized independently.</p>
+ <h3 class="ui-widget-header">will also resize</h3>
</div>
</div><!-- End demo -->
diff --git a/demos/resizable/animate.html b/demos/resizable/animate.html
index 1e2f4c39d..b83575840 100644
--- a/demos/resizable/animate.html
+++ b/demos/resizable/animate.html
@@ -9,6 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
+ #resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted gray; }
</style>
<script type="text/javascript">
@@ -23,7 +24,7 @@
<div class="demo">
<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
+ <h3 class="ui-widget-header">Animate</h3>
</div>
</div><!-- End demo -->
diff --git a/demos/resizable/aspectratio.html b/demos/resizable/aspectratio.html
index df777eb55..286b00b9c 100644
--- a/demos/resizable/aspectratio.html
+++ b/demos/resizable/aspectratio.html
@@ -9,6 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 160px; height: 90px; padding: 0.5em; }
+ #resizable h3 { text-align: center; margin: 0; }
</style>
<script type="text/javascript">
$(function() {
@@ -22,7 +23,7 @@
<div class="demo">
<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
+ <h3 class="ui-widget-header">Aspect Ratio</h3>
</div>
</div><!-- End demo -->
diff --git a/demos/resizable/containment.html b/demos/resizable/containment.html
index 948afbdbb..74e767ad1 100644
--- a/demos/resizable/containment.html
+++ b/demos/resizable/containment.html
@@ -8,9 +8,10 @@
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
+ #container { width: 300px; height: 300px; }
+ #container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
#resizable { background-position: top left; width: 150px; height: 150px; }
#resizable, #container { padding: 0.5em; }
- #container { width: 300px; height: 300px; }
</style>
<script type="text/javascript">
$(function() {
@@ -24,9 +25,9 @@
<div class="demo">
<div id="container" class="ui-widget-content">
- <p>Container</p>
- <div id="resizable" class="ui-widget-header">
- <p>Resize me</p>
+ <h3 class="ui-widget-header">Containment</h3>
+ <div id="resizable" class="ui-state-active">
+ <h3 class="ui-widget-header">Resizable</h3>
</div>
</div>
diff --git a/demos/resizable/default.html b/demos/resizable/default.html
index b98b620cc..f8f05f9e5 100644
--- a/demos/resizable/default.html
+++ b/demos/resizable/default.html
@@ -9,6 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
+ #resizable h3 { text-align: center; margin: 0; }
</style>
<script type="text/javascript">
$(function() {
@@ -20,7 +21,7 @@
<div class="demo">
<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
+ <h3 class="ui-widget-header">Resizable</h3>
</div>
</div><!-- End demo -->
diff --git a/demos/resizable/delay.html b/demos/resizable/delay.html
index 29264dcc2..bddc713bf 100644
--- a/demos/resizable/delay.html
+++ b/demos/resizable/delay.html
@@ -9,6 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
+ #resizable h3 { text-align: center; margin: 0; }
</style>
<script type="text/javascript">
$(function() {
@@ -22,7 +23,7 @@
<div class="demo">
<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
+ <h3 class="ui-widget-header">Delay</h3>
</div>
</div><!-- End demo -->
diff --git a/demos/resizable/distance.html b/demos/resizable/distance.html
index a8b72685f..3e6ffbc1e 100644
--- a/demos/resizable/distance.html
+++ b/demos/resizable/distance.html
@@ -9,6 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
+ #resizable h3 { text-align: center; margin: 0; }
</style>
<script type="text/javascript">
$(function() {
@@ -22,7 +23,7 @@
<div class="demo">
<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
+ <h3 class="ui-widget-header">Distance</h3>
</div>
</div><!-- End demo -->
diff --git a/demos/resizable/ghost.html b/demos/resizable/ghost.html
index af352b35a..71d798066 100644
--- a/demos/resizable/ghost.html
+++ b/demos/resizable/ghost.html
@@ -9,6 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
+ #resizable h3 { text-align: center; margin: 0; }
.ui-resizable-ghost { border: 1px dotted gray; }
</style>
<script type="text/javascript">
@@ -23,7 +24,7 @@
<div class="demo">
<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
+ <h3 class="ui-widget-header">Ghost</h3>
</div>
</div><!-- End demo -->
diff --git a/demos/resizable/grid.html b/demos/resizable/grid.html
index 30360a14a..7a8528984 100644
--- a/demos/resizable/grid.html
+++ b/demos/resizable/grid.html
@@ -9,6 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
+ #resizable h3 { text-align: center; margin: 0; }
</style>
<script type="text/javascript">
$(function() {
@@ -22,7 +23,7 @@
<div class="demo">
<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
+ <h3 class="ui-widget-header">Grid</h3>
</div>
</div><!-- End demo -->
diff --git a/demos/resizable/index.html b/demos/resizable/index.html
index 0d329c53a..6e691cbb4 100644
--- a/demos/resizable/index.html
+++ b/demos/resizable/index.html
@@ -9,7 +9,7 @@
<div class="demos-nav">
<h4>Examples</h4>
<ul>
- <li class="demo-config-on"><a href="default.html">Default</a></li>
+ <li class="demo-config-on"><a href="default.html">Default Resizable</a></li>
<li><a href="alsoresize.html">Also Resize</a></li>
<li><a href="animate.html">Animate</a></li>
<li><a href="aspectratio.html">Aspect Ratio</a></li>
diff --git a/demos/resizable/max.html b/demos/resizable/max.html
index 859dca81f..4061cf7f7 100644
--- a/demos/resizable/max.html
+++ b/demos/resizable/max.html
@@ -9,6 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
+ #resizable h3 { text-align: center; margin: 0; }
</style>
<script type="text/javascript">
$(function() {
@@ -23,7 +24,7 @@
<div class="demo">
<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
+ <h3 class="ui-widget-header">maxHeight / maxWidth</h3>
</div>
</div><!-- End demo -->
diff --git a/demos/resizable/min.html b/demos/resizable/min.html
index 8c8621757..518eb6a77 100644
--- a/demos/resizable/min.html
+++ b/demos/resizable/min.html
@@ -9,6 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
+ #resizable h3 { text-align: center; margin: 0; }
</style>
<script type="text/javascript">
$(function() {
@@ -23,7 +24,7 @@
<div class="demo">
<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
+ <h3 class="ui-widget-header">minHeight / minWidth</h3>
</div>
</div><!-- End demo -->
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-23 18:37:47 +0000