diff options
Diffstat (limited to 'tests')
-rw-r--r-- | tests/static/accordion.html | 64 | ||||
-rw-r--r-- | tests/static/all.html | 74 | ||||
-rw-r--r-- | tests/static/datepicker.html | 898 | ||||
-rw-r--r-- | tests/static/dialog.html | 70 | ||||
-rw-r--r-- | tests/static/progressbar.html | 34 | ||||
-rw-r--r-- | tests/static/slider.html | 58 | ||||
-rw-r--r-- | tests/static/tabs.html | 60 | ||||
-rw-r--r-- | tests/testsuite.css | 8 | ||||
-rw-r--r-- | tests/testsuite.js | 20 | ||||
-rw-r--r-- | tests/visual/draggable.scroll.html | 316 |
10 files changed, 801 insertions, 801 deletions
diff --git a/tests/static/accordion.html b/tests/static/accordion.html index 80aa932c3..64ab17d06 100644 --- a/tests/static/accordion.html +++ b/tests/static/accordion.html @@ -1,32 +1,32 @@ -<!doctype html>
-<html>
-<head>
- <title>jQuery UI Accordion Static Markup Test Page</title>
- <link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css">
-</head>
-<body>
-
-<h1>jQuery UI Accordion Static Markup Test Page</h1>
-
-<div class="ui-accordion ui-widget ui-helper-reset">
- <div class="ui-accordion-group selected">
- <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" tabindex="0"><span class="ui-icon ui-icon-circle-minus"></span><a href="#">Test 1</a></h3>
- <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px;">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
- </div>
- </div>
- <div class="ui-accordion-group">
- <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-circle-plus"></span><a href="#">Test 2</a></h3>
- <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
- </div>
- <div class="ui-accordion-group">
- <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-circle-plus"></span><a href="#">Test 3</a></h3>
- <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- </div>
- </div>
-</div>
-
-</body>
-</html>
+<!doctype html> +<html> +<head> + <title>jQuery UI Accordion Static Markup Test Page</title> + <link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css"> +</head> +<body> + +<h1>jQuery UI Accordion Static Markup Test Page</h1> + +<div class="ui-accordion ui-widget ui-helper-reset"> + <div class="ui-accordion-group selected"> + <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" tabindex="0"><span class="ui-icon ui-icon-circle-minus"></span><a href="#">Test 1</a></h3> + <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px;"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> + </div> + </div> + <div class="ui-accordion-group"> + <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-circle-plus"></span><a href="#">Test 2</a></h3> + <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> + </div> + <div class="ui-accordion-group"> + <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-circle-plus"></span><a href="#">Test 3</a></h3> + <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + </div> + </div> +</div> + +</body> +</html> diff --git a/tests/static/all.html b/tests/static/all.html index ef580d5f8..4353d390f 100644 --- a/tests/static/all.html +++ b/tests/static/all.html @@ -1,37 +1,37 @@ -<!doctype html>
-<html>
-<head>
- <title>jQuery UI Static Markup Test Page</title>
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css">
- <style type="text/css">
- dd.plugin { margin-top: 0.3em; margin-bottom: 1em; }
- </style>
-</head>
-<body>
-
-<dl id="plugins">
-
-</dl>
-
-<script type="text/javascript">
-
-var plugins = $("#plugins");
-
-$("accordion datepicker dialog progressbar slider tabs".split(" ")).each(function() {
-
- var pluginName = this;
- var url = pluginName + ".html";
-
- $('<dt><a href="' + url + '">' + url + '</a></dt>').appendTo(plugins);
- $('<dd class="plugin"></dd>').load(url, function() {
- var plugin = $(this).find(".ui-" + pluginName).remove();
- $(this).empty().append(plugin);
- }).appendTo(plugins);
-
-});
-
-</script>
-
-</body>
-</html>
+<!doctype html> +<html> +<head> + <title>jQuery UI Static Markup Test Page</title> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css"> + <style type="text/css"> + dd.plugin { margin-top: 0.3em; margin-bottom: 1em; } + </style> +</head> +<body> + +<dl id="plugins"> + +</dl> + +<script type="text/javascript"> + +var plugins = $("#plugins"); + +$("accordion datepicker dialog progressbar slider tabs".split(" ")).each(function() { + + var pluginName = this; + var url = pluginName + ".html"; + + $('<dt><a href="' + url + '">' + url + '</a></dt>').appendTo(plugins); + $('<dd class="plugin"></dd>').load(url, function() { + var plugin = $(this).find(".ui-" + pluginName).remove(); + $(this).empty().append(plugin); + }).appendTo(plugins); + +}); + +</script> + +</body> +</html> diff --git a/tests/static/datepicker.html b/tests/static/datepicker.html index fbc54427f..f9dc46659 100644 --- a/tests/static/datepicker.html +++ b/tests/static/datepicker.html @@ -1,449 +1,449 @@ -<!doctype html>
-<html>
-<head>
- <title>jQuery UI Datepicker Static Markup Test Page</title>
- <link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css">
-</head>
-<body>
-
-<h1>jQuery UI Datepicker Static Markup Test Page</h1>
-
-<!-- Datepicker with read only month/year -->
-
-<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
- <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
- <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
- <a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
- <div class="ui-datepicker-title">
- <span class="ui-datepicker-month">December</span>
- <span class="ui-datepicker-year">2008</span>
- </div>
- </div>
- <table class="ui-datepicker-calendar">
- <thead>
- <tr>
- <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
- <th><span title="Monday">Mo</span></th>
- <th><span title="Tuesday">Tu</span></th>
- <th><span title="Wednesday">We</span></th>
- <th><span title="Thursday">Th</span></th>
- <th><span title="Friday">Fr</span></th>
- <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
- </td><td class=""><a href="#" class="ui-state-default">1</a></td>
- <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
- <td class=""><a href="#" class="ui-state-default">3</a></td>
- <td class=""><a href="#" class="ui-state-default">4</a></td>
- <td class=""><a href="#" class="ui-state-default">5</a></td>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
- </tr>
- <tr>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
- <td class=""><a href="#" class="ui-state-default">8</a></td>
- <td class=""><a href="#" class="ui-state-default">9</a></td>
- <td class=""><a href="#" class="ui-state-default">10</a></td>
- <td class=""><a href="#" class="ui-state-default">11</a></td>
- <td class=""><a href="#" class="ui-state-default">12</a></td>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
- </tr>
- <tr>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
- <td class=""><a href="#" class="ui-state-default">15</a></td>
- <td class=""><a href="#" class="ui-state-default">16</a></td>
- <td class=""><a href="#" class="ui-state-default">17</a></td>
- <td class=""><a href="#" class="ui-state-default">18</a></td>
- <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
- </tr>
- <tr>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
- <td class=""><a href="#" class="ui-state-default">22</a></td>
- <td class=""><a href="#" class="ui-state-default">23</a></td>
- <td class=""><a href="#" class="ui-state-default">24</a></td>
- <td class=""><a href="#" class="ui-state-default">25</a></td>
- <td class=""><a href="#" class="ui-state-default">26</a></td>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
- </tr>
- <tr>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
- <td class=""><a href="#" class="ui-state-default">29</a></td>
- <td class=""><a href="#" class="ui-state-default">30</a></td>
- <td class=""><a href="#" class="ui-state-default">31</a></td>
- <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
- </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
- </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
- </td></tr>
- </tbody>
- </table>
- </div>
-
-
-<!-- Datepicker with 1 combined select
-
-
-
-
-
-
-<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
- <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
- <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
- <a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
- <div class="ui-datepicker-title">
- <select class="ui-datepicker-month-year">
- <optgroup name="2007">
- <option value="2007_0">January 2007</option>
- <option value="2007_1">February 2007</option>
- <option value="2007_2">March 2007</option>
- <option value="2007_3">April 2007</option>
- <option value="2007_4">May 2007</option>
- <option value="2007_5">June 2007</option>
- <option value="2007_6">July 2007</option>
- <option value="2007_7">August 2007</option>
- <option value="2007_8">September 2007</option>
- <option value="2007_9">October 2007</option>
- <option value="2007_10">November 2007</option>
- <option value="2007_11">December 2007</option>
- </optgroup>
- <optgroup name="2008">
- <option value="2008_0">January 2008</option>
- <option value="2008_1">February 2008</option>
- <option value="2008_2">March 2008</option>
- <option value="2008_3">April 2008</option>
- <option value="2008_4">May 2008</option>
- <option value="2008_5">June 2008</option>
- <option value="2008_6">July 2008</option>
- <option value="2008_7">August 2008</option>
- <option value="2008_8">September 2008</option>
- <option value="2008_9">October 2008</option>
- <option value="2008_10">November 2008</option>
- <option selected="selected" value="2008_11">December 2008</option>
- </optgroup>
- <optgroup name="2009">
- <option value="2009_0">January 2009</option>
- <option value="2009_1">February 2009</option>
- <option value="2009_2">March 2009</option>
- <option value="2009_3">April 2009</option>
- <option value="2009_4">May 2009</option>
- <option value="2009_5">June 2009</option>
- <option value="2009_6">July 2009</option>
- <option value="2009_7">August 2009</option>
- <option value="2009_8">September 2009</option>
- <option value="2009_9">October 2009</option>
- <option value="2009_10">November 2009</option>
- <option value="2009_11">December 2009</option>
- </optgroup>
- <optgroup name="2010">
- <option value="2010_0">January 2010</option>
- <option value="2010_1">February 2010</option>
- <option value="2010_2">March 2010</option>
- <option value="2010_3">April 2010</option>
- <option value="2010_4">May 2010</option>
- <option value="2010_5">June 2010</option>
- <option value="2010_6">July 2010</option>
- <option value="2010_7">August 2010</option>
- <option value="2010_8">September 2010</option>
- <option value="2010_9">October 2010</option>
- <option value="2010_10">November 2010</option>
- <option value="2010_11">December 2010</option>
- </optgroup>
- </select>
- </div>
- </div>
- <table class="ui-datepicker-calendar">
- <thead>
- <tr>
- <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
- <th><span title="Monday">Mo</span></th>
- <th><span title="Tuesday">Tu</span></th>
- <th><span title="Wednesday">We</span></th>
- <th><span title="Thursday">Th</span></th>
- <th><span title="Friday">Fr</span></th>
- <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
- </td><td class=""><a href="#" class="ui-state-default">1</a></td>
- <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
- <td class=""><a href="#" class="ui-state-default">3</a></td>
- <td class=""><a href="#" class="ui-state-default">4</a></td>
- <td class=""><a href="#" class="ui-state-default">5</a></td>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
- </tr>
- <tr>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
- <td class=""><a href="#" class="ui-state-default">8</a></td>
- <td class=""><a href="#" class="ui-state-default">9</a></td>
- <td class=""><a href="#" class="ui-state-default">10</a></td>
- <td class=""><a href="#" class="ui-state-default">11</a></td>
- <td class=""><a href="#" class="ui-state-default">12</a></td>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
- </tr>
- <tr>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
- <td class=""><a href="#" class="ui-state-default">15</a></td>
- <td class=""><a href="#" class="ui-state-default">16</a></td>
- <td class=""><a href="#" class="ui-state-default">17</a></td>
- <td class=""><a href="#" class="ui-state-default">18</a></td>
- <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
- </tr>
- <tr>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
- <td class=""><a href="#" class="ui-state-default">22</a></td>
- <td class=""><a href="#" class="ui-state-default">23</a></td>
- <td class=""><a href="#" class="ui-state-default">24</a></td>
- <td class=""><a href="#" class="ui-state-default">25</a></td>
- <td class=""><a href="#" class="ui-state-default">26</a></td>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
- </tr>
- <tr>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
- <td class=""><a href="#" class="ui-state-default">29</a></td>
- <td class=""><a href="#" class="ui-state-default">30</a></td>
- <td class=""><a href="#" class="ui-state-default">31</a></td>
- <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
- </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
- </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
- </td></tr>
- </tbody>
- </table>
- </div>
--->
-
-<!-- Datepicker with 2 selects
-
-
-
-<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
- <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
- <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
- <a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
- <div class="ui-datepicker-title">
- <select class="ui-datepicker-month">
- <option value="0">Jan</option>
- <option value="1">Feb</option>
- <option value="2">Mar</option>
- <option value="3">Apr</option>
- <option value="4">May</option>
- <option value="5">Jun</option>
- <option value="6">Jul</option>
- <option value="7">Aug</option>
- <option value="8">Sep</option>
- <option value="9">Oct</option>
- <option value="10">Nov</option>
- <option value="11" selected="selected">Dec</option>
- </select>
- <select class="ui-datepicker-year">
- <option value="1998">1998</option>
- <option value="1999">1999</option>
- <option value="2000">2000</option>
- <option value="2001">2001</option>
- <option value="2002">2002</option>
- <option value="2003">2003</option>
- <option value="2004">2004</option>
- <option value="2005">2005</option>
- <option value="2006">2006</option>
- <option value="2007">2007</option>
- <option value="2008" selected="selected">2008</option>
- <option value="2009">2009</option>
- <option value="2010">2010</option>
- <option value="2011">2011</option>
- <option value="2012">2012</option>
- <option value="2013">2013</option>
- <option value="2014">2014</option>
- <option value="2015">2015</option>
- <option value="2016">2016</option>
- <option value="2017">2017</option>
- <option value="2018">2018</option>
- </select>
- </div>
- </div>
- <table class="ui-datepicker-calendar">
- <thead>
- <tr>
- <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
- <th><span title="Monday">Mo</span></th>
- <th><span title="Tuesday">Tu</span></th>
- <th><span title="Wednesday">We</span></th>
- <th><span title="Thursday">Th</span></th>
- <th><span title="Friday">Fr</span></th>
- <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
- </td><td class=""><a href="#" class="ui-state-default">1</a></td>
- <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
- <td class=""><a href="#" class="ui-state-default">3</a></td>
- <td class=""><a href="#" class="ui-state-default">4</a></td>
- <td class=""><a href="#" class="ui-state-default">5</a></td>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
- </tr>
- <tr>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
- <td class=""><a href="#" class="ui-state-default">8</a></td>
- <td class=""><a href="#" class="ui-state-default">9</a></td>
- <td class=""><a href="#" class="ui-state-default">10</a></td>
- <td class=""><a href="#" class="ui-state-default">11</a></td>
- <td class=""><a href="#" class="ui-state-default">12</a></td>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
- </tr>
- <tr>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
- <td class=""><a href="#" class="ui-state-default">15</a></td>
- <td class=""><a href="#" class="ui-state-default">16</a></td>
- <td class=""><a href="#" class="ui-state-default">17</a></td>
- <td class=""><a href="#" class="ui-state-default">18</a></td>
- <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
- </tr>
- <tr>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
- <td class=""><a href="#" class="ui-state-default">22</a></td>
- <td class=""><a href="#" class="ui-state-default">23</a></td>
- <td class=""><a href="#" class="ui-state-default">24</a></td>
- <td class=""><a href="#" class="ui-state-default">25</a></td>
- <td class=""><a href="#" class="ui-state-default">26</a></td>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
- </tr>
- <tr>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
- <td class=""><a href="#" class="ui-state-default">29</a></td>
- <td class=""><a href="#" class="ui-state-default">30</a></td>
- <td class=""><a href="#" class="ui-state-default">31</a></td>
- <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
- </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
- </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
- </td></tr>
- </tbody>
- </table>
- </div>
-
--->
-
-
-<!-- Datepicker with button bar
-
-
-
-<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
- <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
- <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
- <a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
- <div class="ui-datepicker-title">
- <select class="ui-datepicker-month">
- <option value="0">Jan</option>
- <option value="1">Feb</option>
- <option value="2">Mar</option>
- <option value="3">Apr</option>
- <option value="4">May</option>
- <option value="5">Jun</option>
- <option value="6">Jul</option>
- <option value="7">Aug</option>
- <option value="8">Sep</option>
- <option value="9">Oct</option>
- <option value="10">Nov</option>
- <option value="11" selected="selected">Dec</option>
- </select>
- <select class="ui-datepicker-year">
- <option value="1998">1998</option>
- <option value="1999">1999</option>
- <option value="2000">2000</option>
- <option value="2001">2001</option>
- <option value="2002">2002</option>
- <option value="2003">2003</option>
- <option value="2004">2004</option>
- <option value="2005">2005</option>
- <option value="2006">2006</option>
- <option value="2007">2007</option>
- <option value="2008" selected="selected">2008</option>
- <option value="2009">2009</option>
- <option value="2010">2010</option>
- <option value="2011">2011</option>
- <option value="2012">2012</option>
- <option value="2013">2013</option>
- <option value="2014">2014</option>
- <option value="2015">2015</option>
- <option value="2016">2016</option>
- <option value="2017">2017</option>
- <option value="2018">2018</option>
- </select>
- </div>
- </div>
- <table class="ui-datepicker-calendar">
- <thead>
- <tr>
- <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
- <th><span title="Monday">Mo</span></th>
- <th><span title="Tuesday">Tu</span></th>
- <th><span title="Wednesday">We</span></th>
- <th><span title="Thursday">Th</span></th>
- <th><span title="Friday">Fr</span></th>
- <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
- </td><td class=""><a href="#" class="ui-state-default">1</a></td>
- <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
- <td class=""><a href="#" class="ui-state-default">3</a></td>
- <td class=""><a href="#" class="ui-state-default">4</a></td>
- <td class=""><a href="#" class="ui-state-default">5</a></td>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
- </tr>
- <tr>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
- <td class=""><a href="#" class="ui-state-default">8</a></td>
- <td class=""><a href="#" class="ui-state-default">9</a></td>
- <td class=""><a href="#" class="ui-state-default">10</a></td>
- <td class=""><a href="#" class="ui-state-default">11</a></td>
- <td class=""><a href="#" class="ui-state-default">12</a></td>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
- </tr>
- <tr>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
- <td class=""><a href="#" class="ui-state-default">15</a></td>
- <td class=""><a href="#" class="ui-state-default">16</a></td>
- <td class=""><a href="#" class="ui-state-default">17</a></td>
- <td class=""><a href="#" class="ui-state-default">18</a></td>
- <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
- </tr>
- <tr>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
- <td class=""><a href="#" class="ui-state-default">22</a></td>
- <td class=""><a href="#" class="ui-state-default">23</a></td>
- <td class=""><a href="#" class="ui-state-default">24</a></td>
- <td class=""><a href="#" class="ui-state-default">25</a></td>
- <td class=""><a href="#" class="ui-state-default">26</a></td>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
- </tr>
- <tr>
- <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
- <td class=""><a href="#" class="ui-state-default">29</a></td>
- <td class=""><a href="#" class="ui-state-default">30</a></td>
- <td class=""><a href="#" class="ui-state-default">31</a></td>
- <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
- </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
- </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
- </td></tr>
- </tbody>
- </table>
-
- <div class="ui-datepicker-buttonpane ui-widget-content">
- <button class="ui-state-default ui-priority-primary ui-corner-all">Done</button>
- <button class="ui-state-default ui-priority-secondary ui-corner-all">Today</button>
- </div>
- </div>
- -->
-</body>
-</html>
+<!doctype html> +<html> +<head> + <title>jQuery UI Datepicker Static Markup Test Page</title> + <link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css"> +</head> +<body> + +<h1>jQuery UI Datepicker Static Markup Test Page</h1> + +<!-- Datepicker with read only month/year --> + +<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> + <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"> + <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a> + <a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a> + <div class="ui-datepicker-title"> + <span class="ui-datepicker-month">December</span> + <span class="ui-datepicker-year">2008</span> + </div> + </div> + <table class="ui-datepicker-calendar"> + <thead> + <tr> + <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> + <th><span title="Monday">Mo</span></th> + <th><span title="Tuesday">Tu</span></th> + <th><span title="Wednesday">We</span></th> + <th><span title="Thursday">Th</span></th> + <th><span title="Friday">Fr</span></th> + <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> + </tr> + </thead> + <tbody> + <tr> + <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> + </td><td class=""><a href="#" class="ui-state-default">1</a></td> + <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> + <td class=""><a href="#" class="ui-state-default">3</a></td> + <td class=""><a href="#" class="ui-state-default">4</a></td> + <td class=""><a href="#" class="ui-state-default">5</a></td> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> + </tr> + <tr> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> + <td class=""><a href="#" class="ui-state-default">8</a></td> + <td class=""><a href="#" class="ui-state-default">9</a></td> + <td class=""><a href="#" class="ui-state-default">10</a></td> + <td class=""><a href="#" class="ui-state-default">11</a></td> + <td class=""><a href="#" class="ui-state-default">12</a></td> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> + </tr> + <tr> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> + <td class=""><a href="#" class="ui-state-default">15</a></td> + <td class=""><a href="#" class="ui-state-default">16</a></td> + <td class=""><a href="#" class="ui-state-default">17</a></td> + <td class=""><a href="#" class="ui-state-default">18</a></td> + <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> + </tr> + <tr> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> + <td class=""><a href="#" class="ui-state-default">22</a></td> + <td class=""><a href="#" class="ui-state-default">23</a></td> + <td class=""><a href="#" class="ui-state-default">24</a></td> + <td class=""><a href="#" class="ui-state-default">25</a></td> + <td class=""><a href="#" class="ui-state-default">26</a></td> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> + </tr> + <tr> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> + <td class=""><a href="#" class="ui-state-default">29</a></td> + <td class=""><a href="#" class="ui-state-default">30</a></td> + <td class=""><a href="#" class="ui-state-default">31</a></td> + <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> + </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> + </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> + </td></tr> + </tbody> + </table> + </div> + + +<!-- Datepicker with 1 combined select + + + + + + +<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> + <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"> + <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a> + <a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a> + <div class="ui-datepicker-title"> + <select class="ui-datepicker-month-year"> + <optgroup name="2007"> + <option value="2007_0">January 2007</option> + <option value="2007_1">February 2007</option> + <option value="2007_2">March 2007</option> + <option value="2007_3">April 2007</option> + <option value="2007_4">May 2007</option> + <option value="2007_5">June 2007</option> + <option value="2007_6">July 2007</option> + <option value="2007_7">August 2007</option> + <option value="2007_8">September 2007</option> + <option value="2007_9">October 2007</option> + <option value="2007_10">November 2007</option> + <option value="2007_11">December 2007</option> + </optgroup> + <optgroup name="2008"> + <option value="2008_0">January 2008</option> + <option value="2008_1">February 2008</option> + <option value="2008_2">March 2008</option> + <option value="2008_3">April 2008</option> + <option value="2008_4">May 2008</option> + <option value="2008_5">June 2008</option> + <option value="2008_6">July 2008</option> + <option value="2008_7">August 2008</option> + <option value="2008_8">September 2008</option> + <option value="2008_9">October 2008</option> + <option value="2008_10">November 2008</option> + <option selected="selected" value="2008_11">December 2008</option> + </optgroup> + <optgroup name="2009"> + <option value="2009_0">January 2009</option> + <option value="2009_1">February 2009</option> + <option value="2009_2">March 2009</option> + <option value="2009_3">April 2009</option> + <option value="2009_4">May 2009</option> + <option value="2009_5">June 2009</option> + <option value="2009_6">July 2009</option> + <option value="2009_7">August 2009</option> + <option value="2009_8">September 2009</option> + <option value="2009_9">October 2009</option> + <option value="2009_10">November 2009</option> + <option value="2009_11">December 2009</option> + </optgroup> + <optgroup name="2010"> + <option value="2010_0">January 2010</option> + <option value="2010_1">February 2010</option> + <option value="2010_2">March 2010</option> + <option value="2010_3">April 2010</option> + <option value="2010_4">May 2010</option> + <option value="2010_5">June 2010</option> + <option value="2010_6">July 2010</option> + <option value="2010_7">August 2010</option> + <option value="2010_8">September 2010</option> + <option value="2010_9">October 2010</option> + <option value="2010_10">November 2010</option> + <option value="2010_11">December 2010</option> + </optgroup> + </select> + </div> + </div> + <table class="ui-datepicker-calendar"> + <thead> + <tr> + <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> + <th><span title="Monday">Mo</span></th> + <th><span title="Tuesday">Tu</span></th> + <th><span title="Wednesday">We</span></th> + <th><span title="Thursday">Th</span></th> + <th><span title="Friday">Fr</span></th> + <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> + </tr> + </thead> + <tbody> + <tr> + <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> + </td><td class=""><a href="#" class="ui-state-default">1</a></td> + <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> + <td class=""><a href="#" class="ui-state-default">3</a></td> + <td class=""><a href="#" class="ui-state-default">4</a></td> + <td class=""><a href="#" class="ui-state-default">5</a></td> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> + </tr> + <tr> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> + <td class=""><a href="#" class="ui-state-default">8</a></td> + <td class=""><a href="#" class="ui-state-default">9</a></td> + <td class=""><a href="#" class="ui-state-default">10</a></td> + <td class=""><a href="#" class="ui-state-default">11</a></td> + <td class=""><a href="#" class="ui-state-default">12</a></td> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> + </tr> + <tr> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> + <td class=""><a href="#" class="ui-state-default">15</a></td> + <td class=""><a href="#" class="ui-state-default">16</a></td> + <td class=""><a href="#" class="ui-state-default">17</a></td> + <td class=""><a href="#" class="ui-state-default">18</a></td> + <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> + </tr> + <tr> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> + <td class=""><a href="#" class="ui-state-default">22</a></td> + <td class=""><a href="#" class="ui-state-default">23</a></td> + <td class=""><a href="#" class="ui-state-default">24</a></td> + <td class=""><a href="#" class="ui-state-default">25</a></td> + <td class=""><a href="#" class="ui-state-default">26</a></td> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> + </tr> + <tr> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> + <td class=""><a href="#" class="ui-state-default">29</a></td> + <td class=""><a href="#" class="ui-state-default">30</a></td> + <td class=""><a href="#" class="ui-state-default">31</a></td> + <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> + </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> + </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> + </td></tr> + </tbody> + </table> + </div> +--> + +<!-- Datepicker with 2 selects + + + +<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> + <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"> + <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a> + <a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a> + <div class="ui-datepicker-title"> + <select class="ui-datepicker-month"> + <option value="0">Jan</option> + <option value="1">Feb</option> + <option value="2">Mar</option> + <option value="3">Apr</option> + <option value="4">May</option> + <option value="5">Jun</option> + <option value="6">Jul</option> + <option value="7">Aug</option> + <option value="8">Sep</option> + <option value="9">Oct</option> + <option value="10">Nov</option> + <option value="11" selected="selected">Dec</option> + </select> + <select class="ui-datepicker-year"> + <option value="1998">1998</option> + <option value="1999">1999</option> + <option value="2000">2000</option> + <option value="2001">2001</option> + <option value="2002">2002</option> + <option value="2003">2003</option> + <option value="2004">2004</option> + <option value="2005">2005</option> + <option value="2006">2006</option> + <option value="2007">2007</option> + <option value="2008" selected="selected">2008</option> + <option value="2009">2009</option> + <option value="2010">2010</option> + <option value="2011">2011</option> + <option value="2012">2012</option> + <option value="2013">2013</option> + <option value="2014">2014</option> + <option value="2015">2015</option> + <option value="2016">2016</option> + <option value="2017">2017</option> + <option value="2018">2018</option> + </select> + </div> + </div> + <table class="ui-datepicker-calendar"> + <thead> + <tr> + <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> + <th><span title="Monday">Mo</span></th> + <th><span title="Tuesday">Tu</span></th> + <th><span title="Wednesday">We</span></th> + <th><span title="Thursday">Th</span></th> + <th><span title="Friday">Fr</span></th> + <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> + </tr> + </thead> + <tbody> + <tr> + <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> + </td><td class=""><a href="#" class="ui-state-default">1</a></td> + <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> + <td class=""><a href="#" class="ui-state-default">3</a></td> + <td class=""><a href="#" class="ui-state-default">4</a></td> + <td class=""><a href="#" class="ui-state-default">5</a></td> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> + </tr> + <tr> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> + <td class=""><a href="#" class="ui-state-default">8</a></td> + <td class=""><a href="#" class="ui-state-default">9</a></td> + <td class=""><a href="#" class="ui-state-default">10</a></td> + <td class=""><a href="#" class="ui-state-default">11</a></td> + <td class=""><a href="#" class="ui-state-default">12</a></td> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> + </tr> + <tr> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> + <td class=""><a href="#" class="ui-state-default">15</a></td> + <td class=""><a href="#" class="ui-state-default">16</a></td> + <td class=""><a href="#" class="ui-state-default">17</a></td> + <td class=""><a href="#" class="ui-state-default">18</a></td> + <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> + </tr> + <tr> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> + <td class=""><a href="#" class="ui-state-default">22</a></td> + <td class=""><a href="#" class="ui-state-default">23</a></td> + <td class=""><a href="#" class="ui-state-default">24</a></td> + <td class=""><a href="#" class="ui-state-default">25</a></td> + <td class=""><a href="#" class="ui-state-default">26</a></td> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> + </tr> + <tr> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> + <td class=""><a href="#" class="ui-state-default">29</a></td> + <td class=""><a href="#" class="ui-state-default">30</a></td> + <td class=""><a href="#" class="ui-state-default">31</a></td> + <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> + </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> + </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> + </td></tr> + </tbody> + </table> + </div> + +--> + + +<!-- Datepicker with button bar + + + +<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> + <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"> + <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a> + <a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a> + <div class="ui-datepicker-title"> + <select class="ui-datepicker-month"> + <option value="0">Jan</option> + <option value="1">Feb</option> + <option value="2">Mar</option> + <option value="3">Apr</option> + <option value="4">May</option> + <option value="5">Jun</option> + <option value="6">Jul</option> + <option value="7">Aug</option> + <option value="8">Sep</option> + <option value="9">Oct</option> + <option value="10">Nov</option> + <option value="11" selected="selected">Dec</option> + </select> + <select class="ui-datepicker-year"> + <option value="1998">1998</option> + <option value="1999">1999</option> + <option value="2000">2000</option> + <option value="2001">2001</option> + <option value="2002">2002</option> + <option value="2003">2003</option> + <option value="2004">2004</option> + <option value="2005">2005</option> + <option value="2006">2006</option> + <option value="2007">2007</option> + <option value="2008" selected="selected">2008</option> + <option value="2009">2009</option> + <option value="2010">2010</option> + <option value="2011">2011</option> + <option value="2012">2012</option> + <option value="2013">2013</option> + <option value="2014">2014</option> + <option value="2015">2015</option> + <option value="2016">2016</option> + <option value="2017">2017</option> + <option value="2018">2018</option> + </select> + </div> + </div> + <table class="ui-datepicker-calendar"> + <thead> + <tr> + <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> + <th><span title="Monday">Mo</span></th> + <th><span title="Tuesday">Tu</span></th> + <th><span title="Wednesday">We</span></th> + <th><span title="Thursday">Th</span></th> + <th><span title="Friday">Fr</span></th> + <th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th> + </tr> + </thead> + <tbody> + <tr> + <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> + </td><td class=""><a href="#" class="ui-state-default">1</a></td> + <td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td> + <td class=""><a href="#" class="ui-state-default">3</a></td> + <td class=""><a href="#" class="ui-state-default">4</a></td> + <td class=""><a href="#" class="ui-state-default">5</a></td> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td> + </tr> + <tr> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td> + <td class=""><a href="#" class="ui-state-default">8</a></td> + <td class=""><a href="#" class="ui-state-default">9</a></td> + <td class=""><a href="#" class="ui-state-default">10</a></td> + <td class=""><a href="#" class="ui-state-default">11</a></td> + <td class=""><a href="#" class="ui-state-default">12</a></td> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td> + </tr> + <tr> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td> + <td class=""><a href="#" class="ui-state-default">15</a></td> + <td class=""><a href="#" class="ui-state-default">16</a></td> + <td class=""><a href="#" class="ui-state-default">17</a></td> + <td class=""><a href="#" class="ui-state-default">18</a></td> + <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td> + </tr> + <tr> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td> + <td class=""><a href="#" class="ui-state-default">22</a></td> + <td class=""><a href="#" class="ui-state-default">23</a></td> + <td class=""><a href="#" class="ui-state-default">24</a></td> + <td class=""><a href="#" class="ui-state-default">25</a></td> + <td class=""><a href="#" class="ui-state-default">26</a></td> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td> + </tr> + <tr> + <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td> + <td class=""><a href="#" class="ui-state-default">29</a></td> + <td class=""><a href="#" class="ui-state-default">30</a></td> + <td class=""><a href="#" class="ui-state-default">31</a></td> + <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> + </td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> + </td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> + </td></tr> + </tbody> + </table> + + <div class="ui-datepicker-buttonpane ui-widget-content"> + <button class="ui-state-default ui-priority-primary ui-corner-all">Done</button> + <button class="ui-state-default ui-priority-secondary ui-corner-all">Today</button> + </div> + </div> + --> +</body> +</html> diff --git a/tests/static/dialog.html b/tests/static/dialog.html index a87989904..f308a88cf 100644 --- a/tests/static/dialog.html +++ b/tests/static/dialog.html @@ -1,35 +1,35 @@ -<!doctype html>
-<html>
-<head>
- <title>jQuery UI Dialog Static Markup Test Page</title>
- <link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css">
-</head>
-<body>
-
-<h1>jQuery UI Dialog Static Markup Test Page</h1>
-
-<div class="ui-dialog ui-widget ui-widget-content ui-corner-all">
- <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
- <span class="ui-dialog-title">This is my title</span>
- <a href="#" class="ui-dialog-titlebar-close ui-corner-all" title="Close"><span class="ui-icon ui-icon-closethick">Close</span></a>
- </div>
- <div class="ui-dialog-content ui-widget-content" style="height: 13em;">
- <p>I'm in a dialog!</p>
- </div>
- <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
- <button class="ui-state-default ui-priority-primary ui-corner-all">Primary</button>
- <button class="ui-state-default ui-priority-secondary ui-corner-all">Secondary</button>
- <button class="ui-state-default ui-state-disabled ui-corner-all">Disabled</button>
- </div>
- <div class="ui-resizable-n ui-resizable-handle"></div>
- <div class="ui-resizable-s ui-resizable-handle"></div>
- <div class="ui-resizable-e ui-resizable-handle"></div>
- <div class="ui-resizable-w ui-resizable-handle"></div>
- <div class="ui-resizable-ne ui-resizable-handle"></div>
- <div class="ui-resizable-se ui-resizable-handle ui-icon ui-icon-grip-diagonal-se"></div>
- <div class="ui-resizable-sw ui-resizable-handle"></div>
- <div class="ui-resizable-nw ui-resizable-handle"></div>
-</div>
-
-</body>
-</html>
+<!doctype html> +<html> +<head> + <title>jQuery UI Dialog Static Markup Test Page</title> + <link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css"> +</head> +<body> + +<h1>jQuery UI Dialog Static Markup Test Page</h1> + +<div class="ui-dialog ui-widget ui-widget-content ui-corner-all"> + <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> + <span class="ui-dialog-title">This is my title</span> + <a href="#" class="ui-dialog-titlebar-close ui-corner-all" title="Close"><span class="ui-icon ui-icon-closethick">Close</span></a> + </div> + <div class="ui-dialog-content ui-widget-content" style="height: 13em;"> + <p>I'm in a dialog!</p> + </div> + <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> + <button class="ui-state-default ui-priority-primary ui-corner-all">Primary</button> + <button class="ui-state-default ui-priority-secondary ui-corner-all">Secondary</button> + <button class="ui-state-default ui-state-disabled ui-corner-all">Disabled</button> + </div> + <div class="ui-resizable-n ui-resizable-handle"></div> + <div class="ui-resizable-s ui-resizable-handle"></div> + <div class="ui-resizable-e ui-resizable-handle"></div> + <div class="ui-resizable-w ui-resizable-handle"></div> + <div class="ui-resizable-ne ui-resizable-handle"></div> + <div class="ui-resizable-se ui-resizable-handle ui-icon ui-icon-grip-diagonal-se"></div> + <div class="ui-resizable-sw ui-resizable-handle"></div> + <div class="ui-resizable-nw ui-resizable-handle"></div> +</div> + +</body> +</html> diff --git a/tests/static/progressbar.html b/tests/static/progressbar.html index 02556b66f..7844cd563 100644 --- a/tests/static/progressbar.html +++ b/tests/static/progressbar.html @@ -1,17 +1,17 @@ -<!doctype html>
-<html>
-<head>
- <title>jQuery UI Progressbar Static Markup Test Page</title>
- <link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css">
-</head>
-<body>
-
-<h1>jQuery UI Progressbar Static Markup Test Page</h1>
-
-<div class="ui-progressbar ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="13">
- <div class="ui-progressbar-label">13% Completed</div>
- <div class="ui-progressbar-value ui-state-default ui-corner-left" style="width: 13%;"><span class="ui-progressbar-label">13% Completed</span></div>
-</div>
-
-</body>
-</html>
+<!doctype html> +<html> +<head> + <title>jQuery UI Progressbar Static Markup Test Page</title> + <link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css"> +</head> +<body> + +<h1>jQuery UI Progressbar Static Markup Test Page</h1> + +<div class="ui-progressbar ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="13"> + <div class="ui-progressbar-label">13% Completed</div> + <div class="ui-progressbar-value ui-state-default ui-corner-left" style="width: 13%;"><span class="ui-progressbar-label">13% Completed</span></div> +</div> + +</body> +</html> diff --git a/tests/static/slider.html b/tests/static/slider.html index 9ef1e9353..d89a92e1d 100644 --- a/tests/static/slider.html +++ b/tests/static/slider.html @@ -1,29 +1,29 @@ -<!doctype html>
-<html>
-<head>
- <title>jQuery UI Slider Static Markup Test Page</title>
- <link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css">
-</head>
-<body>
-
-<h1>jQuery UI Slider Static Markup Test Page</h1>
-
-<div class="ui-slider ui-widget ui-widget-content ui-corner-all">
- <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 15%;"></a>
- <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 30%;"></a>
- <div class="ui-slider-range ui-state-default" style="position: absolute; left: 15%; width: 15%;"/>
-</div>
-
-
- <!-- vertical
-
-
-<div class="ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all" style="height: 100px;">
- <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="top: 15%;"></a>
- <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="top: 60%;"></a>
- <div class="ui-slider-range ui-state-default" style="position: absolute; top: 15%; height: 45%;"/>
-</div>
--->
-
-</body>
-</html>
+<!doctype html> +<html> +<head> + <title>jQuery UI Slider Static Markup Test Page</title> + <link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css"> +</head> +<body> + +<h1>jQuery UI Slider Static Markup Test Page</h1> + +<div class="ui-slider ui-widget ui-widget-content ui-corner-all"> + <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 15%;"></a> + <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 30%;"></a> + <div class="ui-slider-range ui-state-default" style="position: absolute; left: 15%; width: 15%;"/> +</div> + + + <!-- vertical + + +<div class="ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all" style="height: 100px;"> + <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="top: 15%;"></a> + <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="top: 60%;"></a> + <div class="ui-slider-range ui-state-default" style="position: absolute; top: 15%; height: 45%;"/> +</div> +--> + +</body> +</html> diff --git a/tests/static/tabs.html b/tests/static/tabs.html index bb88fe4b9..caf1d44ef 100644 --- a/tests/static/tabs.html +++ b/tests/static/tabs.html @@ -1,30 +1,30 @@ -<!doctype html>
-<html>
-<head>
- <title>jQuery UI Tabs Static Markup Test Page</title>
- <link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css">
-</head>
-<body>
-
-<h1>jQuery UI Tabs Static Markup Test Page</h1>
-
-<div class="ui-tabs ui-widget">
- <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-top">
- <li class="ui-tabs-selected ui-state-active ui-corner-top"><a href="#fragment-1">First Section</a></li>
- <li class="ui-state-default ui-corner-top"><a href="#fragment-2">Second Section</span></a></li>
- <li class="ui-state-default ui-corner-top"><a href="#fragment-3">Third Section</a></li>
- <!-- disabled tab <li class="ui-state-default ui-state-disabled ui-corner-top"><a href="#fragment-3">Disabled Section</a></li>-->
- </ul>
- <div id="fragment-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- </div>
- <div id="fragment-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </div>
- <div id="fragment-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </div>
-</div>
-
-</body>
-</html>
+<!doctype html> +<html> +<head> + <title>jQuery UI Tabs Static Markup Test Page</title> + <link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css"> +</head> +<body> + +<h1>jQuery UI Tabs Static Markup Test Page</h1> + +<div class="ui-tabs ui-widget"> + <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-top"> + <li class="ui-tabs-selected ui-state-active ui-corner-top"><a href="#fragment-1">First Section</a></li> + <li class="ui-state-default ui-corner-top"><a href="#fragment-2">Second Section</span></a></li> + <li class="ui-state-default ui-corner-top"><a href="#fragment-3">Third Section</a></li> + <!-- disabled tab <li class="ui-state-default ui-state-disabled ui-corner-top"><a href="#fragment-3">Disabled Section</a></li>--> + </ul> + <div id="fragment-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + </div> + <div id="fragment-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + </div> + <div id="fragment-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + </div> +</div> + +</body> +</html> diff --git a/tests/testsuite.css b/tests/testsuite.css index b511c67ce..b278cc6d9 100644 --- a/tests/testsuite.css +++ b/tests/testsuite.css @@ -1,4 +1,4 @@ -@import url("qunit/testsuite.css");
-html { border: 0; }
-.xerror, .error, .ui-tabs-hide { display: none }
-#main { position: absolute; top: -10000px; left: -10000px; }
+@import url("qunit/testsuite.css"); +html { border: 0; } +.xerror, .error, .ui-tabs-hide { display: none } +#main { position: absolute; top: -10000px; left: -10000px; } diff --git a/tests/testsuite.js b/tests/testsuite.js index 5ae100a7d..2ad60cbab 100644 --- a/tests/testsuite.js +++ b/tests/testsuite.js @@ -1,10 +1,10 @@ -$(function() {
-
-$('body').prepend(
- '<h1 id="header">' + document.title + '</h1>' +
- '<h2 id="banner"></h2>' +
- '<h2 id="userAgent"></h2>' +
- '<ol id="tests"></ol>'
-);
-
-});
+$(function() { + +$('body').prepend( + '<h1 id="header">' + document.title + '</h1>' + + '<h2 id="banner"></h2>' + + '<h2 id="userAgent"></h2>' + + '<ol id="tests"></ol>' +); + +}); diff --git a/tests/visual/draggable.scroll.html b/tests/visual/draggable.scroll.html index 90ec32521..08ecfa2f5 100644 --- a/tests/visual/draggable.scroll.html +++ b/tests/visual/draggable.scroll.html @@ -1,158 +1,158 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-<head>
-<script src="../../jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../ui/ui.core.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../ui/ui.draggable.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../ui/ui.sortable.js" type="text/javascript" charset="utf-8"></script>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-<title>jQuery UI Draggable Visual Test</title>
-</head>
-
-<body>
-
-<style>
-
- .draggable {
- width:100px;
- height:100px;
- background-color:green;
- color: #fff;
- padding: 5px;
- margin: 5px;
- border: 5px solid red;
- }
-
- .container {
- width: 500px;
- height: 200px;
- border: 5px solid black;
- padding: 5px;
- margin: 5px;
- float: left;
- background: #fff;
- }
-
- .enlarge {
- width: 1000px;
- height: 1000px;
- }
-
-
-</style>
-
-
-
-<script language="JavaScript">
-<!--
- $(function(){
- $(".draggable").draggable({
- //helper: 'clone',
- drag: function(e, ui) {
- //console.log(ui.helper.offset());
- },
- scroll:true
- //containment:"parent"
- });
- });
-//-->
-</script>
-
-
-
-<div class='container' style="overflow:scroll;">
- <div class='draggable'>(Broken in IE)</div>
- <div class='enlarge'></div>
-</div>
-
-<div class='container' style="overflow:scroll; position: relative;">
- <div class='draggable'></div>
- <div class='enlarge'></div>
-</div>
-
-<div class='container' style="overflow:scroll;">
- <div class='draggable' style='position: absolute;top:0px;left:1000px;'>Absolute</div>
- <div class='enlarge'></div>
-</div>
-
-<div class='container' style="overflow:scroll; position: relative;">
- <div class='draggable' style='position: absolute;'>Absolute</div>
- <div class='enlarge'></div>
-</div>
-
-<div class='container' style="overflow:scroll;">
- <div class='draggable' style='position: fixed;'>Fixed</div>
- <div class='enlarge'></div>
-</div>
-
-<div class='container' style="overflow:scroll; position: relative;">
- <div class='draggable' style='position: fixed;'>Fixed</div>
- <div class='enlarge'></div>
-</div>
-
-<!-- Relative draggable with two containers -->
-
-<div class='container' style="overflow:scroll; position: relative;">
- <div class='container'>
- <div class='draggable'>Relative</div>
- <div class='enlarge'></div>
- </div>
-
-</div>
-
-<div class='container' style="overflow:scroll; position: relative;">
- <div class='container' style='position: relative;'>
- <div class='draggable'>Relative</div>
- <div class='enlarge'></div>
- </div>
-</div>
-
-<div class='container' style="position: relative;">
- <div class='container' style='overflow: scroll;'>
- <div class='draggable'>Relative (Broken in IE)</div>
- <div class='enlarge'></div>
- </div>
-
-</div>
-
-<div class='container' style="position: relative;">
- <div class='container' style='position: relative; overflow: scroll;'>
- <div class='draggable'>Relative</div>
- <div class='enlarge'></div>
- </div>
-</div>
-
-<!-- Absolute draggable with two containers -->
-
-<div class='container' style="overflow:scroll; position: relative;">
- <div class='container'>
- <div class='draggable' style='position: absolute;'>Absolute</div>
- <div class='enlarge'></div>
- </div>
-
-</div>
-
-<div class='container' style="overflow:scroll; position: relative;">
- <div class='container' style='position: relative;'>
- <div class='draggable' style='position: absolute;'>Absolute</div>
- <div class='enlarge'></div>
- </div>
-</div>
-
-<div class='container' style="position: relative;">
- <div class='container' style='overflow: scroll;'>
- <div class='draggable' style='position: absolute;top:0px;left:0px;'>Absolute</div>
- <div class='enlarge'></div>
- </div>
-
-</div>
-
-<div class='container' style="position: relative;">
- <div class='container' style='position: relative; overflow: scroll;'>
- <div class='draggable' style='position: absolute;'>Absolute</div>
- <div class='enlarge'></div>
- </div>
-</div>
-
-</body>
-</html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head> +<script src="../../jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script> +<script src="../../ui/ui.core.js" type="text/javascript" charset="utf-8"></script> +<script src="../../ui/ui.draggable.js" type="text/javascript" charset="utf-8"></script> +<script src="../../ui/ui.sortable.js" type="text/javascript" charset="utf-8"></script> +<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> +<title>jQuery UI Draggable Visual Test</title> +</head> + +<body> + +<style> + + .draggable { + width:100px; + height:100px; + background-color:green; + color: #fff; + padding: 5px; + margin: 5px; + border: 5px solid red; + } + + .container { + width: 500px; + height: 200px; + border: 5px solid black; + padding: 5px; + margin: 5px; + float: left; + background: #fff; + } + + .enlarge { + width: 1000px; + height: 1000px; + } + + +</style> + + + +<script language="JavaScript"> +<!-- + $(function(){ + $(".draggable").draggable({ + //helper: 'clone', + drag: function(e, ui) { + //console.log(ui.helper.offset()); + }, + scroll:true + //containment:"parent" + }); + }); +//--> +</script> + + + +<div class='container' style="overflow:scroll;"> + <div class='draggable'>(Broken in IE)</div> + <div class='enlarge'></div> +</div> + +<div class='container' style="overflow:scroll; position: relative;"> + <div class='draggable'></div> + <div class='enlarge'></div> +</div> + +<div class='container' style="overflow:scroll;"> + <div class='draggable' style='position: absolute;top:0px;left:1000px;'>Absolute</div> + <div class='enlarge'></div> +</div> + +<div class='container' style="overflow:scroll; position: relative;"> + <div class='draggable' style='position: absolute;'>Absolute</div> + <div class='enlarge'></div> +</div> + +<div class='container' style="overflow:scroll;"> + <div class='draggable' style='position: fixed;'>Fixed</div> + <div class='enlarge'></div> +</div> + +<div class='container' style="overflow:scroll; position: relative;"> + <div class='draggable' style='position: fixed;'>Fixed</div> + <div class='enlarge'></div> +</div> + +<!-- Relative draggable with two containers --> + +<div class='container' style="overflow:scroll; position: relative;"> + <div class='container'> + <div class='draggable'>Relative</div> + <div class='enlarge'></div> + </div> + +</div> + +<div class='container' style="overflow:scroll; position: relative;"> + <div class='container' style='position: relative;'> + <div class='draggable'>Relative</div> + <div class='enlarge'></div> + </div> +</div> + +<div class='container' style="position: relative;"> + <div class='container' style='overflow: scroll;'> + <div class='draggable'>Relative (Broken in IE)</div> + <div class='enlarge'></div> + </div> + +</div> + +<div class='container' style="position: relative;"> + <div class='container' style='position: relative; overflow: scroll;'> + <div class='draggable'>Relative</div> + <div class='enlarge'></div> + </div> +</div> + +<!-- Absolute draggable with two containers --> + +<div class='container' style="overflow:scroll; position: relative;"> + <div class='container'> + <div class='draggable' style='position: absolute;'>Absolute</div> + <div class='enlarge'></div> + </div> + +</div> + +<div class='container' style="overflow:scroll; position: relative;"> + <div class='container' style='position: relative;'> + <div class='draggable' style='position: absolute;'>Absolute</div> + <div class='enlarge'></div> + </div> +</div> + +<div class='container' style="position: relative;"> + <div class='container' style='overflow: scroll;'> + <div class='draggable' style='position: absolute;top:0px;left:0px;'>Absolute</div> + <div class='enlarge'></div> + </div> + +</div> + +<div class='container' style="position: relative;"> + <div class='container' style='position: relative; overflow: scroll;'> + <div class='draggable' style='position: absolute;'>Absolute</div> + <div class='enlarge'></div> + </div> +</div> + +</body> +</html> |