Skip to content
Permalink
Browse files

demos: touch up

  • Loading branch information
rdworth committed Jan 1, 2009
1 parent 48af692 commit db5edc794f7b9479cd02a05d0fe0d690b71ffaf7
@@ -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>
@@ -9,20 +9,18 @@
<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: <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>
@@ -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>
@@ -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 -->

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

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

This file was deleted.

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

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

0 comments on commit db5edc7

Please sign in to comment.
You can’t perform that action at this time.