diff options
Diffstat (limited to 'tests')
73 files changed, 1045 insertions, 4456 deletions
diff --git a/tests/index.css b/tests/index.css new file mode 100644 index 000000000..2034cfba5 --- /dev/null +++ b/tests/index.css @@ -0,0 +1,21 @@ +body { + font-size: 62.5%; +} +.ui-widget-header { + padding: 0.2em 0.5em; + margin: 0; +} +.ui-widget-content { + padding: 1em; + margin-bottom: 1em; +} +p { + margin: 0; +} +ul { + margin: 0; + list-style: none; +} +li { + line-height: 2em; +} diff --git a/tests/index.html b/tests/index.html index 3c66bf38f..d5e364ad6 100644 --- a/tests/index.html +++ b/tests/index.html @@ -1,22 +1,33 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Tests</title> - <link rel="stylesheet" href="../themes/base/jquery.ui.all.css" type="text/css" /> - <script type="text/javascript" src="../jquery-1.7.2.js"></script> - <link rel="stylesheet" href="tests.css" type="text/css" /> - <script type="text/javascript" src="tests.js"></script> + <link rel="stylesheet" href="../../themes/base/jquery.ui.core.css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.theme.css"> + <link rel="stylesheet" href="index.css"> + <script src="jquery-1.7.2.js"></script> + <script src="index.js"></script> </head> <body> -<h1>jQuery UI Tests</h1> +<div id="main"> + <h1>jQuery UI Tests</h1> + <div> + <h2>Unit Tests</h2> + <p><a href="unit/index.html">Unit tests</a> exist for all functionality in jQuery UI. + The unit tests can be run locally (some tests require a web server with PHP) + to ensure proper functionality before committing changes. + The unit tests are also run on <a href="http://swarm.jquery.com/user/jqueryui">TestSwarm</a> + for every commit.</p> -<h2><a href="static/index.html">Static Tests</a></h2> - -<h2><a href="unit/index.html">Unit Tests</a></h2> - -<h2><a href="visual/index.html">Visual Tests</a></h2> + <h2>Visual Tests</h2> + <p><a href="visual/index.html">Visual tests</a> only exist in cases where we can't verify proper functionality + with unit tests. These may be either purely visual or just hard to automate. + Most visual tests will provide a description of what is happening on the page + and what to look for.</p> + </div> +</div> </body> </html> diff --git a/tests/index.js b/tests/index.js new file mode 100644 index 000000000..26c07498f --- /dev/null +++ b/tests/index.js @@ -0,0 +1,10 @@ +$(function() { + +$( "#main" ) + .addClass( "ui-widget" ) + .find( "h1, h2" ) + .addClass( "ui-widget-header ui-corner-top" ) + .next() + .addClass( "ui-widget-content ui-corner-bottom" ); + +}); diff --git a/tests/static/button/default.html b/tests/static/button/default.html deleted file mode 100644 index 3322a7b00..000000000 --- a/tests/static/button/default.html +++ /dev/null @@ -1,161 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Button Static Test : Default</title> - <link rel="stylesheet" href="../static.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../static.js"></script> - <style> - div { margin: 0 0 1em; } - h2 { margin: 2em 0 1em; } - </style> -</head> -<body> - - <h2>Using button elements</h2> - - <div> - <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-text">Button</span> - </button> - - <button class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Primary icon</span> - </button> - - <button class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button"> - <span class="ui-button-text">Secondary icon</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </button> - - <button class="ui-button ui-button-text-icon-primary ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Primary icon</span> - </button> - - <button class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-text">Secondary icon</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </button> - - <button class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Both icons</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </button> - - <button class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">No text</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </button> - </div> - - <h2>Using anchor elements</h2> - - <div> - <a href="#" class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-text">Button</span> - </a> - - <a href="#" class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Primary icon</span> - </a> - - <a href="#" class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button"> - <span class="ui-button-text">Secondary icon</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </a> - - <a href="#" class="ui-button ui-button-text-icon-primary ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Primary icon</span> - </a> - - <a href="#" class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-text">Secondary icon</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </a> - - <a href="#" class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Both icons</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </a> - - <a href="#" class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">No text</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </a> - </div> - - - - <h2>Using label elements (used when proxying to radio or check inputs)</h2> - - <div> - <label class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-text">Button</span> - </label> - - <label class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Primary icon</span> - </label> - - <label class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all" title="Button"> - <span class="ui-button-text">Secondary icon</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </label> - - <label class="ui-button ui-button-text-icon-primary ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Primary icon</span> - </label> - - <label class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-text">Secondary icon</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </label> - - <label class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">Both icons</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </label> - - <label class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all"> - <span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> - <span class="ui-button-text">No text</span> - <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span> - </label> - </div> - - - <h2>Button Sets</h2> - - <div class="ui-buttonset"> - <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-left"><span class="ui-button-text">First</span></button> - <button class="ui-button ui-button-text-only ui-widget ui-state-default"><span class="ui-button-text">Middle</span></button> - <button class="ui-button ui-button-text-only ui-widget ui-state-default"><span class="ui-button-text">Middle</span></button> - <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-right"><span class="ui-button-text">Last</span></button> - </div> - - - -<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> -<script> - $('<div/>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); -</script> -</body> -</html> diff --git a/tests/static/datepicker/datepicker.html b/tests/static/datepicker/datepicker.html deleted file mode 100644 index 857677cfd..000000000 --- a/tests/static/datepicker/datepicker.html +++ /dev/null @@ -1,1367 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>jQuery UI Datepicker Static Markup Test Page</title> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../static.js"></script> - <style type="text/css"> - .ui-datepicker { float:left; margin: 0 2em 2em 0;} - .ui-datepicker-multi { clear:left; } - </style> - <!--[if gte IE 7]> - <style type="text/css"> - .ui-datepicker { float:none; } - </style> - <![endif]--> -</head> -<body style="font-size: 62.5%;"> - -<!-- 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 label="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 label="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 label="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 label="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-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button> - </div> -</div> - -<!-- Multiple Datepickers with read only month/year --> -<div class="ui-datepicker ui-datepicker-multi ui-datepicker-multi-2 ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="width:34em;"> - <div class="ui-datepicker-group ui-datepicker-group-first"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-left"> - <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</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> - <div class="ui-datepicker-group ui-datepicker-group-last"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right"> - <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">January</span> - <span class="ui-datepicker-year">2009</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> -</div> - -<!-- Multiple Datepickers with read only month/year --> -<div class="ui-datepicker ui-datepicker-multi ui-datepicker-multi-3 ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="width:51em;"> - <div class="ui-datepicker-group ui-datepicker-group-first"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-left"> - <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</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> - <div class="ui-datepicker-group ui-datepicker-group-middle"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix"> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">January</span> - <span class="ui-datepicker-year">2009</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> - <div class="ui-datepicker-group ui-datepicker-group-last"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right"> - <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">February</span> - <span class="ui-datepicker-year">2009</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> - <div class="ui-datepicker-buttonpane ui-widget-content"> - <button class="ui-state-default ui-priority-primary ui-corner-all">Done</button> - <button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button> - </div> -</div> - -<!-- Multiple Datepickers with read only month/year --> -<div class="ui-datepicker ui-datepicker-multi ui-datepicker-multi-4 ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="width:60em;"> - <div class="ui-datepicker-group ui-datepicker-group-first"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-left"> - <a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</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> - <div class="ui-datepicker-group ui-datepicker-group-middle"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix"> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">January</span> - <span class="ui-datepicker-year">2009</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="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-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-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">1</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">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=""><a href="#" class="ui-state-default">6</a></td> - <td class=""><a href="#" class="ui-state-default">7</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">8</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><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=""><a href="#" class="ui-state-default">13</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">14</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">15</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><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=""><a href="#" class="ui-state-default">19</a></td> - <td class=""><a href="#" class="ui-state-default">20</a></td> - <td class=""><a href="#" class="ui-state-default">21</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">22</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><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=""><a href="#" class="ui-state-default">27</a></td> - <td class=""><a href="#" class="ui-state-default">28</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">29</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><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-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> - <div class="ui-datepicker-group ui-datepicker-group-middle"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix"> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">February</span> - <span class="ui-datepicker-year">2009</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> - <div class="ui-datepicker-group ui-datepicker-group-last"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right"> - <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">March</span> - <span class="ui-datepicker-year">2009</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> - - <div class="ui-datepicker-row-break"></div> - <div class="ui-datepicker-group ui-datepicker-group-first"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix"> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">April</span> - <span class="ui-datepicker-year">2009</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> - <div class="ui-datepicker-group ui-datepicker-group-middle"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix"> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">May</span> - <span class="ui-datepicker-year">2009</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> - <div class="ui-datepicker-group ui-datepicker-group-middle"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix"> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">June</span> - <span class="ui-datepicker-year">2009</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> - <div class="ui-datepicker-group ui-datepicker-group-last"> - <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right"> - <div class="ui-datepicker-title"> - <span class="ui-datepicker-month">July</span> - <span class="ui-datepicker-year">2009</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="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-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-other-month ui-datepicker-unselectable ui-state-disabled"></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">1</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">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=""><a href="#" class="ui-state-default">6</a></td> - <td class=""><a href="#" class="ui-state-default">7</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">8</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><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=""><a href="#" class="ui-state-default">13</a></td> - <td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">14</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">15</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><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=""><a href="#" class="ui-state-default">19</a></td> - <td class=""><a href="#" class="ui-state-default">20</a></td> - <td class=""><a href="#" class="ui-state-default">21</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">22</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><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=""><a href="#" class="ui-state-default">27</a></td> - <td class=""><a href="#" class="ui-state-default">28</a></td> - <td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">29</a></td> - </tr> - <tr> - <td class="ui-datepicker-week-end"><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-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> -</div> - -</body> -</html> diff --git a/tests/static/datepicker/default.html b/tests/static/datepicker/default.html deleted file mode 100644 index 5baebaf4c..000000000 --- a/tests/static/datepicker/default.html +++ /dev/null @@ -1,86 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Datepicker Static Test : Default</title> - <link rel="stylesheet" href="../static.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../static.js"></script> -</head> -<body> - -<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> - -</body> -</html> diff --git a/tests/static/icons.html b/tests/static/icons.html deleted file mode 100644 index d3ae3e348..000000000 --- a/tests/static/icons.html +++ /dev/null @@ -1,314 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>jQuery UI CSS Framework Icons Test Page</title> - <link rel="stylesheet" href="../../themes/base/jquery.ui.base.css" type="text/css" /> - <link rel="stylesheet" href="../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../jquery-1.7.2.js"></script> - - <style type="text/css"> - body {font-size: 62.5%; margin: 20px; font-family: Verdana, sans-serif; color: #444;} - h1 {font-size: 1.5em; margin: 1em 0;} - h2 {font-size: 1.3em; margin: 2em 0 .5em;} - h2 a {font-size: .8em;} - p {font-size: 1.2em; } - ul {margin: 0; padding: 0;} - td div {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} - span.ui-icon { float: left; margin: 0 4px;} - .icon-collection { border-spacing: 0; border-collapse: collapse; } - </style> - - <script type="text/javascript"> - $(function(){ - $('.ui-state-default').hover( - function(){ $(this).addClass('ui-state-hover'); }, - function(){ $(this).removeClass('ui-state-hover'); } - ); - - $('.ui-state-default').click(function(){ - $(this).toggleClass('ui-state-active'); - }); - - }); - </script> -</head> -<body> - -<p class="icons"></p> - -<table class="ui-widget icon-collection"> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></div></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></div></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></div></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></div></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></div></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></div></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></div></td> - <td><div class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></div></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> -</table> - -</body> -</html> diff --git a/tests/static/static.css b/tests/static/static.css deleted file mode 100644 index 60f25b59a..000000000 --- a/tests/static/static.css +++ /dev/null @@ -1 +0,0 @@ -body { font-size: 62.5%; } diff --git a/tests/static/static.js b/tests/static/static.js deleted file mode 100644 index 1c29079ef..000000000 --- a/tests/static/static.js +++ /dev/null @@ -1,9 +0,0 @@ -/* static_helpers.js - */ -$(function(){ - //add hover states on the static widgets - $('.ui-state-default:not(.ui-state-disabled, .ui-slider-range, .ui-progressbar-value), a.ui-datepicker-next, a.ui-datepicker-prev, .ui-dialog-titlebar-close').hover( - function(){ $(this).addClass('ui-state-hover'); }, - function(){ $(this).removeClass('ui-state-hover'); } - ); -}); diff --git a/tests/unit/autocomplete/autocomplete_common.js b/tests/unit/autocomplete/autocomplete_common.js index c090ce4df..e1d24ef8d 100644 --- a/tests/unit/autocomplete/autocomplete_common.js +++ b/tests/unit/autocomplete/autocomplete_common.js @@ -4,6 +4,10 @@ TestHelpers.commonWidgetTests( "autocomplete", { autoFocus: false, delay: 300, disabled: false, + messages: { + noResults: "No search results.", + results: $.ui.autocomplete.prototype.options.messages.results + }, minLength: 1, position: { my: "left top", diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js index daeea0972..f0ad36a57 100644 --- a/tests/unit/autocomplete/autocomplete_core.js +++ b/tests/unit/autocomplete/autocomplete_core.js @@ -152,4 +152,41 @@ asyncTest( "handle race condition", function() { } }); +test( "ARIA", function() { + expect( 7 ); + var element = $( "#autocomplete" ).autocomplete({ + source: [ "java", "javascript" ] + }), + liveRegion = element.data( "ui-autocomplete" ).liveRegion; + + equal( liveRegion.text(), "", "Empty live region on create" ); + + element.autocomplete( "search", "j" ); + equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.", + "Live region for multiple values" ); + + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.", + "Live region not changed on focus" ); + + element.one( "autocompletefocus", function( event ) { + event.preventDefault(); + }); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( liveRegion.text(), "javascript", + "Live region updated when default focus is prevented" ); + + element.autocomplete( "search", "javas" ); + equal( liveRegion.text(), "1 result is available, use up and down arrow keys to navigate.", + "Live region for one value" ); + + element.autocomplete( "search", "z" ); + equal( liveRegion.text(), "No search results.", + "Live region for no values" ); + + element.autocomplete( "search", "j" ); + equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.", + "Live region for multiple values" ); +}); + }( jQuery ) ); diff --git a/tests/unit/button/button_core.js b/tests/unit/button/button_core.js index 0d93ecedf..c274a8473 100644 --- a/tests/unit/button/button_core.js +++ b/tests/unit/button/button_core.js @@ -34,7 +34,7 @@ function assert(noForm, form1, form2) { } test("radio groups", function() { - $(":radio").button(); + $("input[type=radio]").button(); assert(":eq(0)", ":eq(1)", ":eq(2)"); // click outside of forms @@ -61,7 +61,7 @@ test("buttonset", function() { var set = $("#radio1").buttonset(); ok( set.is(".ui-buttonset") ); deepEqual( set.children(".ui-button").length, 3 ); - deepEqual( set.children("input:radio.ui-helper-hidden-accessible").length, 3 ); + deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 ); ok( set.children("label:eq(0)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") ); ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") ); ok( set.children("label:eq(2)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") ); @@ -76,7 +76,7 @@ test("buttonset (rtl)", function() { set = $("#radio1").buttonset(); ok( set.is(".ui-buttonset") ); deepEqual( set.children(".ui-button").length, 3 ); - deepEqual( set.children("input:radio.ui-helper-hidden-accessible").length, 3 ); + deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 ); ok( set.children("label:eq(0)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") ); ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") ); ok( set.children("label:eq(2)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") ); diff --git a/tests/unit/button/button_options.js b/tests/unit/button/button_options.js index 9ef4a19db..3dd361ac9 100644 --- a/tests/unit/button/button_options.js +++ b/tests/unit/button/button_options.js @@ -53,6 +53,7 @@ test("text false with icon", function() { test("label, default", function() { $("#button").button(); deepEqual( $("#button").text(), "Label" ); + deepEqual( $( "#button").button( "option", "label" ), "Label" ); $("#button").button("destroy"); }); @@ -62,12 +63,14 @@ test("label", function() { label: "xxx" }); deepEqual( $("#button").text(), "xxx" ); + deepEqual( $("#button").button( "option", "label" ), "xxx" ); $("#button").button("destroy"); }); test("label default with input type submit", function() { deepEqual( $("#submit").button().val(), "Label" ); + deepEqual( $("#submit").button( "option", "label" ), "Label" ); }); test("label with input type submit", function() { @@ -75,6 +78,7 @@ test("label with input type submit", function() { label: "xxx" }).val(); deepEqual( label, "xxx" ); + deepEqual( $("#submit").button( "option", "label" ), "xxx" ); }); test("icons", function() { diff --git a/tests/unit/button/button_tickets.js b/tests/unit/button/button_tickets.js index 624d16716..fe0d82fd6 100644 --- a/tests/unit/button/button_tickets.js +++ b/tests/unit/button/button_tickets.js @@ -7,7 +7,7 @@ module( "button: tickets" ); test( "#5946 - buttonset should ignore buttons that are not :visible", function() { $( "#radio01" ).next().andSelf().hide(); - var set = $( "#radio0" ).buttonset({ items: ":radio:visible" }); + var set = $( "#radio0" ).buttonset({ items: "input[type=radio]:visible" }); ok( set.find( "label:eq(0)" ).is( ":not(.ui-button):not(.ui-corner-left)" ) ); ok( set.find( "label:eq(1)" ).is( ".ui-button.ui-corner-left" ) ); }); @@ -30,23 +30,23 @@ test( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard test( "#7092 - button creation that requires a matching label does not find label in all cases", function() { var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" ); - group.find( "input:checkbox" ).button(); + group.find( "input[type=checkbox]" ).button(); ok( group.find( "label" ).is( ".ui-button" ) ); group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" ); - group.filter( "input:checkbox" ).button(); + group.filter( "input[type=checkbox]" ).button(); ok( group.filter( "label" ).is( ".ui-button" ) ); group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" ); - group.find( "input:checkbox" ).button(); + group.find( "input[type=checkbox]" ).button(); ok( group.filter( "label" ).is( ".ui-button" ) ); group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" ); - group.find( "input:checkbox" ).button(); + group.find( "input[type=checkbox]" ).button(); ok( group.find( "label" ).is( ".ui-button" ) ); group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" ); - group.filter( "input:checkbox" ).button(); + group.filter( "input[type=checkbox]" ).button(); ok( group.find( "label" ).is( ".ui-button" ) ); }); diff --git a/tests/unit/draggable/draggable_common.js b/tests/unit/draggable/draggable_common.js index b47b139cd..64f8ce4a3 100644 --- a/tests/unit/draggable/draggable_common.js +++ b/tests/unit/draggable/draggable_common.js @@ -3,7 +3,7 @@ TestHelpers.commonWidgetTests( "draggable", { addClasses: true, appendTo: "parent", axis: false, - cancel: ":input,option", + cancel: "input,textarea,button,select,option", connectToSortable: false, containment: false, cursor: "auto", diff --git a/tests/unit/draggable/draggable_events.js b/tests/unit/draggable/draggable_events.js index 85ba824d8..2b2104ed4 100644 --- a/tests/unit/draggable/draggable_events.js +++ b/tests/unit/draggable/draggable_events.js @@ -5,7 +5,7 @@ module("draggable: events"); -test("callbacks occurance count", function() { +test("callbacks occurrence count", function() { expect(3); diff --git a/tests/unit/draggable/draggable_options.js b/tests/unit/draggable/draggable_options.js index 464e025dd..ea4611d69 100644 --- a/tests/unit/draggable/draggable_options.js +++ b/tests/unit/draggable/draggable_options.js @@ -106,15 +106,15 @@ test("{ axis: ? }, unexpected", function() { }); }); -test("{ cancel: ':input,option' }, default", function() { +test("{ cancel: 'input,textarea,button,select,option' }, default", function() { $('<div id="draggable-option-cancel-default"><input type="text"></div>').appendTo('#main'); - el = $("#draggable-option-cancel-default").draggable({ cancel: ":input,option" }); + el = $("#draggable-option-cancel-default").draggable({ cancel: "input,textarea,button,select,option" }); drag("#draggable-option-cancel-default", 50, 50); moved(50, 50); - el = $("#draggable-option-cancel-default").draggable({ cancel: ":input,option" }); - drag("#draggable-option-cancel-default :input", 50, 50); + el = $("#draggable-option-cancel-default").draggable({ cancel: "input,textarea,button,select,option" }); + drag("#draggable-option-cancel-default input", 50, 50); moved(0, 0); el.draggable("destroy"); diff --git a/tests/unit/index.html b/tests/unit/index.html index b73ede29c..33a326370 100644 --- a/tests/unit/index.html +++ b/tests/unit/index.html @@ -6,39 +6,9 @@ <link rel="stylesheet" href="../../themes/base/jquery.ui.core.css"> <link rel="stylesheet" href="../../themes/base/jquery.ui.theme.css"> - <style> - body { - font-size: 62.5%; - } - .ui-widget-header { - padding: 0.2em 0.5em; - margin: 0; - } - .ui-widget-content { - padding: 1em; - margin-bottom: 1em; - } - ul { - margin: 0; - list-style: none; - } - li { - line-height: 2em; - } - </style> - - <script src="../jquery.js"></script> - <script> - $(function() { - $( "#main" ) - .addClass( "ui-widget" ) - .find( "h1, h2" ) - .addClass( "ui-widget-header ui-corner-top" ) - .next() - .addClass( "ui-widget-content ui-corner-bottom" ); - - }); - </script> + <link rel="stylesheet" href="../index.css"> + <script src="../jquery-1.7.2.js"></script> + <script src="../index.js"></script> </head> <body> diff --git a/tests/unit/menu/menu.html b/tests/unit/menu/menu.html index fca45697f..62585d863 100644 --- a/tests/unit/menu/menu.html +++ b/tests/unit/menu/menu.html @@ -63,7 +63,7 @@ <li class="foo"><a class="foo" href="#">Aberdeen</a></li> <li class="foo"><a class="foo" href="#">Ada</a></li> <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#">Addyston</a></li> + <li class="foo"><a class="foo" href="#"><span class="ui-icon ui-icon-print"></span>Addyston</a></li> <li> <a href="#">Delphi</a> <ul> diff --git a/tests/unit/menu/menu_common.js b/tests/unit/menu/menu_common.js index ddcdbebf2..07295f1af 100644 --- a/tests/unit/menu/menu_common.js +++ b/tests/unit/menu/menu_common.js @@ -6,6 +6,7 @@ TestHelpers.commonWidgetTests( "menu", { my: "left top", at: "right top" }, + role: "menu", // callbacks blur: null, diff --git a/tests/unit/menu/menu_core.js b/tests/unit/menu/menu_core.js index f2de7ef1a..68b625687 100644 --- a/tests/unit/menu/menu_core.js +++ b/tests/unit/menu/menu_core.js @@ -26,17 +26,4 @@ test("accessibility", function () { equal( menu.attr("aria-activedescendant"), "menu1-4", "aria attribute, generated id"); }); -test("items class and role", function () { - var menu = $('#menu1').menu(); - expect(1 + 5 * $("li",menu).length); - ok( ($("li",menu).length > 0 ), "number of menu items"); - $("li",menu).each(function(item) { - ok( $(this).hasClass("ui-menu-item"), "menu item ("+ item + ") class for item"); - equal( $(this).attr("role"), "presentation", "menu item ("+ item + ") role"); - equal( $("a", this).attr("role"), "menuitem", "menu item ("+ item + ") role"); - ok( $("a",this).hasClass("ui-corner-all"), "a element class for menu item ("+ item + ") "); - equal( $("a",this).attr("tabindex"), "-1", "a element tabindex for menu item ("+ item + ") "); - }); -}); - })(jQuery); diff --git a/tests/unit/menu/menu_events.js b/tests/unit/menu/menu_events.js index 4cb083240..ec3e7d3c4 100644 --- a/tests/unit/menu/menu_events.js +++ b/tests/unit/menu/menu_events.js @@ -41,49 +41,62 @@ test("handle click on custom item menu", function() { equal( $("#log").html(), "1,3,2,afterclick,1,click,", "Click order not valid."); }); -/* Commenting out these tests until a way to handle the extra focus and blur events - fired by IE is found -test( "handle blur: click", function() { - expect( 4 ); - var $menu = $( "#menu1" ).menu({ - focus: function( event, ui ) { - equal( event.originalEvent.type, "click", "focus triggered 'click'" ); - equal( event.type, "menufocus", "focus event.type is 'menufocus'" ); - - }, - blur: function( event, ui ) { - equal( event.originalEvent.type, "click", "blur triggered 'click'" ); - equal( event.type, "menublur", "blur event.type is 'menublur'" ); - } - }); - - $menu.find( "li a:first" ).trigger( "click" ); - $( "<a>", { id: "remove"} ).appendTo("body").trigger( "click" ); +asyncTest( "handle blur", function() { + expect( 1 ); + var blurHandled = false, + $menu = $( "#menu1" ).menu({ + blur: function( event, ui ) { + // Ignore duplicate blur event fired by IE + if ( !blurHandled ) { + blurHandled = true; + equal( event.type, "menublur", "blur event.type is 'menublur'" ); + } + } + }); + + click( $menu, "1" ); + setTimeout( function() { + $menu.blur(); + start(); + }, 350); +}); - $("#remove").remove(); +asyncTest( "handle blur on click", function() { + expect( 1 ); + var blurHandled = false, + $menu = $( "#menu1" ).menu({ + blur: function( event, ui ) { + // Ignore duplicate blur event fired by IE + if ( !blurHandled ) { + blurHandled = true; + equal( event.type, "menublur", "blur event.type is 'menublur'" ); + } + } + }); + + click( $menu, "1" ); + setTimeout( function() { + $( "<a>", { id: "remove"} ).appendTo("body").trigger( "click" ); + $("#remove").remove(); + start(); + }, 350); }); -test( "handle blur on custom item menu: click", function() { - expect( 4 ); - var $menu = $( "#menu5" ).menu({ +test( "handle focus of menu with active item", function() { + expect( 1 ); + var element = $( "#menu1" ).menu({ focus: function( event, ui ) { - equal( event.originalEvent.type, "click", "focus triggered 'click'" ); - equal( event.type, "menufocus", "focus event.type is 'menufocus'" ); - - }, - blur: function( event, ui ) { - equal( event.originalEvent.type, "click", "blur triggered 'click'" ); - equal( event.type, "menublur", "blur event.type is 'menublur'" ); - }, - items: "div" + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); + } }); - click($('#menu5'),"1"); - $( "<a>", { id: "remove"} ).appendTo("body").trigger( "click" ); - - $("#remove").remove(); + log( "focus", true ); + element.focus(); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.focus(); + equal( $("#log").html(), "2,2,1,0,focus,", "current active item remains active"); }); -*/ asyncTest( "handle submenu auto collapse: mouseleave", function() { expect( 4 ); @@ -208,7 +221,7 @@ test("handle keyboard navigation on menu without scroll and without submenus", f }); asyncTest("handle keyboard navigation on menu without scroll and with submenus", function() { - expect(14); + expect(16); var element = $('#menu2').menu({ select: function(event, ui) { log($(ui.item[0]).text()); @@ -290,11 +303,23 @@ asyncTest("handle keyboard navigation on menu without scroll and with submenus", equal( $("#log").html(), "4,keydown,", "Keydown ESCAPE (close submenu)"); log("keydown",true); - element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.SPACE } ); setTimeout( menukeyboard4, 50 ); } function menukeyboard4() { + equal( $("#log").html(), "0,keydown,", "Keydown SPACE (open submenu)"); + + log("keydown",true); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); + equal( $("#log").html(), "4,keydown,", "Keydown ESCAPE (close submenu)"); + + log("keydown",true); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + setTimeout( menukeyboard5, 50 ); + } + + function menukeyboard5() { equal( $("#log").html(), "0,keydown,", "Keydown ENTER (open submenu)"); log("keydown",true); @@ -524,4 +549,42 @@ asyncTest("handle keyboard navigation and mouse click on menu with disabled item } }); +test("handle keyboard navigation with spelling of menu items", function() { + expect( 2 ); + var element = $( "#menu2" ).menu({ + focus: function( event, ui ) { + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); + } + }); + + log( "keydown", true ); + element.one( "menufocus", function( event, ui ) { + element.simulate( "keydown", { keyCode: 65 } ); + element.simulate( "keydown", { keyCode: 68 } ); + element.simulate( "keydown", { keyCode: 68 } ); + equal( $("#log").html(), "3,1,0,keydown,", "Keydown focus Addyston by spelling the first 3 letters"); + element.simulate( "keydown", { keyCode: 68 } ); + equal( $("#log").html(), "4,3,1,0,keydown,", "Keydown focus Delphi by repeating the 'd' again"); + }); + element.focus(); +}); + +asyncTest("handle page up and page down before the menu has focus", function() { + expect( 1 ); + var element = $( "#menu1" ).menu({ + focus: function( event, ui ) { + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); + } + }); + + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); + element.blur(); + setTimeout( function() { + element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); + equal( $("#log").html(), "0,0,keydown,", "Page Up and Page Down bring initial focus to first item"); + start(); + }, 500); +}); + })(jQuery); diff --git a/tests/unit/menu/menu_methods.js b/tests/unit/menu/menu_methods.js index 6ad7bc134..fc4fce4f1 100644 --- a/tests/unit/menu/menu_methods.js +++ b/tests/unit/menu/menu_methods.js @@ -42,6 +42,12 @@ test("destroy", function() { domEqual("#menu1", function() { $("#menu1").menu().menu("destroy"); }); + domEqual("#menu5", function() { + $("#menu5").menu().menu("destroy"); + }); + domEqual("#menu6", function() { + $("#menu6").menu().menu("destroy"); + }); }); diff --git a/tests/unit/menu/menu_options.js b/tests/unit/menu/menu_options.js index e651fd2d1..306f575ea 100644 --- a/tests/unit/menu/menu_options.js +++ b/tests/unit/menu/menu_options.js @@ -38,4 +38,30 @@ test( "{ disabled: false }", function() { equal( $("#log").html(), "afterclick,1,click,", "Click order not valid."); }); +test("{ role: 'menu' } ", function () { + var menu = $('#menu1').menu(); + expect(2 + 5 * $("li", menu).length); + equal( menu.attr( "role" ), "menu" ); + ok( $("li", menu).length > 0, "number of menu items"); + $("li", menu).each(function(item) { + ok( $(this).hasClass("ui-menu-item"), "menu item ("+ item + ") class for item"); + equal( $(this).attr("role"), "presentation", "menu item ("+ item + ") role"); + equal( $("a", this).attr("role"), "menuitem", "menu item ("+ item + ") role"); + ok( $("a",this).hasClass("ui-corner-all"), "a element class for menu item ("+ item + ") "); + equal( $("a",this).attr("tabindex"), "-1", "a element tabindex for menu item ("+ item + ") "); + }); +}); + +test("{ role: 'listbox' } ", function () { + var menu = $('#menu1').menu({ + role: "listbox" + }); + expect(2 + $("li", menu).length); + equal( menu.attr( "role" ), "listbox" ); + ok( ($("li", menu).length > 0 ), "number of menu items"); + $("li", menu).each(function(item) { + equal( $("a", this).attr("role"), "option", "menu item ("+ item + ") role"); + }); +}); + })(jQuery); diff --git a/tests/unit/resizable/resizable_common.js b/tests/unit/resizable/resizable_common.js index 617cdd2ad..119f5bd0e 100644 --- a/tests/unit/resizable/resizable_common.js +++ b/tests/unit/resizable/resizable_common.js @@ -6,7 +6,7 @@ TestHelpers.commonWidgetTests('resizable', { animateEasing: 'swing', aspectRatio: false, autoHide: false, - cancel: ':input,option', + cancel: 'input,textarea,button,select,option', containment: false, delay: 0, disabled: false, diff --git a/tests/unit/selectable/selectable_common.js b/tests/unit/selectable/selectable_common.js index 27714d0ae..885e79401 100644 --- a/tests/unit/selectable/selectable_common.js +++ b/tests/unit/selectable/selectable_common.js @@ -2,7 +2,7 @@ TestHelpers.commonWidgetTests('selectable', { defaults: { appendTo: 'body', autoRefresh: true, - cancel: ':input,option', + cancel: 'input,textarea,button,select,option', delay: 0, disabled: false, distance: 0, diff --git a/tests/unit/slider/slider_common.js b/tests/unit/slider/slider_common.js index 8a0b347f3..ccf793549 100644 --- a/tests/unit/slider/slider_common.js +++ b/tests/unit/slider/slider_common.js @@ -1,7 +1,7 @@ TestHelpers.commonWidgetTests( "slider", { defaults: { animate: false, - cancel: ':input,option', + cancel: 'input,textarea,button,select,option', delay: 0, disabled: false, distance: 0, diff --git a/tests/unit/sortable/sortable_common.js b/tests/unit/sortable/sortable_common.js index b5fc05a5d..ae21f7dd2 100644 --- a/tests/unit/sortable/sortable_common.js +++ b/tests/unit/sortable/sortable_common.js @@ -2,7 +2,7 @@ TestHelpers.commonWidgetTests( "sortable", { defaults: { appendTo: "parent", axis: false, - cancel: ":input,option", + cancel: "input,textarea,button,select,option", connectWith: false, containment: false, cursor: "auto", diff --git a/tests/unit/sortable/sortable_options.js b/tests/unit/sortable/sortable_options.js index 507d5dcfa..a043e68fe 100644 --- a/tests/unit/sortable/sortable_options.js +++ b/tests/unit/sortable/sortable_options.js @@ -29,7 +29,7 @@ test("{ axis: ? }, unexpected", function() { ok(false, "missing test - untested code is broken code."); }); -test("{ cancel: ':input,button' }, default", function() { +test("{ cancel: 'input,textarea,button,select,option' }, default", function() { ok(false, "missing test - untested code is broken code."); }); diff --git a/tests/unit/tabs/tabs.html b/tests/unit/tabs/tabs.html index b961c60f3..b9fa507d8 100644 --- a/tests/unit/tabs/tabs.html +++ b/tests/unit/tabs/tabs.html @@ -57,7 +57,7 @@ <li><a href="#colon:test"><span>1</span></a></li> <li><a href="#inline-style"><span>2</span></a></li> <li><a href="data/test.html#test"><span>3</span></a></li> - <li><a href="data/test.html" aria-controls="custom-id"><span>4</span></a></li> + <li aria-controls="custom-id"><a href="data/test.html"><span>4</span></a></li> <li><a href="data/test.html" title="∫ßáö Սե"><span>5</span></a></li> </ul> <div id="colon:test"></div> diff --git a/tests/unit/tabs/tabs_common.js b/tests/unit/tabs/tabs_common.js index 7ffb05da4..b98ff3575 100644 --- a/tests/unit/tabs/tabs_common.js +++ b/tests/unit/tabs/tabs_common.js @@ -4,7 +4,8 @@ TestHelpers.commonWidgetTests( "tabs", { collapsible: false, disabled: false, event: "click", - fx: null, + hide: null, + show: null, // callbacks activate: null, diff --git a/tests/unit/tabs/tabs_common_deprecated.js b/tests/unit/tabs/tabs_common_deprecated.js index fdcff21b3..718ae8272 100644 --- a/tests/unit/tabs/tabs_common_deprecated.js +++ b/tests/unit/tabs/tabs_common_deprecated.js @@ -7,9 +7,11 @@ TestHelpers.commonWidgetTests( "tabs", { cookie: null, disabled: false, event: "click", + hide: null, fx: null, idPrefix: "ui-tabs-", panelTemplate: "<div></div>", + // show: null, // conflicts with old show callback spinner: "<em>Loading…</em>", tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>", diff --git a/tests/unit/tabs/tabs_core.js b/tests/unit/tabs/tabs_core.js index b9bd81987..fb3c306e6 100644 --- a/tests/unit/tabs/tabs_core.js +++ b/tests/unit/tabs/tabs_core.js @@ -47,14 +47,15 @@ test( "disconnected from DOM", function() { test( "aria-controls", function() { expect( 7 ); var element = $( "#tabs1" ).tabs(), - tabs = element.find( ".ui-tabs-nav a" ); + tabs = element.find( ".ui-tabs-nav li" ); tabs.each(function() { - var tab = $( this ); - equal( tab.prop( "hash" ).substring( 1 ), tab.attr( "aria-controls" ) ); + var tab = $( this ), + anchor = tab.find( ".ui-tabs-anchor" ); + equal( anchor.prop( "hash" ).substring( 1 ), tab.attr( "aria-controls" ) ); }); element = $( "#tabs2" ).tabs(); - tabs = element.find( ".ui-tabs-nav a" ); + tabs = element.find( ".ui-tabs-nav li" ); equal( tabs.eq( 0 ).attr( "aria-controls" ), "colon:test" ); equal( tabs.eq( 1 ).attr( "aria-controls" ), "inline-style" ); ok( /^ui-tabs-\d+$/.test( tabs.eq( 2 ).attr( "aria-controls" ) ), "generated id" ); @@ -86,11 +87,11 @@ test( "#4033 - IE expands hash to full url and misinterprets tab as ajax", funct element.tabs({ beforeLoad: function( event, ui ) { event.preventDefault(); - ok( false, 'should not be an ajax tab'); + ok( false, "should not be an ajax tab" ); } }); - equal( element.find( ".ui-tabs-nav a" ).attr( "aria-controls" ), "tab", "aria-contorls attribute is correct" ); + equal( element.find( ".ui-tabs-nav li" ).attr( "aria-controls" ), "tab", "aria-contorls attribute is correct" ); state( element, 1 ); }); diff --git a/tests/unit/tabs/tabs_deprecated.html b/tests/unit/tabs/tabs_deprecated.html index 09afc91b4..e58382efb 100644 --- a/tests/unit/tabs/tabs_deprecated.html +++ b/tests/unit/tabs/tabs_deprecated.html @@ -56,7 +56,7 @@ <li><a href="#colon:test"><span>1</span></a></li> <li><a href="#inline-style"><span>2</span></a></li> <li><a href="data/test.html#test"><span>3</span></a></li> - <li><a href="data/test.html" aria-controls="custom-id"><span>4</span></a></li> + <li aria-controls="custom-id"><a href="data/test.html"><span>4</span></a></li> <li><a href="data/test.html" title="∫ßáö Սե"><span>5</span></a></li> </ul> <div id="colon:test"></div> diff --git a/tests/unit/tabs/tabs_deprecated.js b/tests/unit/tabs/tabs_deprecated.js index 66768b866..351433348 100644 --- a/tests/unit/tabs/tabs_deprecated.js +++ b/tests/unit/tabs/tabs_deprecated.js @@ -107,11 +107,11 @@ test( "tabTemplate + panelTemplate", function() { }); element.tabs( "add", "#new", "New" ); tab = element.find( ".ui-tabs-nav li" ).last(); - anchor = tab.find( "a" ); + anchor = tab.find( ".ui-tabs-anchor" ); equal( tab.text(), "New", "label" ); ok( tab.hasClass( "customTab" ), "tab custom class" ); equal( anchor.attr( "href" ), "http://example.com/#new", "href" ); - equal( anchor.attr( "aria-controls" ), "new", "aria-controls" ); + equal( tab.attr( "aria-controls" ), "new", "aria-controls" ); ok( element.find( "#new" ).hasClass( "customPanel" ), "panel custom class" ); }); @@ -210,7 +210,7 @@ test( "selected", function() { equal( element.tabs( "option", "selected" ), 0 ); state( element, 1, 0, 0 ); - element.find( ".ui-tabs-nav a" ).eq( 1 ).click(); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).click(); equal( element.tabs( "option", "selected" ), 1 ); state( element, 0, 1, 0 ); @@ -226,17 +226,18 @@ module( "tabs (deprecated): events" ); asyncTest( "load", function() { expect( 15 ); - var tab, panelId, panel, + var tab, anchor, panelId, panel, element = $( "#tabs2" ); // init element.one( "tabsload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 2 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 2 ); + anchor = tab.find( ".ui-tabs-anchor" ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); ok( !( "originalEvent" in event ), "originalEvent" ); - strictEqual( ui.tab, tab[ 0 ], "tab" ); + strictEqual( ui.tab, anchor[ 0 ], "tab" ); strictEqual( ui.panel, panel[ 0 ], "panel" ); equal( $( ui.panel ).find( "p" ).length, 1, "panel html" ); state( element, 0, 0, 1, 0, 0 ); @@ -247,12 +248,13 @@ asyncTest( "load", function() { function tabsload1() { // .option() element.one( "tabsload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 3 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 3 ); + anchor = tab.find( ".ui-tabs-anchor" ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); ok( !( "originalEvent" in event ), "originalEvent" ); - strictEqual( ui.tab, tab[ 0 ], "tab" ); + strictEqual( ui.tab, anchor[ 0 ], "tab" ); strictEqual( ui.panel, panel[ 0 ], "panel" ); equal( $( ui.panel ).find( "p" ).length, 1, "panel html" ); state( element, 0, 0, 0, 1, 0 ); @@ -264,18 +266,19 @@ asyncTest( "load", function() { function tabsload2() { // click, change panel content element.one( "tabsload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 4 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 4 ); + anchor = tab.find( ".ui-tabs-anchor" ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); equal( event.originalEvent.type, "click", "originalEvent" ); - strictEqual( ui.tab, tab[ 0 ], "tab" ); + strictEqual( ui.tab, anchor[ 0 ], "tab" ); strictEqual( ui.panel, panel[ 0 ], "panel" ); equal( $( ui.panel ).find( "p" ).length, 1, "panel html" ); state( element, 0, 0, 0, 0, 1 ); start(); }); - element.find( ".ui-tabs-nav a" ).eq( 4 ).click(); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 4 ).click(); } }); @@ -285,7 +288,7 @@ test( "enable", function() { var element = $( "#tabs1" ).tabs({ disabled: [ 0, 1 ], enable: function( event, ui ) { - equal( ui.tab, element.find( ".ui-tabs-nav a" )[ 1 ], "ui.tab" ); + equal( ui.tab, element.find( ".ui-tabs-nav .ui-tabs-anchor" )[ 1 ], "ui.tab" ); equal( ui.panel, element.find( ".ui-tabs-panel" )[ 1 ], "ui.panel" ); equal( ui.index, 1, "ui.index" ); } @@ -300,7 +303,7 @@ test( "disable", function() { var element = $( "#tabs1" ).tabs({ disable: function( event, ui ) { - equal( ui.tab, element.find( ".ui-tabs-nav a" )[ 1 ], "ui.tab" ); + equal( ui.tab, element.find( ".ui-tabs-nav .ui-tabs-anchor" )[ 1 ], "ui.tab" ); equal( ui.panel, element.find( ".ui-tabs-panel" )[ 1 ], "ui.panel" ); equal( ui.index, 1, "ui.index" ); } @@ -318,13 +321,13 @@ test( "show", function() { active: false, collapsible: true }), - tabs = element.find( ".ui-tabs-nav a" ), + anchors = element.find( ".ui-tabs-nav .ui-tabs-anchor" ), panels = element.find( ".ui-tabs-panel" ); // from collapsed element.one( "tabsshow", function( event, ui ) { ok( !( "originalEvent" in event ), "originalEvent" ); - strictEqual( ui.tab, tabs[ 0 ], "ui.tab" ); + strictEqual( ui.tab, anchors[ 0 ], "ui.tab" ); strictEqual( ui.panel, panels[ 0 ], "ui.panel" ); equal( ui.index, 0, "ui.index" ); state( element, 1, 0, 0 ); @@ -335,12 +338,12 @@ test( "show", function() { // switching tabs element.one( "tabsshow", function( event, ui ) { equal( event.originalEvent.type, "click", "originalEvent" ); - strictEqual( ui.tab, tabs[ 1 ], "ui.tab" ); + strictEqual( ui.tab, anchors[ 1 ], "ui.tab" ); strictEqual( ui.panel, panels[ 1 ], "ui.panel" ); equal( ui.index, 1, "ui.index" ); state( element, 0, 1, 0 ); }); - tabs.eq( 1 ).click(); + anchors.eq( 1 ).click(); state( element, 0, 1, 0 ); // collapsing @@ -358,13 +361,13 @@ test( "select", function() { active: false, collapsible: true }), - tabs = element.find( ".ui-tabs-nav a" ), + anchors = element.find( ".ui-tabs-nav .ui-tabs-anchor" ), panels = element.find( ".ui-tabs-panel" ); // from collapsed element.one( "tabsselect", function( event, ui ) { ok( !( "originalEvent" in event ), "originalEvent" ); - strictEqual( ui.tab, tabs[ 0 ], "ui.tab" ); + strictEqual( ui.tab, anchors[ 0 ], "ui.tab" ); strictEqual( ui.panel, panels[ 0 ], "ui.panel" ); equal( ui.index, 0, "ui.index" ); state( element, 0, 0, 0 ); @@ -375,12 +378,12 @@ test( "select", function() { // switching tabs element.one( "tabsselect", function( event, ui ) { equal( event.originalEvent.type, "click", "originalEvent" ); - strictEqual( ui.tab, tabs[ 1 ], "ui.tab" ); + strictEqual( ui.tab, anchors[ 1 ], "ui.tab" ); strictEqual( ui.panel, panels[ 1 ], "ui.panel" ); equal( ui.index, 1, "ui.index" ); state( element, 1, 0, 0 ); }); - tabs.eq( 1 ).click(); + anchors.eq( 1 ).click(); state( element, 0, 1, 0 ); // collapsing @@ -414,11 +417,11 @@ test( "add", function() { element.tabs( "add", "#new", "New" ); state( element, 1, 0, 0, 0 ); tab = element.find( ".ui-tabs-nav li" ).last(); - anchor = tab.find( "a" ); + anchor = tab.find( ".ui-tabs-anchor" ); equal( tab.text(), "New", "label" ); equal( stripLeadingSlash( anchor[0].pathname ), stripLeadingSlash( location.pathname ), "href pathname" ); equal( anchor[0].hash, "#new", "href hash" ); - equal( anchor.attr( "aria-controls" ), "new", "aria-controls" ); + equal( tab.attr( "aria-controls" ), "new", "aria-controls" ); ok( !tab.hasClass( "ui-state-hover" ), "not hovered" ); anchor.simulate( "mouseover" ); ok( tab.hasClass( "ui-state-hover" ), "hovered" ); @@ -429,17 +432,17 @@ test( "add", function() { element.one( "tabsadd", function( event, ui ) { equal( ui.index, 1, "ui.index" ); equal( $( ui.tab ).text(), "New Remote", "ui.tab" ); - equal( ui.panel.id, $( ui.tab ).attr( "aria-controls" ), "ui.panel" ); + equal( ui.panel.id, $( ui.tab ).closest( "li" ).attr( "aria-controls" ), "ui.panel" ); }); element.tabs( "add", "data/test.html", "New Remote", 1 ); state( element, 0, 0, 0, 0, 1 ); tab = element.find( ".ui-tabs-nav li" ).eq( 1 ); - anchor = tab.find( "a" ); + anchor = tab.find( ".ui-tabs-anchor" ); equal( tab.text(), "New Remote", "label" ); equal( stripLeadingSlash( stripLeadingSlash( anchor[0].pathname.replace( stripLeadingSlash( location.pathname ).split( "/" ).slice( 0, -1 ).join( "/" ), "" ) ) ), "data/test.html", "href" ); - ok( /^ui-tabs-\d+$/.test( anchor.attr( "aria-controls" ) ), "aria controls" ); + ok( /^ui-tabs-\d+$/.test( tab.attr( "aria-controls" ) ), "aria controls" ); ok( !tab.hasClass( "ui-state-hover" ), "not hovered" ); anchor.simulate( "mouseover" ); ok( tab.hasClass( "ui-state-hover" ), "hovered" ); @@ -560,10 +563,10 @@ test( "url", function() { expect( 2 ); var element = $( "#tabs2" ).tabs(), - tab = element.find( "a" ).eq( 3 ); + anchor = element.find( ".ui-tabs-anchor" ).eq( 3 ); element.tabs( "url", 3, "data/test2.html" ); - equal( tab.attr( "href" ), "data/test2.html", "href was updated" ); + equal( anchor.attr( "href" ), "data/test2.html", "href was updated" ); element.one( "tabsbeforeload", function( event, ui ) { equal( ui.ajaxSettings.url, "data/test2.html", "ajaxSettings.url" ); event.preventDefault(); @@ -582,7 +585,7 @@ asyncTest( "abort", function() { }); }); // prevent IE from caching the request, so that it won't resolve before we call abort - element.find( ".ui-tabs-nav li:eq(2) a" ).attr( "href", function( href ) { + element.find( ".ui-tabs-nav li:eq(2) .ui-tabs-anchor" ).attr( "href", function( href ) { return href + "?" + (+ new Date()); }); element.tabs( "option", "active", 2 ); diff --git a/tests/unit/tabs/tabs_events.js b/tests/unit/tabs/tabs_events.js index f33686581..57011bdad 100644 --- a/tests/unit/tabs/tabs_events.js +++ b/tests/unit/tabs/tabs_events.js @@ -8,7 +8,7 @@ test( "create", function() { expect( 10 ); var element = $( "#tabs1" ), - tabs = element.find( "ul a" ), + tabs = element.find( "ul li" ), panels = element.children( "div" ); element.tabs({ @@ -50,7 +50,8 @@ test( "beforeActivate", function() { active: false, collapsible: true }), - tabs = element.find( ".ui-tabs-nav a" ), + tabs = element.find( ".ui-tabs-nav li" ), + anchors = tabs.find( ".ui-tabs-anchor" ), panels = element.find( ".ui-tabs-panel" ); // from collapsed @@ -80,7 +81,7 @@ test( "beforeActivate", function() { strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" ); state( element, 1, 0, 0 ); }); - tabs.eq( 1 ).click(); + anchors.eq( 1 ).click(); state( element, 0, 1, 0 ); // collapsing @@ -120,7 +121,8 @@ test( "activate", function() { active: false, collapsible: true }), - tabs = element.find( ".ui-tabs-nav a" ), + tabs = element.find( ".ui-tabs-nav li" ), + anchors = element.find( ".ui-tabs-anchor" ), panels = element.find( ".ui-tabs-panel" ); // from collapsed @@ -150,7 +152,7 @@ test( "activate", function() { strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" ); state( element, 0, 1, 0 ); }); - tabs.eq( 1 ).click(); + anchors.eq( 1 ).click(); state( element, 0, 1, 0 ); // collapsing @@ -186,7 +188,7 @@ test( "beforeLoad", function() { // init element.one( "tabsbeforeload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 2 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 2 ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); @@ -208,7 +210,7 @@ test( "beforeLoad", function() { // .option() element.one( "tabsbeforeload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 2 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 2 ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); @@ -230,7 +232,7 @@ test( "beforeLoad", function() { // click, change panel content element.one( "tabsbeforeload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 3 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 3 ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); @@ -245,7 +247,7 @@ test( "beforeLoad", function() { event.preventDefault(); state( element, 0, 0, 1, 0, 0 ); }); - element.find( ".ui-tabs-nav a" ).eq( 3 ).click(); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 3 ).click(); state( element, 0, 0, 0, 1, 0 ); // .toLowerCase() is needed to convert <P> to <p> in old IEs equal( panel.html().toLowerCase(), "<p>testing</p>", "panel html after" ); @@ -260,7 +262,7 @@ if ( $.uiBackCompat === false ) { // init element.one( "tabsload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 2 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 2 ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); @@ -278,7 +280,7 @@ if ( $.uiBackCompat === false ) { function tabsload1() { // .option() element.one( "tabsload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 3 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 3 ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); @@ -297,7 +299,7 @@ if ( $.uiBackCompat === false ) { function tabsload2() { // click, change panel content element.one( "tabsload", function( event, ui ) { - tab = element.find( ".ui-tabs-nav a" ).eq( 4 ); + tab = element.find( ".ui-tabs-nav li" ).eq( 4 ); panelId = tab.attr( "aria-controls" ); panel = $( "#" + panelId ); @@ -310,7 +312,7 @@ if ( $.uiBackCompat === false ) { state( element, 0, 0, 0, 0, 1 ); start(); }); - element.find( ".ui-tabs-nav a" ).eq( 4 ).click(); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 4 ).click(); } }); } diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/tabs_methods.js index 0837995e6..ed3e73745 100644 --- a/tests/unit/tabs/tabs_methods.js +++ b/tests/unit/tabs/tabs_methods.js @@ -97,7 +97,7 @@ test( "refresh", function() { element.tabs( "refresh" ); state( element, 1, 0, 0, 0 ); disabled( element, [ 1 ] ); - equal( element.find( "#" + $( "#newTab a" ).attr( "aria-controls" ) ).length, 1, + equal( element.find( "#" + $( "#newTab" ).attr( "aria-controls" ) ).length, 1, "panel added for remote tab" ); // remove all tabs @@ -156,7 +156,7 @@ asyncTest( "load", function() { // load content of inactive tab // useful for preloading content with custom caching element.one( "tabsbeforeload", function( event, ui ) { - var tab = element.find( ".ui-tabs-nav a" ).eq( 3 ), + var tab = element.find( ".ui-tabs-nav li" ).eq( 3 ), panelId = tab.attr( "aria-controls" ), panel = $( "#" + panelId ); @@ -171,13 +171,17 @@ asyncTest( "load", function() { // TODO: remove wrapping in 2.0 var uiTab = $( ui.tab ), uiPanel = $( ui.panel ), - tab = element.find( ".ui-tabs-nav a" ).eq( 3 ), + tab = element.find( ".ui-tabs-nav li" ).eq( 3 ), panelId = tab.attr( "aria-controls" ), panel = $( "#" + panelId ); ok( !( "originalEvent" in event ), "originalEvent" ); equal( uiTab.length, 1, "tab length" ); - strictEqual( uiTab[ 0 ], tab[ 0 ], "tab" ); + if ( $.uiBackCompat === false ) { + strictEqual( uiTab[ 0 ], tab[ 0 ], "tab" ); + } else { + strictEqual( uiTab[ 0 ], tab.find( ".ui-tabs-anchor" )[ 0 ], "tab" ); + } equal( uiPanel.length, 1, "panel length" ); strictEqual( uiPanel[ 0 ], panel[ 0 ], "panel" ); equal( uiPanel.find( "p" ).length, 1, "panel html" ); @@ -203,7 +207,7 @@ asyncTest( "load", function() { function tabsload2() { // reload content of active tab element.one( "tabsbeforeload", function( event, ui ) { - var tab = element.find( ".ui-tabs-nav a" ).eq( 3 ), + var tab = element.find( ".ui-tabs-nav li" ).eq( 3 ), panelId = tab.attr( "aria-controls" ), panel = $( "#" + panelId ); @@ -218,13 +222,17 @@ asyncTest( "load", function() { // TODO: remove wrapping in 2.0 var uiTab = $( ui.tab ), uiPanel = $( ui.panel ), - tab = element.find( ".ui-tabs-nav a" ).eq( 3 ), + tab = element.find( ".ui-tabs-nav li" ).eq( 3 ), panelId = tab.attr( "aria-controls" ), panel = $( "#" + panelId ); ok( !( "originalEvent" in event ), "originalEvent" ); equal( uiTab.length, 1, "tab length" ); - strictEqual( uiTab[ 0 ], tab[ 0 ], "tab" ); + if ( $.uiBackCompat === false ) { + strictEqual( uiTab[ 0 ], tab[ 0 ], "tab" ); + } else { + strictEqual( uiTab[ 0 ], tab.find( ".ui-tabs-anchor" )[ 0 ], "tab" ); + } equal( uiPanel.length, 1, "panel length" ); strictEqual( uiPanel[ 0 ], panel[ 0 ], "panel" ); state( element, 0, 0, 0, 1, 0 ); diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js index ae9e7bdc6..df6827c57 100644 --- a/tests/unit/tabs/tabs_options.js +++ b/tests/unit/tabs/tabs_options.js @@ -57,7 +57,7 @@ test( "{ active: Number }", function() { equal( element.tabs( "option", "active" ), 0 ); state( element, 1, 0, 0 ); - element.find( ".ui-tabs-nav a" ).eq( 1 ).click(); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).click(); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); @@ -110,7 +110,7 @@ test( "{ collapsible: false }", function() { equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); - element.find( ".ui-state-active a" ).eq( 1 ).click(); + element.find( ".ui-state-active .ui-tabs-anchor" ).eq( 1 ).click(); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); }); @@ -131,7 +131,7 @@ test( "{ collapsible: true }", function() { equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); - element.find( ".ui-state-active a" ).click(); + element.find( ".ui-state-active .ui-tabs-anchor" ).click(); equal( element.tabs( "option", "active" ), false ); state( element, 0, 0, 0 ); }); @@ -173,7 +173,7 @@ test( "{ event: null }", function() { state( element, 0, 1, 0 ); // ensure default click handler isn't bound - element.find( ".ui-tabs-nav a" ).eq( 2 ).click(); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).click(); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); }); @@ -186,27 +186,27 @@ test( "{ event: custom }", function() { }); state( element, 1, 0, 0 ); - element.find( ".ui-tabs-nav a" ).eq( 1 ).trigger( "custom1" ); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom1" ); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); // ensure default click handler isn't bound - element.find( ".ui-tabs-nav a" ).eq( 2 ).trigger( "click" ); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).trigger( "click" ); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); - element.find( ".ui-tabs-nav a" ).eq( 2 ).trigger( "custom2" ); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).trigger( "custom2" ); equal( element.tabs( "option", "active" ), 2 ); state( element, 0, 0, 1 ); element.tabs( "option", "event", "custom3" ); // ensure old event handlers are unbound - element.find( ".ui-tabs-nav a" ).eq( 1 ).trigger( "custom1" ); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom1" ); equal( element.tabs( "option", "active" ), 2 ); state( element, 0, 0, 1 ); - element.find( ".ui-tabs-nav a" ).eq( 1 ).trigger( "custom3" ); + element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom3" ); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); }); diff --git a/tests/unit/tabs/tabs_test_helpers.js b/tests/unit/tabs/tabs_test_helpers.js index 9f592c074..508043943 100644 --- a/tests/unit/tabs/tabs_test_helpers.js +++ b/tests/unit/tabs/tabs_test_helpers.js @@ -43,7 +43,7 @@ TestHelpers.tabs = { actual = tabs.find( ".ui-tabs-nav li" ).map(function() { var tab = $( this ), panel = $( $.ui.tabs.prototype._sanitizeSelector( - "#" + tab.find( "a" ).attr( "aria-controls" ) ) ), + "#" + tab.attr( "aria-controls" ) ) ), tabIsActive = tab.hasClass( "ui-state-active" ), panelIsActive = panel.css( "display" ) !== "none"; diff --git a/tests/unit/tooltip/tooltip.html b/tests/unit/tooltip/tooltip.html index d20ba8578..f6e60b367 100644 --- a/tests/unit/tooltip/tooltip.html +++ b/tests/unit/tooltip/tooltip.html @@ -41,6 +41,7 @@ <div> <a id="tooltipped1" href="#" title="anchortitle">anchor</a> <input title="inputtitle"> + <span id="multiple-describedby" aria-describedby="fixture-span" title="...">aria-describedby</span> <span id="fixture-span" title="title-text">span</span> </div> diff --git a/tests/unit/tooltip/tooltip_core.js b/tests/unit/tooltip/tooltip_core.js index e2569fb01..1c8817aa8 100644 --- a/tests/unit/tooltip/tooltip_core.js +++ b/tests/unit/tooltip/tooltip_core.js @@ -3,7 +3,7 @@ module( "tooltip: core" ); test( "markup structure", function() { - expect( 6 ); + expect( 7 ); var element = $( "#tooltipped1" ).tooltip(), tooltip = $( ".ui-tooltip" ); @@ -11,8 +11,9 @@ test( "markup structure", function() { equal( tooltip.length, 0, "no tooltip on init" ); element.tooltip( "open" ); - tooltip = $( "#" + element.attr( "aria-describedby" ) ); + tooltip = $( "#" + element.data( "ui-tooltip-id" ) ); equal( tooltip.length, 1, "tooltip exists" ); + equal( element.attr( "aria-describedby"), tooltip.attr( "id" ), "aria-describedby" ); ok( tooltip.hasClass( "ui-tooltip" ), "tooltip is .ui-tooltip" ); equal( tooltip.length, 1, ".ui-tooltip exists" ); equal( tooltip.find( ".ui-tooltip-content" ).length, 1, @@ -20,8 +21,24 @@ test( "markup structure", function() { }); test( "accessibility", function() { - // TODO: add tests - expect( 0 ); + expect( 5 ); + + var tooltipId, + tooltip, + element = $( "#multiple-describedby" ).tooltip(); + + element.tooltip( "open" ); + tooltipId = element.data( "ui-tooltip-id" ); + tooltip = $( "#" + tooltipId ); + equal( tooltip.attr( "role" ), "tooltip", "role" ); + equal( element.attr( "aria-describedby" ), "fixture-span " + tooltipId, + "multiple describedby when open" ); + // strictEqual to distinguish between .removeAttr( "title" ) and .attr( "title", "" ) + strictEqual( element.attr( "title" ), undefined, "no title when open" ); + element.tooltip( "close" ); + equal( element.attr( "aria-describedby" ), "fixture-span", + "correct describedby when closed" ); + equal( element.attr( "title" ), "...", "title restored when closed" ); }); }( jQuery ) ); diff --git a/tests/unit/tooltip/tooltip_events.js b/tests/unit/tooltip/tooltip_events.js index b1ce92fb2..fc5f1acc5 100644 --- a/tests/unit/tooltip/tooltip_events.js +++ b/tests/unit/tooltip/tooltip_events.js @@ -11,7 +11,7 @@ test( "programmatic triggers", function() { tooltip = ui.tooltip; ok( !( "originalEvent" in event ), "open" ); strictEqual( ui.tooltip[0], - $( "#" + element.attr( "aria-describedby" ) )[0], "ui.tooltip" ); + $( "#" + element.data( "ui-tooltip-id" ) )[0], "ui.tooltip" ); }); element.tooltip( "open" ); diff --git a/tests/unit/tooltip/tooltip_methods.js b/tests/unit/tooltip/tooltip_methods.js index eaab1c0d1..1b8cd2bf2 100644 --- a/tests/unit/tooltip/tooltip_methods.js +++ b/tests/unit/tooltip/tooltip_methods.js @@ -21,7 +21,7 @@ test( "open/close", function() { equal( $( ".ui-tooltip" ).length, 0, "no tooltip on init" ); element.tooltip( "open" ); - tooltip = $( "#" + element.attr( "aria-describedby" ) ); + tooltip = $( "#" + element.data( "ui-tooltip-id" ) ); ok( tooltip.is( ":visible" ) ); element.tooltip( "close" ); @@ -37,7 +37,7 @@ test( "enable/disable", function() { equal( $( ".ui-tooltip" ).length, 0, "no tooltip on init" ); element.tooltip( "open" ); - tooltip = $( "#" + element.attr( "aria-describedby" ) ); + tooltip = $( "#" + element.data( "ui-tooltip-id" ) ); ok( tooltip.is( ":visible" ) ); element.tooltip( "disable" ); @@ -51,7 +51,7 @@ test( "enable/disable", function() { equal( element.attr( "title" ), "anchortitle", "title restored on enable" ); element.tooltip( "open" ); - tooltip = $( "#" + element.attr( "aria-describedby" ) ); + tooltip = $( "#" + element.data( "ui-tooltip-id" ) ); ok( tooltip.is( ":visible" ) ); $.fx.off = false; }); diff --git a/tests/unit/tooltip/tooltip_options.js b/tests/unit/tooltip/tooltip_options.js index 4f994f8de..a4ef9f472 100644 --- a/tests/unit/tooltip/tooltip_options.js +++ b/tests/unit/tooltip/tooltip_options.js @@ -4,7 +4,7 @@ module( "tooltip: options" ); test( "content: default", function() { var element = $( "#tooltipped1" ).tooltip().tooltip( "open" ); - deepEqual( $( "#" + element.attr( "aria-describedby" ) ).text(), "anchortitle" ); + deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "anchortitle" ); }); test( "content: return string", function() { @@ -13,7 +13,7 @@ test( "content: return string", function() { return "customstring"; } }).tooltip( "open" ); - deepEqual( $( "#" + element.attr( "aria-describedby" ) ).text(), "customstring" ); + deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "customstring" ); }); test( "content: return jQuery", function() { @@ -22,7 +22,7 @@ test( "content: return jQuery", function() { return $( "<div>" ).html( "cu<b>s</b>tomstring" ); } }).tooltip( "open" ); - deepEqual( $( "#" + element.attr( "aria-describedby" ) ).text(), "customstring" ); + deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "customstring" ); }); asyncTest( "content: sync + async callback", function() { @@ -30,11 +30,11 @@ asyncTest( "content: sync + async callback", function() { var element = $( "#tooltipped1" ).tooltip({ content: function( response ) { setTimeout(function() { - deepEqual( $( "#" + element.attr("aria-describedby") ).text(), "loading..." ); + deepEqual( $( "#" + element.data("ui-tooltip-id") ).text(), "loading..." ); response( "customstring2" ); setTimeout(function() { - deepEqual( $( "#" + element.attr("aria-describedby") ).text(), "customstring2" ); + deepEqual( $( "#" + element.data("ui-tooltip-id") ).text(), "customstring2" ); start(); }, 13 ); }, 13 ); @@ -53,12 +53,12 @@ test( "items", function() { event = $.Event( "mouseenter" ); event.target = $( "#fixture-span" )[ 0 ]; element.tooltip( "open", event ); - deepEqual( $( "#" + $( "#fixture-span" ).attr( "aria-describedby" ) ).text(), "title-text" ); + deepEqual( $( "#" + $( "#fixture-span" ).data( "ui-tooltip-id" ) ).text(), "title-text" ); // make sure default [title] doesn't get used event.target = $( "#tooltipped1" )[ 0 ]; element.tooltip( "open", event ); - deepEqual( $( "#tooltipped1" ).attr( "aria-describedby" ), undefined ); + deepEqual( $( "#tooltipped1" ).data( "ui-tooltip-id" ), undefined ); element.tooltip( "destroy" ); }); @@ -68,7 +68,7 @@ test( "tooltipClass", function() { var element = $( "#tooltipped1" ).tooltip({ tooltipClass: "custom" }).tooltip( "open" ); - ok( $( "#" + element.attr( "aria-describedby" ) ).hasClass( "custom" ) ); + ok( $( "#" + element.data( "ui-tooltip-id" ) ).hasClass( "custom" ) ); }); }( jQuery ) ); diff --git a/tests/visual/accordion/accordion.html b/tests/visual/accordion/icons.html index a9cf1d129..a9cf1d129 100644 --- a/tests/visual/accordion/accordion.html +++ b/tests/visual/accordion/icons.html diff --git a/tests/visual/addClass/addClass_queue.html b/tests/visual/addClass/queue.html index 616f2c7f9..21f4cc1cb 100644 --- a/tests/visual/addClass/addClass_queue.html +++ b/tests/visual/addClass/queue.html @@ -43,7 +43,7 @@ <body> <p>WHAT: The two boxes animate from black to red to green to blue.</p> -<p>The first box should start with a delay, the second box should start immediately.</p> +<p>EXPECTED: The first box should start with a delay, the second box should start immediately.</p> <div id="box1" class="box"></div> <div id="box2" class="box"></div> diff --git a/tests/visual/button/button.html b/tests/visual/button/button.html index 7aef71f97..20bae191f 100644 --- a/tests/visual/button/button.html +++ b/tests/visual/button/button.html @@ -1,140 +1,94 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>Button Visual push: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <style type="text/css"> - #toolbar { margin-top: 2em; padding:0.2em; } - #ops1, #ops2, #format, #mode { margin-right: 1em } - </style> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../external/jquery.metadata.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>Button Visual Test</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script> $(function() { - var buttons = $('#push button, #check').button(); - var buttonSets = $('#radio0, #radio1, #radio2, #ops1, #format, #ops2, #mode, #inputs, #anchors').buttonset(); - - buttons.add(buttonSets).click(function(event) { - var target = $(event.target); - if (target.closest('.ui-button:not(.ui-state-disabled)').length) { - $("<div></div>") - .text("Clicked " + (target.text() || target.val())) - .appendTo("#log"); - window.console && console.log(this, arguments); - } + $( ".buttons" ).each(function() { + $( this ).children() + .eq( 0 ) + .button({ + text: false, + icons: { + primary: "ui-icon-help" + } + }) + .end() + .eq( 1 ) + .button({ + icons: { + primary: "ui-icon-help" + }, + disabled: true + }) + .end() + .eq( 2 ) + .button(); }); - - $("#disable-widgets").toggle(function() { - buttons.button("disable"); - buttonSets.buttonset("disable"); - }, function() { - buttons.button("enable"); - buttonSets.buttonset("enable"); - }); - $("#toggle-widgets").toggle(function() { - buttons.button(); - buttonSets.buttonset(); - }, function() { - buttons.button("destroy"); - buttonSets.buttonset("destroy"); - }).click(); }); </script> </head> <body> -<div id="push"> - <div> - No icon - <button>Simple button, only text</button> - <button class="ui-priority-secondary">Secondary priority button</button> - </div> - <br/> - <div> - With icon - <button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> - <button class="{button:{icons:{primary:'ui-icon-locked'}}}">Primary icon</button> - <button class="{button:{icons:{secondary:'ui-icon-triangle-1-s'}}}">Secondary icon</button> - <button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Both icons</button> - <button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons and no text</button> - </div> +<div class="buttons"> + <button>button</button> + <button>button</button> + <button>button</button> +</div> + +<div class="buttons"> + <button type="button">button button</button> + <button type="button">button button</button> + <button type="button">button button</button> </div> -<div id="toggle" style="margin-top: 2em;"> - <input type="checkbox" id="check" /><label for="check">Toggle</label> +<div class="buttons"> + <button type="submit">button submit</button> + <button type="submit">button submit</button> + <button type="submit">button submit</button> </div> -<div id="radio0" style="margin-top: 2em;"> - <input type="radio" id="radio01" name="radio" checked="checked" /><label for="radio01">Choice 1</label> - <input type="radio" id="radio02" name="radio" /><label for="radio02">Choice 2</label> - <input type="radio" id="radio03" name="radio" /><label for="radio03">Choice 3</label> +<div class="buttons"> + <input type="button" value="input button"> + <input type="button" value="input button"> + <input type="button" value="input button"> </div> -<form> - <div id="radio1" style="margin-top: 2em;"> - <input type="radio" id="radio11" name="radio" /><label for="radio11">Choice 1</label> - <input type="radio" id="radio12" name="radio" checked="checked" /><label for="radio12">Choice 2</label> - <input type="radio" id="radio13" name="radio" /><label for="radio13">Choice 3</label> - </div> -</form> -<form> - <div id="radio2" style="margin-top: 2em;"> - <input type="radio" id="radio21" name="radio" /><label for="radio21">Choice 1</label> - <input type="radio" id="radio22" name="radio" /><label for="radio22">Choice 2</label> - <input type="radio" id="radio23" name="radio" checked="checked" /><label for="radio23">Choice 3</label> - </div> -</form> -<div id="toolbar" class="ui-widget-header ui-corner-all ui-helper-clearfix"> - <span id="ops1"> - <button class="{button:{icons:{primary:'ui-icon-folder-open'},text:false}}">Open</button> - <button class="{button:{icons:{primary:'ui-icon-disk'},text:false}}">Save</button> - <button class="{button:{icons:{primary:'ui-icon-trash'},text:false}}">Delete</button> - </span> - <span id="format"> - <input type="checkbox" id="check1" /><label for="check1">B</label> - <input type="checkbox" id="check2" /><label for="check2">I</label> - <input type="checkbox" id="check3" /><label for="check3">U</label> - </span> - <span id="ops2"> - <button class="{button:{icons:{primary:'ui-icon-print'},text:false}}">Print...</button> - <button class="{button:{icons:{primary:'ui-icon-mail-closed'},text:false}}">Mail to...</button> - </span> - <span id="mode"> - <input type="radio" id="mode1" name="radio2" checked="checked" /><label for="mode1">Edit</label> - <input type="radio" id="mode2" name="radio2" /><label for="mode2">View</label> - </span> +<div class="buttons"> + <input type="submit" value="input submit"> + <input type="submit" value="input submit"> + <input type="submit" value="input submit"> </div> -<div id="inputs" style="margin-top: 2em;"> - <input type="submit" value="Submit button" /> - <input type="reset" value="Reset button" class="{button:{label:'Custom reset'}}" /> +<div class="buttons"> + <input type="checkbox" id="input-checkbox0"> + <input type="checkbox" id="input-checkbox1"> + <input type="checkbox" id="input-checkbox2"> + <label for="input-checkbox0">input checkbox</label> + <label for="input-checkbox1">input checkbox</label> + <label for="input-checkbox2">input checkbox</label> </div> -<div id="anchors" style="margin-top: 2em;"> - <a href="#">Anchor 1</a> - <a href="#" class="{button:{icons:{primary:'ui-icon-print'},text:false}}">Anchor 2</a> - <a href="#" class="{button:{icons:{primary:'ui-icon-mail-closed'},text:false}}">Anchor 3</a> - <a href="#">Anchor 4</a> +<div class="buttons"> + <input type="radio" id="input-radio0" name="radio"> + <input type="radio" id="input-radio1" name="radio"> + <input type="radio" id="input-radio2" name="radio"> + <label for="input-radio0">input radio</label> + <label for="input-radio1">input radio</label> + <label for="input-radio2">input radio</label> </div> -<div style="margin-top: 2em;"> - <button id="disable-widgets">Toggle disabled</button> - <button id="toggle-widgets">Toggle widget</button> +<div class="buttons"> + <a href="#">anchor</a> + <a href="#">anchor</a> + <a href="#">anchor</a> </div> -<div id="log"></div> -<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> -<script type="text/javascript"> - $.fn.themeswitcher && $('<div></div>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); -</script> </body> </html> diff --git a/tests/visual/button/button_disabled_true.html b/tests/visual/button/button_disabled_true.html deleted file mode 100644 index 83a3e9cd6..000000000 --- a/tests/visual/button/button_disabled_true.html +++ /dev/null @@ -1,84 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Button Visual Test : Button disabled true</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript"> - $(function() { - - $("#button1").button({ - disabled: true - }); - - $("#anchor1").button({ - disabled: true - }); - - $("#inputbutton1").button({ - disabled: true - }); - - $("#radio1, #radio2, #radio3").button({ - disabled: true - }); - - $("#checkbox1, #checkbox2, #checkbox3").button({ - disabled: true - }); - - }); - </script> -</head> -<body> - -<fieldset> - <legend>button</legend> - <button disabled="disabled">button</button> - <hr /> - <button id="button1">button</button> -</fieldset> - -<fieldset> - <legend>anchor</legend> - <a href="javascript:void(0)">anchor 1</a> # Attribute "disabled" not allowed on element "a" at this point. - <hr /> - <a href="javascript:void(0)" id="anchor1">anchor 1</a> -</fieldset> - -<fieldset> - <legend>input type="button"</legend> - <input type="button" disabled="disabled" value="input button 1" /> - <hr /> - <input type="button" id="inputbutton1" value="input button 1" /> -</fieldset> - -<fieldset> - <legend>input type="radio"</legend> - <input type="radio" name="radioletter" id="radioa" disabled="disabled" /><label for="radioa">radio a</label> - <input type="radio" name="radioletter" id="radiob" disabled="disabled" /><label for="radiob">radio b</label> - <input type="radio" name="radioletter" id="radioc" disabled="disabled" /><label for="radioc">radio c</label> - <hr /> - <input type="radio" name="radionumber" id="radio1" /><label for="radio1">radio 1</label> - <input type="radio" name="radionumber" id="radio2" /><label for="radio2">radio 2</label> - <input type="radio" name="radionumber" id="radio3" /><label for="radio3">radio 3</label> -</fieldset> - -<fieldset> - <legend>input type="checkbox"</legend> - <input type="checkbox" id="checkboxa" disabled="disabled" /><label for="checkboxa">checkbox a</label> - <input type="checkbox" id="checkboxb" disabled="disabled" /><label for="checkboxb">checkbox b</label> - <input type="checkbox" id="checkboxc" disabled="disabled" /><label for="checkboxc">checkbox c</label> - <hr /> - <input type="checkbox" id="checkbox1" /><label for="checkbox1">checkbox 1</label> - <input type="checkbox" id="checkbox2" /><label for="checkbox2">checkbox 2</label> - <input type="checkbox" id="checkbox3" /><label for="checkbox3">checkbox 3</label> -</fieldset> - -</body> -</html> diff --git a/tests/visual/button/button_performance.html b/tests/visual/button/button_performance.html deleted file mode 100644 index 8ff6d0320..000000000 --- a/tests/visual/button/button_performance.html +++ /dev/null @@ -1,555 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Button Visual push: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <style type="text/css"> - #toolbar { margin-top: 2em; padding:0.2em; } - #ops1, #ops2, #format, #mode { margin-right: 1em } - </style> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../external/jquery.metadata.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript"> - $(function() { - var start = +new Date(); - $("button").button(); - var end = +new Date(); - $("<p></p>").text( "Time to initialize: " + (end - start) + "ms" ).prependTo("body"); - }); - </script> -</head> -<body> - -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> -<button>Simple button, only text</button> -<button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button> -<button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button> -<button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button> - -</body> -</html> diff --git a/tests/visual/button/button_ticket_5261.html b/tests/visual/button/button_ticket_5261.html deleted file mode 100644 index 7eddc33ae..000000000 --- a/tests/visual/button/button_ticket_5261.html +++ /dev/null @@ -1,42 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Button Visual Test : Button ticket #5261</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript"> - $(function() { - - $('#id1').button().change(function(e) { - console.log('change', e); - }); - $('#id1').bind('change', function(e) { - console.log('bound change', e); - }); - $("body").live('change', function(e) { - console.log('live change on body', e); - }); - $(document).delegate('input', 'change', function(e) { - console.log('delegated input change', e); - }); - $(document).change(function(e) { - console.log('delegated change on document', e); - }); - - }); - </script> -</head> -<body> - -<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/5261">#5261 - button change events don't fire in IE 7/8</a></h1> - -<input name="1" id="id1" type="checkbox"/> -<label for="id1">Checkbox</label> - -</body> -</html> diff --git a/tests/visual/button/button_ticket_5278.html b/tests/visual/button/button_ticket_5278.html deleted file mode 100644 index eed6ebdb0..000000000 --- a/tests/visual/button/button_ticket_5278.html +++ /dev/null @@ -1,58 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Button Visual Test : Button ticket #5278</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript"> - $(function() { - - $('#id1, #id2, #id3, #id4').button(); - - $('#r1, #r2, #r3, #r4').button(); - - }); - </script> -</head> -<body> - -<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/5278">#5278 - ui.buttons doesn't visually reset on form "reset" event or input "change" event</a></h1> - -<form> - -<input name="a1" id="id1" type="checkbox"/> -<label for="id1">Checkbox</label> - -<input name="a2" id="id2" type="checkbox"/> -<label for="id2">Checkbox</label> - -<input name="a3" id="id3" type="checkbox" checked="checked" /> -<label for="id3">Checkbox</label> - -<input name="a4" id="id4" type="checkbox"/> -<label for="id4">Checkbox</label> - -<input type="reset"/> - -<input name="r" id="r1" type="radio"/> -<label for="r1">Radio</label> - -<input name="r" id="r2" type="radio"/> -<label for="r2">Radio</label> - -<input name="r" id="r3" type="radio" checked="checked" /> -<label for="r3">Radio</label> - -<input name="r" id="r4" type="radio"/> -<label for="r4">Radio</label> - - -</form> - -</body> -</html> diff --git a/tests/visual/button/performance.html b/tests/visual/button/performance.html new file mode 100644 index 000000000..1d1884bc2 --- /dev/null +++ b/tests/visual/button/performance.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Button Visual Test: Initialization Performance</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script> + $(function() { + var start, + html = new Array( 500 ).join( "<button>button</button>" ); + $( html ).appendTo( "body" ); + + start = $.now(); + $( "button" ).button(); + $( "<p>" ).text( "Time to initialize: " + ($.now() - start) + "ms" ).prependTo( "body" ); + }); + </script> +</head> +<body> + +</body> +</html> diff --git a/tests/visual/dialog/dialog_on_page_with_large_dom.html b/tests/visual/dialog/performance.html index d807b3e3f..e84f4b328 100644 --- a/tests/visual/dialog/dialog_on_page_with_large_dom.html +++ b/tests/visual/dialog/performance.html @@ -3,7 +3,6 @@ <head> <meta charset="utf-8"> <title>Dialog Visual Test - Modal Dialog in Large DOM</title> - <link rel="stylesheet" href="../visual.css"> <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> <script src="../../../jquery-1.7.2.js"></script> <script src="../../../external/jquery.bgiframe-2.1.2.js"></script> @@ -37,6 +36,9 @@ </head> <body> +<p>WHAT: A single dialog is created on a page with a large DOM.</p> +<p>EXPECTED: Creating and opening the dialog should be fast, regardless of page size.</p> + <button id="opener">open dialog</button> <div id="dialog" title="Dialog Title"> <p> Dialog Content </p> @@ -51,7 +53,7 @@ <div><div><div><div><div><div><div><div><div><div> <div><div><div><div><div><div><div><div><div><div> <div><div><div><div><div><div><div><div><div><div> -<div><p>This <span>is</span> <span>a</span> <strong>large</strong> <abbr>DOM</abbr></p>.</div> +<div><p>This <span>is</span> <span>a</span> <strong>large</strong> <abbr>DOM</abbr>.</p></div> <input> <select> <option>option 1</option> diff --git a/tests/visual/effects/effects.all.html b/tests/visual/effects/all.html index acb8dc41a..15bfcd254 100644 --- a/tests/visual/effects/effects.all.html +++ b/tests/visual/effects/all.html @@ -3,7 +3,7 @@ <head> <meta charset="utf-8"> <title>jQuery UI Effects Test Suite</title> - <link rel="stylesheet" href="effects.all.css" type="text/css"> + <link rel="stylesheet" href="effects.css"> <script src="../../../jquery-1.7.2.js"></script> <script src="../../../ui/jquery.effects.core.js"></script> <script src="../../../ui/jquery.effects.blind.js"></script> @@ -19,7 +19,7 @@ <script src="../../../ui/jquery.effects.shake.js"></script> <script src="../../../ui/jquery.effects.slide.js"></script> <script src="../../../ui/jquery.effects.transfer.js"></script> - <script src="effects.all.js"></script> + <script src="effects.js"></script> </head> <body> @@ -186,19 +186,19 @@ <p>Transfer to first element</p> </div> </li> - + <li> <div class="effect" id="addClass"> <p>addClass</p> </div> </li> - + <li> <div class="effect" id="removeClass"> <p>removeClass</p> </div> </li> - + <li> <div class="effect" id="toggleClass"> <p>toggleClass</p> diff --git a/tests/visual/effects/effects.all.js b/tests/visual/effects/effects.all.js deleted file mode 100644 index a28c41a89..000000000 --- a/tests/visual/effects/effects.all.js +++ /dev/null @@ -1,106 +0,0 @@ - -$(function() { - var duration = 1000, wait = 500; - - $("div.effect") - .hover(function() { $(this).addClass("hover"); }, - function() { $(this).removeClass("hover"); }); - - var effect = function(el, n, o) { - - $.extend(o, { - easing: "easeOutQuint" - }); - - $(el).bind("click", function() { - - $(this).addClass("current") - // delaying the initial animation makes sure that the queue stays in tact - .delay( 10 ) - .hide( n, o, duration ) - .delay( wait ) - .show( n, o, duration, function() { - $( this ).removeClass("current"); - }); - }); - - }; - - $("#hide").click(function() { - var el = $(this); - el.addClass("current").hide(duration, function() { - setTimeout(function() { - el.show(duration, function() { el.removeClass("current"); }); - }, wait); - }); - }); - - effect("#blindLeft", "blind", { direction: "left" }); - effect("#blindUp", "blind", { direction: "up" }); - effect("#blindRight", "blind", { direction: "right" }); - effect("#blindDown", "blind", { direction: "down" }); - - effect("#bounce3times", "bounce", { times: 3 }); - - effect("#clipHorizontally", "clip", { direction: "horizontal" }); - effect("#clipVertically", "clip", { direction: "vertical" }); - - effect("#dropDown", "drop", { direction: "down" }); - effect("#dropUp", "drop", { direction: "up" }); - effect("#dropLeft", "drop", { direction: "left" }); - effect("#dropRight", "drop", { direction: "right" }); - - effect("#explode9", "explode", {}); - effect("#explode36", "explode", { pieces: 36 }); - - effect("#fade", "fade", {}); - - effect("#fold", "fold", { size: 50 }); - - effect("#highlight", "highlight", {}); - - effect("#pulsate", "pulsate", { times: 2 }); - - effect("#puff", "puff", { times: 2 }); - effect("#scale", "scale", {}); - effect("#size", "size", {}); - $("#sizeToggle").bind("click", function() { - var opts = { to: { width: 300, height: 300 }}; - $(this).addClass('current') - .toggle("size", opts, duration) - .delay(wait) - .toggle("size", opts, duration, function() { - $(this).removeClass("current"); - }); - }); - - $("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); }); - - effect("#slideDown", "slide", { direction: "down" }); - effect("#slideUp", "slide", { direction: "up" }); - effect("#slideLeft", "slide", { direction: "left" }); - effect("#slideRight", "slide", { direction: "right" }); - - $("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); }); - - $("#addClass").click(function() { - $(this).addClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration, function() { - $(this).removeClass("current"); - }); - }); - $("#removeClass").click(function() { - $(this).addClass("current").removeClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration); - }); - $("#toggleClass").click(function() { - $(this).toggleClass(function() { - window.console && console.log(arguments); - return "current"; - }, duration); - }); -}); diff --git a/tests/visual/effects/effects.all.css b/tests/visual/effects/effects.css index 1d531b026..460019f24 100644 --- a/tests/visual/effects/effects.all.css +++ b/tests/visual/effects/effects.css @@ -1,13 +1,9 @@ - -body,html { - margin: 0; +body { + margin: 1em; padding: 0; - font-size: 12px; - font-family: Arial; background: #191919; color: #fff; } -body { margin: 1em; } ul.effects { list-style-type: none; @@ -16,8 +12,6 @@ ul.effects { } ul.effects li { - list-style-type: none; - margin: 0; padding: 0; width: 120px; height: 100px; @@ -44,7 +38,7 @@ div.current { div.effect p { color: #191919; font-weight: bold; - margin: 0px; + margin: 0; padding: 10px; } diff --git a/tests/visual/effects/effects.js b/tests/visual/effects/effects.js new file mode 100644 index 000000000..624e0b128 --- /dev/null +++ b/tests/visual/effects/effects.js @@ -0,0 +1,107 @@ +$(function() { + +var duration = 1000, + wait = 500; + +function effect( elem, name, options ) { + $.extend( options, { + easing: "easeOutQuint" + }); + + $( elem ).click(function() { + $( this ) + .addClass( "current" ) + // delaying the initial animation makes sure that the queue stays in tact + .delay( 10 ) + .hide( name, options, duration ) + .delay( wait ) + .show( name, options, duration, function() { + $( this ).removeClass( "current" ); + }); + }); +} + +$( "#hide" ).click(function() { + $( this ) + .addClass( "current" ) + .hide( duration ) + .delay( wait ) + .show( duration, function() { + $( this ).removeClass( "current" ); + }); +}); + +effect( "#blindLeft", "blind", { direction: "left" } ); +effect( "#blindUp", "blind", { direction: "up" } ); +effect( "#blindRight", "blind", { direction: "right" } ); +effect( "#blindDown", "blind", { direction: "down" } ); + +effect( "#bounce3times", "bounce", { times: 3 } ); + +effect( "#clipHorizontally", "clip", { direction: "horizontal" } ); +effect( "#clipVertically", "clip", { direction: "vertical" } ); + +effect( "#dropDown", "drop", { direction: "down" } ); +effect( "#dropUp", "drop", { direction: "up" } ); +effect( "#dropLeft", "drop", { direction: "left" } ); +effect( "#dropRight", "drop", { direction: "right" } ); + +effect( "#explode9", "explode", {} ); +effect( "#explode36", "explode", { pieces: 36 } ); + +effect( "#fade", "fade", {} ); + +effect( "#fold", "fold", { size: 50 } ); + +effect( "#highlight", "highlight", {} ); + +effect( "#pulsate", "pulsate", { times: 2 } ); + +effect( "#puff", "puff", { times: 2 } ); +effect( "#scale", "scale", {} ); +effect( "#size", "size", {} ); +$( "#sizeToggle" ).click(function() { + var options = { to: { width: 300, height: 300 } }; + $( this ) + .addClass( "current" ) + .toggle( "size", options, duration ) + .delay( wait ) + .toggle( "size", options, duration, function() { + $( this ).removeClass( "current" ); + }); +}); + +$( "#shake" ).click(function() { + $( this ) + .addClass( "current" ) + .effect( "shake", {}, 100, function() { + $( this ).removeClass( "current" ); + }); +}); + +effect( "#slideDown", "slide", { direction: "down" } ); +effect( "#slideUp", "slide", { direction: "up" } ); +effect( "#slideLeft", "slide", { direction: "left" } ); +effect( "#slideRight", "slide", { direction: "right" } ); + +$( "#transfer" ).click(function() { + $( this ) + .addClass( "current" ) + .effect( "transfer", { to: "div:eq(0)" }, 1000, function() { + $( this ).removeClass( "current" ); + }); +}); + +$( "#addClass" ).click(function() { + $( this ).addClass( "current", duration, function() { + $( this ).removeClass( "current" ); + }); +}); +$( "#removeClass" ).click(function() { + $( this ).addClass( "current" ).removeClass( "current", duration ); +}); +$( "#toggleClass" ).click(function() { + $( this ).toggleClass( "current", duration ); +}); + +}); diff --git a/tests/visual/effects/effects.scale.html b/tests/visual/effects/scale.html index 708543257..add2ba01c 100644 --- a/tests/visual/effects/effects.scale.html +++ b/tests/visual/effects/scale.html @@ -3,13 +3,12 @@ <head> <meta charset="utf-8"> <title>jQuery UI Effects Test Suite</title> - <link rel="stylesheet" href="effects.all.css" type="text/css"> + <link rel="stylesheet" href="effects.css"> <script src="../../../jquery-1.7.2.js"></script> <script src="../../../ui/jquery.effects.core.js"></script> <script src="../../../ui/jquery.effects.scale.js"></script> - <script src="effects.all.js"></script> <script> - jQuery(function( $ ) { + $(function() { var test = $( "#testBox" ), opts = $( ".arg" ), optsRev = $( opts.get().reverse() ), @@ -82,9 +81,8 @@ } }); </script> - <style type="text/css"> + <style> #testArea { -/* border: 5px dashed #777;*/ width: 200px; height: 200px; position: relative; diff --git a/tests/visual/index.html b/tests/visual/index.html new file mode 100644 index 000000000..0d5aceffa --- /dev/null +++ b/tests/visual/index.html @@ -0,0 +1,82 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Visual Tests</title> + + <link rel="stylesheet" href="../../themes/base/jquery.ui.core.css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.theme.css"> + <link rel="stylesheet" href="../index.css"> + <script src="../jquery-1.7.2.js"></script> + <script src="../index.js"></script> +</head> +<body> + +<div id="main"> + <h1>jQuery UI Visual Tests</h1> + <div> + <h2>Accordion</h2> + <ul> + <li><a href="accordion/icons.html">Icons</a></li> + </ul> + + <h2>addClass</h2> + <ul> + <li><a href="addClass/queue.html">Queue</a></li> + </ul> + + <h2>Button</h2> + <ul> + <li><a href="button/button.html">General</a></li> + <li><a href="button/performance.html">Performance</a></li> + </ul> + + <h2>Dialog</h2> + <ul> + <li><a href="dialog/performance.html">Performance</a></li> + </ul> + + <h2>Effects</h2> + <ul> + <li><a href="effects/all.html">All</a></li> + <li><a href="effects/scale.html">Scale</a></li> + </ul> + + <h2>Menu</h2> + <ul> + <li><a href="menu/menu.html">General</a></li> + </ul> + + <h2>Position</h2> + <ul> + <li><a href="position/position.html">General</a></li> + <li><a href="position/position_feedback.html">Feedback</a></li> + </ul> + + <h2>Tooltip</h2> + <ul> + <li><a href="tooltip/tooltip.html">General</a></li> + <li><a href="tooltip/animations.html">Animations</a></li> + </ul> + + <h2>Compound</h2> + <ul> + <li><a href="compound/accordion_tabs.html">Accordion in Tabs</a></li> + <li><a href="compound/datepicker_dialog.html">Datepicker in Dialog</a></li> + <li><a href="compound/dialog_widgets.html">Various Widgets in Dialog</a></li> + <li><a href="compound/draggable_accordion.html">Draggable Accordion</a></li> + <li><a href="compound/draggable_accordion_accordion_tabs_draggable.html">Nested Widgets</a></li> + <li><a href="compound/sortable_accordion_sortable_tabs.html">Sortable Tabs in Sortable Accordion</a></li> + <li><a href="compound/tabs_tabs.html">Nested Tabs</a></li> + <li><a href="compound/tabs_tooltips.html">Tabs with Tooltips</a></li> + </ul> + + <h2>General</h2> + <ul> + <li><a href="theme.html">Theme</a></li> + </ul> + </div> +</div> + +</body> +</html> diff --git a/tests/visual/menu/drilldown.html b/tests/visual/menu/drilldown.html deleted file mode 100644 index 7b40fc62f..000000000 --- a/tests/visual/menu/drilldown.html +++ /dev/null @@ -1,267 +0,0 @@ -<!doctype html> -<html> -<head> - <meta charset="utf-8"> - <title>Menu Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> - <script type="text/javascript"> - $(function() { - $.fn.themeswitcher && $('<div/>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); - - $.widget("ui.drilldown", { - _init: function() { - var that = this; - this.active = this.element.find(">ul").attr("tabindex", 0); - - // hide submenus and create indicator icons - this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>').end().filter(":first").show(); - - this.element.find("ul").menu({ - // disable built-in key handling - input: $(), - focus: function(event, ui) { - that.activeItem = ui.item; - }, - select: function(event, ui) { - if (this != that.active[0]) { - return; - } - var nested = $(">ul", ui.item); - if (nested.length) { - that._open(nested); - } else { - that.element.find("h3").text(ui.item.text()); - that.options.select.apply(this, arguments); - } - } - }); - - this.back = this.element.children(":last").button({ - icons: { - primary: "ui-icon-carat-1-w" - } - }).click(function() { - that.up(); - return false; - }).hide(); - }, - - _open: function(submenu) { - this.active = submenu.show().css({ - opacity: 0 - }).position({ - my: "left top", - at: "right top", - of: this.widget() - }).position({ - my: "left top", - at: "left top", - of: this.widget(), - using: function(to) { - $(this).animate({ - left: to.left, - top: to.top, - opacity: 1 - }); - } - }); - this.back.show(); - }, - - up: function() { - if (this.active.parent()[0] == this.element[0]) { - return; - } - this.active.position({ - my: "left top", - at: "right top", - of: this.widget(), - using: function(to) { - $(this).animate({ - left: to.left, - top: to.top, - opacity: 0 - }); - } - }); - this.active = this.active.parent().parent().show(); - this.activeItem = this.active.data("menu").active; - if (!this.active.parent().parent().is(":ui-menu")) { - this.back.hide(); - } - }, - - down: function(event) { - var nested = this.activeItem.find(">ul"); - if (nested.length) { - this._open(nested); - nested.menu("focus", event, nested.children(":first")) - } - }, - - show: function() { - }, - - hide: function() { - }, - - widget: function() { - return this.element.find(">ul"); - } - }); - - var drilldown = $("#drilldown").drilldown({ - select: function(event, ui) { - $("#log").append("<div>Selected " + ui.item.text() + "</div>"); - } - }); - - drilldown.drilldown("widget").keydown(function(event) { - var menu = drilldown.data("drilldown").active.data("menu"); - if (menu.widget().is(":hidden")) - return; - event.stopPropagation(); - switch (event.keyCode) { - case $.ui.keyCode.PAGE_UP: - menu.previousPage(); - break; - case $.ui.keyCode.PAGE_DOWN: - menu.nextPage(); - break; - case $.ui.keyCode.UP: - menu.previous(); - break; - case $.ui.keyCode.LEFT: - drilldown.drilldown("up"); - break; - case $.ui.keyCode.RIGHT: - drilldown.drilldown("down"); - break; - case $.ui.keyCode.DOWN: - menu.next(); - event.preventDefault(); - break; - case $.ui.keyCode.ENTER: - case $.ui.keyCode.TAB: - menu.select(); - drilldown.drilldown("hide"); - event.preventDefault(); - break; - case $.ui.keyCode.ESCAPE: - drilldown.drilldown("hide", event); - break; - default: - clearTimeout(menu.filterTimer); - var prev = menu.previousFilter || ""; - var character = String.fromCharCode(event.keyCode); - var skip = false; - if (character == prev) { - skip = true; - } else { - character = prev + character; - } - - var match = menu.widget().children("li").filter(function() { - return new RegExp("^" + character, "i").test($("a", this).text()); - }); - var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match; - if (!match.length) { - character = String.fromCharCode(event.keyCode); - match = menu.widget().children("li").filter(function() { - return new RegExp("^" + character, "i").test($(this).text()); - }); - } - if (match.length) { - menu.focus(event, match); - if (match.length > 1) { - menu.previousFilter = character; - menu.filterTimer = setTimeout(function() { - delete menu.previousFilter; - }, 1000); - } else { - delete menu.previousFilter; - } - } else { - delete menu.previousFilter; - } - } - }); - }); - </script> - <style> - body { font-size:62.5%; } - .ui-menu { width: 200px; height: 170px; } - .ui-menu .ui-menu { position: absolute; } - .ui-menu .ui-icon { float: right; } - </style> -</head> -<body> - -<div id="drilldown"> - <h3>Make a selection...</h3> - <ul> - <li> - <a href="#">Amsterdam</a> - <ul> - <li><a href="#">Aberdeen</a></li> - <li><a href="#">Ada</a></li> - <li> - <a href="#">Adamsville</a> - <ul> - <li><a href="#">Anaheim</a></li> - <li> - <a href="#">Cologne</a> - <ul> - <li><a href="#">Mberdeen</a></li> - <li><a href="#">Mda</a></li> - <li><a href="#">Mdamsville</a></li> - <li><a href="#">Mddyston</a></li> - <li><a href="#">Mmesville</a></li> - </ul> - </li> - <li><a href="#">Frankfurt</a></li> - </ul> - </li> - <li><a href="#">Addyston</a></li> - <li><a href="#">Amesville</a></li> - </ul> - </li> - <li><a href="#">Anaheim</a></li> - <li><a href="#">Cologne</a></li> - <li><a href="#">Frankfurt</a></li> - <li> - <a href="#">Magdeburg</a> - <ul> - <li><a href="#">Mberdeen</a></li> - <li><a href="#">Mda</a></li> - <li><a href="#">Mdamsville</a></li> - <li><a href="#">Mddyston</a></li> - <li><a href="#">Mmesville</a></li> - </ul> - </li> - <li><a href="#">Munich</a></li> - <li><a href="#">Utrecht</a></li> - <li><a href="#">Zurich</a></li> - </ul> - <a href="#">Go back</a> -</div> - -<div class="ui-widget" style="clear: left; margin-top:2em; font-family:Arial"> - Log: - <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div> -</div> - -</body> -</html> diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html index 548f25db4..f92de61db 100644 --- a/tests/visual/menu/menu.html +++ b/tests/visual/menu/menu.html @@ -3,53 +3,30 @@ <head> <meta charset="utf-8"> <title>Menu Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.menu.js"></script> + <script> $(function() { - $.fn.themeswitcher && $('<div/>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); - - function create() { - menus.menu({ - select: function(event, ui) { - $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); - } - }); - - $("#menu5").menu({ - select: function(event, ui) { - $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); - }, - menus: "div" - }); - - $("#menu6").menu({ - select: function(event, ui) { - $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); - }, - menus: ".menuElement" - }); + function logger( event, ui ) { + $( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" ); } - var menus = $("#menu1, #menu2, #menu3, .menu4"); - create(); + $( "#menu1, #menu2, #menu3, .menu4" ).menu({ + select: logger + }); - $("#toggle-destroy").toggle(function() { - menus.menu("destroy"); - }, create); - $("#toggle-disable").toggle(function() { - menus.menu("disable"); - }, function() { - menus.menu("enable"); + $( "#menu5" ).menu({ + menus: "div", + select: logger + }); + + $( "#menu6" ).menu({ + menus: ".menuElement", + select: logger }); }); </script> @@ -64,6 +41,7 @@ </head> <body> +<h2>Default inline menu</h2> <ul id="menu1"> <li><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> @@ -74,6 +52,7 @@ <li><a href="#">Salzburg</a></li> </ul> +<h2>Inline with disabled items and submenus</h2> <ul id="menu2"> <li class="ui-state-disabled"><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> @@ -114,6 +93,7 @@ <li class="ui-state-disabled"><a href="#">Amesville</a></li> </ul> +<h2>Menu with icons</h2> <ul id="menu3"> <li><a href="#"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li> <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li> @@ -152,6 +132,7 @@ </li> </ul> +<h2>Long menu with scroll overflow, to test menu's scroll-on-keypress behaviour</h2> <ul class="menu4"> <li><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> @@ -193,6 +174,7 @@ <li><a href="#">Amesville</a></li> </ul> +<h2>Menu with custom markup</h2> <div id="menu5"> <blockquote><a href="#">Aberdeen</a></blockquote> <blockquote><a href="#">Ada</a></blockquote> @@ -231,6 +213,7 @@ </blockquote> </div> +<h2>Menu with custom markup, multi-line items</h2> <div class="menuElement" id="menu6"> <div class="address-item"> <a href="#"> @@ -274,13 +257,10 @@ </div> </div> -<div class="ui-widget" style="clear: left; margin-top:2em; font-family:Arial"> +<div style="position: absolute; top: 1em; right: 1em;"> Log: - <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div> + <div id="log" style="height: 400px; width: 300px; overflow: auto; border: 1px solid #000;"></div> </div> -<button id="toggle-disable">Disable / Enable</button> -<button id="toggle-destroy">Destroy / Create</button> - </body> </html>
\ No newline at end of file diff --git a/tests/visual/menu/tablemenu.html b/tests/visual/menu/tablemenu.html deleted file mode 100644 index ca4345aed..000000000 --- a/tests/visual/menu/tablemenu.html +++ /dev/null @@ -1,68 +0,0 @@ -<!doctype html> -<html> -<head> - <meta charset="utf-8"> - <title>Menu Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> - $(function() { - var table = $("table"); - var colgroup = table.find("colgroup"); - var menu = $("<ul>").insertAfter(table); - var thead = table.find("thead"); - thead.children("tr").addClass("ui-state-default"); - var rows = table.find("tbody tr"); - $("<table>").width("100%").append(colgroup.clone()).append(thead).wrap("<li>").parent().appendTo(menu); - rows.each(function() { - $("<table>").width("100%").append(colgroup.clone()).append(this).wrap("<li><a></a></li>").parent().parent().appendTo(menu); - }); - - menu.menu({ - select: function(event, ui) { - $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); - } - }); - }); - </script> - <style> - body { font-size:62.5%; } - .ui-menu { width: 200px; } - </style> -</head> -<body> - -<table> - <colgroup><col style="width: 50%"><col style="width: 50%"></colgroup> - <thead> - <tr> - <th>Firstname</th> - <th>Lastname</th> - </tr> - </thead> - <tbody> - <tr> - <td>Scott</td> - <td>Gonzo</td> - </tr> - <tr> - <td>Richy</td> - <td>Worth</td> - </tr> - </tbody> -</table> - -<div class="ui-widget" style="clear: left; margin-top:2em; font-family:Arial"> - Log: - <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div> -</div> - -<button id="toggle-disable">Disable / Enable</button> -<button id="toggle-destroy">Destroy / Create</button> - -</body> -</html> diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html index 64c5d2300..545dc6993 100644 --- a/tests/visual/position/position.html +++ b/tests/visual/position/position.html @@ -1,91 +1,143 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>Position Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> - $(function() { - var inputs = $("input"); - $("ul").insertAfter(inputs); - $(window).resize(function() { - inputs.each(function() { - var input = $(this).position({ - my: this.id.replace(/-/, " "), - at: this.id.replace(/-/, " "), - of: "#container", - collision: "none" - }); - var menu = $(this).next().menu() - menu.position({ - my: "left+30 top+20", - at: "left bottom", - of: this, - using: function( position, feedback ) { - input.val(feedback.horizontal + " " + feedback.vertical) - $(this).offset( position ); - $(this) - .removeClass("left right top bottom center middle") - .addClass(feedback.horizontal) - .addClass(feedback.vertical); - } - }); - }); - }).resize(); - }); - </script> + <meta charset="utf-8"> + <title>Position Visual Test</title> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.mouse.js"></script> + <script src="../../../ui/jquery.ui.draggable.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> <style> - input, .ui-menu { position: absolute; } - .ui-menu { width: 200px; } - html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; } - #container { width: 95%; height: 95%; border: 1px solid black; margin: auto; } - .ui-menu:before { - font-size: 12pt; - content: "↑"; - position: absolute; - top: -22px; - left: 5px; + .demo { + position: relative; + height: 500px; + width: 80%; + margin: 20px auto; + background: #eee; } - .right:before { - left: auto; - right: 5px; + #target { + width: 60%; + margin: 0 auto; + border: 1px solid #777; + background-color: #fbca93; + text-align: center; + cursor: move; } - .bottom:before { - content: "↓"; - top: auto; - bottom: -19px; + .positionable { + position: absolute; + background-color: #bcd5e6; + text-align: center; + } + .extra-margin { + margin: 0 15px 15px 0; } </style> + <script> + $(function() { + var within = $( ".demo" ), + positionable = $( ".positionable" ); + function position() { + positionable.position({ + of: $( "#target" ), + my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), + at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), + within: within, + collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() + }); + } + + positionable.css( "opacity", 0.5 ); + + $( "#target" ).draggable({ + drag: function() { position(); } + }); + + $( "#within" ).click(function() { + within = within.is( ".demo" ) ? $( window ) : $( ".demo" ); + position(); + }); + + $( "#margin" ).click(function() { + positionable.toggleClass( "extra-margin" ); + position(); + }); + + $( "select, input" ).bind( "click keyup change", function() { position(); } ); + + position(); + }); + </script> </head> <body> -<div id="container"></div> +<div class="demo"> + <div id="target"> + <p>This is the position target element.</p> + </div> + + <div class="positionable" style="width: 75px; height: 75px;"> + <p>to position</p> + </div> -<input id="left-top" /> -<input id="left-center" /> -<input id="left-bottom" /> -<input id="center-top" /> -<input id="center-center" /> -<input id="center-bottom" /> -<input id="right-top" /> -<input id="right-center" /> -<input id="right-bottom" /> + <div class="positionable" style="width:120px; height: 40px;"> + <p>to position 2</p> + </div> -<ul> - <li><a href="#">Java</a></li> - <li><a href="#">JavaScript</a></li> - <li><a href="#">Perl</a></li> - <li><a href="#">Ruby</a></li> - <li><a href="#">C++</a></li> - <li><a href="#">Python</a></li> - <li><a href="#">C#</a></li> -</ul> + <form style="padding: 20px; margin-top: 75px;"> + <h2>Position configuration:</h2> + <div style="padding-bottom: 20px;"> + <b>my:</b> + <select id="my_horizontal"> + <option value="left">left</option> + <option value="center">center</option> + <option value="right" selected="selected">right</option> + </select> + <select id="my_vertical"> + <option value="top">top</option> + <option value="middle">center</option> + <option value="bottom">bottom</option> + </select> + </div> + <div style="padding-bottom: 20px;"> + <b>at:</b> + <select id="at_horizontal"> + <option value="left">left</option> + <option value="center">center</option> + <option value="right" selected="selected">right</option> + </select> + <select id="at_vertical"> + <option value="top">top</option> + <option value="middle">center</option> + <option value="bottom">bottom</option> + </select> + </div> + <div style="padding-bottom: 20px;"> + <b>collision:</b> + <select id="collision_horizontal"> + <option value="flip">flip</option> + <option value="fit">fit</option> + <option value="flipfit">flipfit</option> + <option value="none">none</option> + </select> + <select id="collision_vertical"> + <option value="flip">flip</option> + <option value="fit">fit</option> + <option value="flipfit">flipfit</option> + <option value="none">none</option> + </select> + </div> + <div> + <label for="within">within:</label> + <input id="within" type="checkbox" checked="checked"> + </div> + <div> + <label for="margin">extra margin:</label> + <input id="margin" type="checkbox"> + </div> + </form> +</div> </body> </html> diff --git a/tests/visual/position/position_feedback.html b/tests/visual/position/position_feedback.html index 006a1be02..bea1dd2c2 100644 --- a/tests/visual/position/position_feedback.html +++ b/tests/visual/position/position_feedback.html @@ -2,8 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title>Position Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css"> + <title>Position Visual Test: Feedback</title> <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> <script src="../../../jquery-1.7.2.js"></script> <script src="../../../ui/jquery.ui.core.js"></script> @@ -86,6 +85,7 @@ width: 75px; height: 25px; padding: 5px; + font-size: 62.5%; } #target { height: 75px; diff --git a/tests/visual/position/position_feedback_rotate.html b/tests/visual/position/position_feedback_rotate.html deleted file mode 100644 index 11138b112..000000000 --- a/tests/visual/position/position_feedback_rotate.html +++ /dev/null @@ -1,109 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>Position Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css"> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> - <script src="../../../jquery-1.7.2.js"></script> - <script src="../../../ui/jquery.ui.core.js"></script> - <script src="../../../ui/jquery.ui.widget.js"></script> - <script src="../../../ui/jquery.ui.position.js"></script> - <script src="../../../ui/jquery.ui.menu.js"></script> - <script> - $(function() { - function using( position, feedback ) { - var angleRad = Math.atan2( - feedback.target.top + feedback.target.height / 2 - feedback.element.top - feedback.element.height / 2, - feedback.target.left + feedback.target.width / 2 - feedback.element.left - feedback.element.width / 2 - ) * 180 / Math.PI, - angle = Math.round( angleRad * 100) / 100; - $( this ) - .css( position ) - .text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important + " " + angle + "°" ) - .css({ - "-webkit-transform": "rotate(" + angle + "deg)", - "-moz-transform": "rotate(" + angle + "deg)", - "-ms-transform": "rotate(" + angle + "deg)", - "-o-transform": "rotate(" + angle + "deg)", - "transform": "rotate(" + angle + "deg)" - }); - } - - var element = $( ".element" ), - target = $( "#target" ).position({ - my: "center", - at: "center", - of: window - }), - targetOffset = target.offset(); - oppositeElement = element.clone().width( 50 ).appendTo( "body" ), - leftElement = element.clone().width( 50 ).height( 150 ).appendTo( "body" ), - rightElement = element.clone().height( 150 ).width( 150 ).appendTo( "body" ); - - $.each([ - "center top-100", - "right+25 top-50", - "right+75 top", - "right+75 center", - "right+75 bottom", - "right+25 bottom+50", - "center bottom+100", - "left-25 bottom+50", - "left-75 bottom", - "left-75 center", - "left-75 top", - "left-25 top-50" - ], function( index, direction ) { - element.clone().insertAfter( target ).position({ - my: "center", - at: direction, - of: target, - using: using - }); - }); - - element.width( 150 ); - $( document ).on( "mousemove", function( event ) { - var base = { - my: "left top", - at: "left top", - of: target, - using: using - }; - element.position( $.extend({ - offset: (event.pageX - targetOffset.left) + " " + (event.pageY - targetOffset.top) - }, base )); - oppositeElement.position( $.extend({ - offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top)) - }, base )); - leftElement.position( $.extend({ - offset: (-0.9 * (event.pageX - targetOffset.left)) + " " + (0.9 * (event.pageY - targetOffset.top)) - }, base )); - rightElement.position( $.extend({ - offset: (0.9 * (event.pageX - targetOffset.left)) + " " + (-0.9 * (event.pageY - targetOffset.top)) - }, base )); - }); - }); - </script> - <style> - #target, .element { - position: absolute; - border: 1px solid black; - border-radius: 5px; - width: 75px; - height: 25px; - padding: 5px; - } - #target { - height: 75px; - } - </style> -</head> -<body> - -<div id="target">all around me</div> -<div class="element"></div> - -</body> -</html> diff --git a/tests/visual/position/position_fit.html b/tests/visual/position/position_fit.html deleted file mode 100644 index a70423c79..000000000 --- a/tests/visual/position/position_fit.html +++ /dev/null @@ -1,147 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Position Visual Test: Fit</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> - $(function() { - var inputs = $("input"); - $("ul").insertAfter(inputs); - inputs.each(function(index) { - $(this).position({ - my: $(this).data("position"), - at: $(this).data("position"), - of: "#container"+index, - collision: "none" - }); - if(index < 3) { - $(this).next().menu().position({ - my: "left top", - at: "left bottom", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - if(index >= 3 && index < 6) { - $(this).next().menu().position({ - my: "right top", - at: "right bottom", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - if(index >= 6 && index < 9) { - $(this).next().menu().position({ - my: "center top", - at: "center bottom", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - if(index >= 9 && index < 12) { - $(this).next().menu().position({ - my: "left top", - at: "left bottom", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - if(index >= 12 && index < 15) { - $(this).next().menu().position({ - my: "center center", - at: "center center", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - if(index >= 15) { - $(this).next().menu().position({ - my: "left bottom", - at: "left top", - of: this, - within: "#container"+index, - collision: "fit" - }); - } - }); - }); - </script> - <style> - input, .ui-menu { position: absolute; } - .ui-menu { width: 300px; } - #ui-menu-9, #ui-menu-10, #ui-menu-11, #ui-menu-12, #ui-menu-13, #ui-menu-14, #ui-menu-15, #ui-menu-16, #ui-menu-17 { width: auto; } - html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; } - .container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 15px; margin-bottom: 135px; } - .container2 { width: 200px; height: 100px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 15px; margin-bottom: 135px; } - </style> -</head> -<body> - -<div id="container0" class="container"></div> -<div id="container1" class="container"></div> -<div id="container2" class="container"></div> -<div style="clear:both;"></div> -<div id="container3" class="container"></div> -<div id="container4" class="container"></div> -<div id="container5" class="container"></div> -<div style="clear:both;"></div> -<div id="container6" class="container"></div> -<div id="container7" class="container"></div> -<div id="container8" class="container"></div> -<div style="clear:both;"></div> -<div id="container9" class="container2"></div> -<div id="container10" class="container2"></div> -<div id="container11" class="container2"></div> -<div style="clear:both;"></div> -<div id="container12" class="container2"></div> -<div id="container13" class="container2"></div> -<div id="container14" class="container2"></div> -<div style="clear:both;"></div> -<div id="container15" class="container2"></div> -<div id="container16" class="container2"></div> -<div id="container17" class="container2"></div> - -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> - -<input data-position="left top" /> -<input data-position="center center" /> -<input data-position="right bottom" /> -<input data-position="left top" /> -<input data-position="center center" /> -<input data-position="right bottom" /> -<input data-position="left top" /> -<input data-position="center center" /> -<input data-position="right bottom" /> - -<ul> - <li><a href="#">Java</a></li> - <li><a href="#">JavaScript</a></li> - <li><a href="#">Perl</a></li> - <li><a href="#">Ruby</a></li> - <li><a href="#">C++</a></li> - <li><a href="#">Python</a></li> - <li><a href="#">C#</a></li> -</ul> - -</body> -</html> diff --git a/tests/visual/position/position_flip.html b/tests/visual/position/position_flip.html deleted file mode 100644 index b67c76fb3..000000000 --- a/tests/visual/position/position_flip.html +++ /dev/null @@ -1,76 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Position Visual Test: Flip</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> - $(function() { - var inputs = $("input"); - $("ul").insertAfter(inputs); - inputs.each(function(index) { - $(this).position({ - my: $(this).data("position"), - at: $(this).data("position"), - of: "#container"+index, - collision: "none" - }); - $(this).next().menu().position({ - my: "left top", - at: "left bottom", - of: this, - within: "#container"+index - }); - }); - }); - </script> - <style> - input, .ui-menu { position: absolute; } - .ui-menu { width: 300px; } - #ui-menu-6, #ui-menu-7, #ui-menu-8 { width: auto; } - html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; } - .container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 150px; } - </style> -</head> -<body> - -<div id="container0" class="container"></div> -<div id="container1" class="container"></div> -<div id="container2" class="container"></div><br> -<div style="clear:both;"></div> -<div id="container3" class="container" style="width:300px;"></div> -<div id="container4" class="container" style="width:300px;"></div> -<div id="container5" class="container" style="width:300px;"></div> -<div style="clear:both;"></div> -<div id="container6" class="container" style="height:100px; margin-bottom: 500px;"></div> -<div id="container7" class="container" style="height:100px; margin-bottom: 500px;"></div> -<div id="container8" class="container" style="height:100px; margin-bottom: 500px;"></div> - -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> -<input data-position="left center" /> -<input data-position="center center" /> -<input data-position="right center" /> -<input data-position="left bottom" /> -<input data-position="center center" /> -<input data-position="right bottom" /> - -<ul> - <li><a href="#">Java</a></li> - <li><a href="#">JavaScript</a></li> - <li><a href="#">Perl</a></li> - <li><a href="#">Ruby</a></li> - <li><a href="#">C++</a></li> - <li><a href="#">Python</a></li> - <li><a href="#">C#</a></li> -</ul> - -</body> -</html> diff --git a/tests/visual/position/position_flipfit.html b/tests/visual/position/position_flipfit.html deleted file mode 100644 index 840dd5868..000000000 --- a/tests/visual/position/position_flipfit.html +++ /dev/null @@ -1,85 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Position Visual Test: FlipFit</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript"> - $(function() { - var inputs = $("input"); - $("ul").insertAfter(inputs); - inputs.each(function(index) { - $(this).position({ - my: $(this).data("position"), - at: $(this).data("position"), - of: "#container"+index, - collision: "none" - }); - $(this).next().menu().position({ - my: index > 2 && index < 6 ? "right top" : "left top", - at: index > 2 && index < 6 ? "right bottom" : "left bottom", - of: this, - within: "#container"+index, - collision: "flipfit" - }); - }); - }); - </script> - <style> - input, .ui-menu { position: absolute; } - .ui-menu { width: 300px; } - #ui-menu-3, #ui-menu-4, #ui-menu-5 { width: 185px; } - #ui-menu-9, #ui-menu-10, #ui-menu-11 { width: auto; } - html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; } - .container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 150px; } - </style> -</head> -<body> - -<div id="container0" class="container"></div> -<div id="container1" class="container"></div> -<div id="container2" class="container"></div><br> -<div style="clear:both;"></div> -<div id="container3" class="container"></div> -<div id="container4" class="container"></div> -<div id="container5" class="container"></div><br> -<div style="clear:both;"></div> -<div id="container6" class="container" style="width:300px;"></div> -<div id="container7" class="container" style="width:300px;"></div> -<div id="container8" class="container" style="width:300px;"></div> -<div style="clear:both;"></div> -<div id="container9" class="container" style="height:100px; margin-bottom: 500px;"></div> -<div id="container10" class="container" style="height:100px; margin-bottom: 500px;"></div> -<div id="container11" class="container" style="height:100px; margin-bottom: 500px;"></div> - -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> -<input data-position="left top" /> -<input data-position="center top" /> -<input data-position="right top" /> -<input data-position="left center" /> -<input data-position="center center" /> -<input data-position="right center" /> -<input data-position="left bottom" /> -<input data-position="center center" /> -<input data-position="right bottom" /> - -<ul> - <li><a href="#">Java</a></li> - <li><a href="#">JavaScript</a></li> - <li><a href="#">Perl</a></li> - <li><a href="#">Ruby</a></li> - <li><a href="#">C++</a></li> - <li><a href="#">Python</a></li> - <li><a href="#">C#</a></li> -</ul> - -</body> -</html> diff --git a/tests/visual/position/position_margin.html b/tests/visual/position/position_margin.html deleted file mode 100644 index 2e3b63266..000000000 --- a/tests/visual/position/position_margin.html +++ /dev/null @@ -1,42 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>Position Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript"> - $(function() { - $( "#elem" ).position({ - my: "right bottom", - at: "right bottom", - of: window, - collision: "fit" - }); - }); - </script> - <style> - #elem { - position: absolute; - top: 100px; - left: 100px; - width: 200px; - height: 200px; - box-shadow: 10px 10px 5px #888; - -moz-box-shadow: 10px 10px 5px #888; - -webkit-box-shadow: 10px 10px 5px #888; - background-color: #aaa; - margin: 15px; - } - </style> -</head> -<body> - -<div id="elem"></div> - -</body> -</html> diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html deleted file mode 100644 index 692cb1067..000000000 --- a/tests/visual/position/position_within.html +++ /dev/null @@ -1,200 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>Position Visual Test: Containing Element</title> - - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - - <script src="../../../jquery-1.7.2.js"></script> - <script src="../../../ui/jquery.ui.core.js"></script> - <script src="../../../ui/jquery.ui.widget.js"></script> - <script src="../../../ui/jquery.ui.mouse.js"></script> - <script src="../../../ui/jquery.ui.draggable.js"></script> - <script src="../../../ui/jquery.ui.position.js"></script> - - <style> - html, body { - height:100%; - width:100%; - margin:0; - /* force scroll bar*/ - min-height:800px; - min-width:800px; - - /* IE6 needs this */ - text-align:center; - } - .demo-description { - text-align:center; - padding:1.5em; - } - .demo-container { - background:#aaa; - width:80%; - height:80%; - - text-align:left; - margin:0 auto; - position:relative; - padding:10px; - } - .demo { - background:#eee; - overflow:hidden; - position:relative; - height:100%; - /* IE6 needs this */ - width:100%; - } - #parent { - width: 60%; - margin: 10px auto; - padding: 5px; - border: 1px solid #777; - background-color: #fbca93; - text-align: center; - cursor:move; - } - .positionable { - width: 75px; - height: 75px; - position: absolute; - display: block; - right: 0; - bottom: 0; - background-color: #bcd5e6; - text-align: center; - cursor:move; - } - .ui-flipped-top { - border-top: 3px solid #000000; - } - .ui-flipped-bottom { - border-bottom: 3px solid #000000; - } - .ui-flipped-left { - border-left: 3px solid #000000; - } - .ui-flipped-right { - border-right: 3px solid #000000; - } - select, input { - margin-left: 15px; - } - </style> - <script> - $(function() { - function position( using ) { - $( ".positionable" ).position({ - of: $( "#parent" ), - my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), - at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), - offset: $( "#offset" ).val(), - using: using, - within: $( ".demo" ), - collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() - }); - } - $( ".demo" ).css("overflow","scroll"); - - $( ".positionable" ).css( "opacity", 0.5 ); - - $( ":input" ).bind( "click keyup change", function() { position(); } ); - - $( "#parent" ).draggable({ - drag: function() { position(); } - }); - - $( ".positionable" ).draggable({ - drag: function( event, ui ) { - // reset offset before calculating it - $( "#offset" ).val( "0" ); - position(function( result ) { - var demo = $( ".demo" ); - $( "#offset" ).val( "" + ( ui.offset.left - result.left - demo.offset().left + demo.scrollLeft() ) + - " " + ( ui.offset.top - result.top - demo.offset().top + demo.scrollTop() ) ); - position(); - }); - } - }); - - position(); - }); - </script> -</head> -<body> - -<div class="demo-description"> - Use the form controls to configure the positioning, or drag the positioned element to modify its offset. - <br/>Drag around the parent element to see collision detection in action. -</div><!-- End demo-description --> - -<div class="demo-container"> -<div class="demo"> - - <div id="parent"> - <p>This is the position parent element.</p> - </div> - - <div class="positionable"> - <p>to position</p> - </div> - - <div class="positionable" style="width:120px; height: 40px;"> - <p>to position 2</p> - </div> - - <div style="padding: 20px; margin-top: 75px;"> - position... - <div style="padding-bottom: 20px;"> - <b>my:</b> - <select id="my_horizontal"> - <option value="left">left</option> - <option value="center">center</option> - <option value="right" selected="selected">right</option> - </select> - <select id="my_vertical"> - <option value="top">top</option> - <option value="middle">center</option> - <option value="bottom">bottom</option> - </select> - </div> - <div style="padding-bottom: 20px;"> - <b>at:</b> - <select id="at_horizontal"> - <option value="left">left</option> - <option value="center">center</option> - <option value="right" selected="selected">right</option> - </select> - <select id="at_vertical"> - <option value="top">top</option> - <option value="middle">center</option> - <option value="bottom">bottom</option> - </select> - </div> - <div style="padding-bottom: 20px;"> - <b>offset:</b> - <input id="offset" type="text" size="15"/> - </div> - <div style="padding-bottom: 20px;"> - <b>collision:</b> - <select id="collision_horizontal"> - <option value="flip">flip</option> - <option value="fit">fit</option> - <option value="none">none</option> - </select> - <select id="collision_vertical"> - <option value="flip">flip</option> - <option value="fit">fit</option> - <option value="none">none</option> - </select> - </div> - </div> - -</div><!-- End demo --> -</div> - -</body> -</html> diff --git a/tests/visual/tooltip/ajaxcontent.php b/tests/visual/tooltip/ajaxcontent.php deleted file mode 100644 index a689a734d..000000000 --- a/tests/visual/tooltip/ajaxcontent.php +++ /dev/null @@ -1,2 +0,0 @@ -<?php sleep(1); ?> -<strong>Hello</strong> world!
\ No newline at end of file diff --git a/tests/visual/tooltip/animations.html b/tests/visual/tooltip/animations.html index 38ee28f1d..24fe02905 100644 --- a/tests/visual/tooltip/animations.html +++ b/tests/visual/tooltip/animations.html @@ -1,73 +1,73 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> - <title>Tooltip Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script> - <script type="text/javascript" src="../../../ui/jquery.effects.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.effects.blind.js"></script> - <script type="text/javascript" src="../../../ui/jquery.effects.bounce.js"></script> - <script type="text/javascript" src="../../../ui/jquery.effects.drop.js"></script> - <script type="text/javascript" src="../../../ui/jquery.effects.explode.js"></script> - <!-- - <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> - --> - <script type="text/javascript"> + <title>Tooltip Visual Test: Animations</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.tooltip.js"></script> + <script src="../../../ui/jquery.effects.core.js"></script> + <script src="../../../ui/jquery.effects.blind.js"></script> + <script src="../../../ui/jquery.effects.bounce.js"></script> + <script src="../../../ui/jquery.effects.drop.js"></script> + <script src="../../../ui/jquery.effects.explode.js"></script> + <style> + pre { + width: 250px; + border: 1px solid #000; + padding: .5em; + } + </style> + <script> $(function() { - var animations = [{}, { - show: { - effect: "slideDown" - }, - hide: { - effect: "slideUp" - } - }, { - show: { - effect: "explode" - }, - hide: { - effect: "explode" - } - }, { - show: { - effect: "bounce" - }, - hide: { - effect: "blind" - } - }, - { - show: { - effect: "drop", - direction: "right" - }, - hide: { - effect: "drop", - direction: "right" - } - }]; - $.each(animations, function(index, animation) { - var text = JSON.stringify(animation); - $("<span></span>").attr("title", text).text(text).tooltip({ - show: animation.show, - hide: animation.hide - }).wrap("<li></li>").parent().appendTo("ul"); + $( "pre" ).each(function( index, elem ) { + $( elem ) + .attr( "title", "animated tooltips" ) + .tooltip( $.parseJSON( $( elem ).text() ) ); }); }); </script> </head> <body> -<div style="width:300px"> - <ul class="ui-widget ui-widget-header"> - </ul> -</div> +<pre>{}</pre> +<pre>{ + "show": { + "effect": "slideDown" + }, + "hide": { + "effect": "slideUp" + } +}</pre> +<pre>{ + "show": { + "effect": "explode" + }, + "hide": { + "effect": "explode" + } +}</pre> +<pre>{ + "show": { + "effect": "bounce" + }, + "hide": { + "effect": "blind" + } +}</pre> +<pre>{ + "show": { + "effect": "drop", + "direction": "right" + }, + "hide": { + "effect": "drop", + "direction": "right" + } +}</pre> + </body> </html> diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html index da811645c..e0ff27aa8 100644 --- a/tests/visual/tooltip/tooltip.html +++ b/tests/visual/tooltip/tooltip.html @@ -1,121 +1,104 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tooltip Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> - <script type="text/javascript" src="../../../jquery-1.7.2.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script> - <!-- - <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> - --> - <script type="text/javascript"> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.7.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script src="../../../ui/jquery.ui.tooltip.js"></script> + <style> + .group { + margin-top: 2em; + } + </style> + <script> $(function() { - $.fn.themeswitcher && $('<div/>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); - - function enable() { - // default - $("#context1, form, #childish, #nested-input").tooltip(); - - // custom class, replaces ui-widget-content - $("#context2").tooltip({ - tooltipClass: "ui-widget-header" - }); - $("#right1").tooltip({ - tooltipClass: "ui-state-error" - }); - - // synchronous content - $("#footnotes").tooltip({ - items: "[href^='#']", - content: function() { - return $($(this).attr("href")).html(); - } - }); - // asynchronous content - $("#ajax").tooltip({ - content: function(response) { - $.get("ajaxcontent.php", response); - return "Loading..."; - } - }); - // asynchronous content with caching - var content; - $("#ajax2").tooltip({ - content: function(response) { - if (content) { - return content; - } - $.ajax({ - url: "ajaxcontent.php", - cache: false, - success: function(result) { - content = result; - response(result); - } - }); - return "Loading..."; - } - }); - - // custom position - $("#right2").tooltip({ - tooltipClass: "ui-state-highlight", - position: { - my: "center top", - at: "center bottom", - offset: "0 10" - } - }); + // default + $( "#context1, form, #childish, #nested-input" ).tooltip(); - $("#button1").button(); - $("#button2").button({ - icons: { - primary: "ui-icon-wrench" - } - }); - $("#button3, #button4").button({ - icons: { - primary: "ui-icon-wrench" - }, - text: false - }); - $("#buttons").tooltip({ - position: { - my: "center bottom", - at: "center top", - offset: "0 -5" + // custom class, replaces ui-widget-content + $( "#context2" ).tooltip({ + tooltipClass: "ui-widget-header" + }); + $( "#right1" ).tooltip({ + tooltipClass: "ui-state-error" + }); + + // synchronous content + $( "#footnotes" ).tooltip({ + items: "[href^='#']", + content: function() { + return $( $( this ).attr( "href" ) ).html(); + } + }); + + // asynchronous content + $( "#async" ).tooltip({ + content: function( response ) { + setTimeout(function() { + response( "I loaded <strong>asyncrhonously</strong>!" ); + }, 1000 ); + return "Loading..."; + } + }); + + // asynchronous content with caching + var content; + $( "#async2" ).tooltip({ + content: function( response ) { + if ( content ) { + return content; } - }); - } - enable(); - - $("#disable").toggle(function() { - $(":ui-tooltip").tooltip("disable"); - }, function() { - $(":ui-tooltip").tooltip("enable"); + setTimeout(function() { + content = "<strong>Hello</strong> world!"; + response( content ); + }, 1000 ); + return "Loading..."; + } + }); + + // custom position + $( "#right2" ).tooltip({ + tooltipClass: "ui-state-highlight", + position: { + my: "center top", + at: "center bottom", + offset: "0 10" + } + }); + + $( "#button1" ).button(); + $( "#button2" ).button({ + icons: { + primary: "ui-icon-wrench" + } + }); + $( "#button3, #button4" ).button({ + icons: { + primary: "ui-icon-wrench" + }, + text: false }); - $("#toggle").toggle(function() { - $(":ui-tooltip").tooltip("destroy"); - }, function() { - enable(); + $( "#buttons" ).tooltip({ + position: { + my: "center bottom", + at: "center top", + offset: "0 -5" + } }); }); </script> </head> <body> -<div style="width:300px"> - <ul id="context1" class="ui-widget ui-widget-header"> +<div> + <p>Lots of tooltipped elements close together.<br> + Mouse through them quickly and slowly.</p> + <ul id="context1"> <li><a href="#" title="Tooltip text 1">Anchor 1</a></li> <li><a href="#" title="Tooltip text 2">Anchor 2</a></li> <li><a href="#" title="Tooltip text 3">Anchor 3</a></li> @@ -124,68 +107,83 @@ <li><a href="#" title="Tooltip text 6 more Tooltip text Tooltip text ">Anchor 6</a></li> </ul> - <div id="right1" style="position: absolute; right: 1em" title="right aligned element"> - collision detection should kick in around here - </div> - - <div id="footnotes" style="margin: 2em 0"> - <a href="#footnote1">I'm a link to a footnote.</a> - <a href="#footnote2">I'm another link to a footnote.</a> + <div class="group" style="position: absolute; right: 1em; text-align: right;"> + <p>These elements are right aligned.<br> + One collides and one uses custom position.</p> + <p id="right1" title="right aligned element"> + collision detection should kick in around here + </p> + <p id="right2" title="right aligned element with custom position"> + right aligned with custom position + </p> </div> - <div id="right2" style="position: absolute; right: 1em" title="right aligned element with custom position"> - right aligned with custom position - </div> - - <div id="ajax" style="width: 100px;" class="ui-widget-content" title="never be seen"> - gets its content via ajax - </div> - <div id="ajax2" style="width: 100px;" class="ui-widget-content" title="never be seen"> - gets its content via ajax, caches the response + <div class="group"> + <p>These footnotes pull content form the elements they link to.</p> + <div id="footnotes"> + <a href="#footnote1">I'm a link to a footnote.</a> + <a href="#footnote2">I'm another link to a footnote.</a> + </div> </div> - <div id="context2" class="ui-widget ui-widget-content"> - <span title="something" style="border:1px solid blue">span</span> - <div title="something else" style="border:1px solid red;"> - div - <span title="something more" style="border:1px solid green;">nested span</span> + <div class="group"> + <p>These elements load their content asynchronously.<br> + There should be a loading message while the content is retrieved.</p> + <div id="async" style="width: 100px;" class="ui-widget-content" title="never be seen"> + async + </div> + <div id="async2" style="width: 100px;" class="ui-widget-content" title="never be seen"> + async + cache </div> </div> - <div id="childish" class="ui-widget ui-widget-content" style="margin: 2em 0; border: 1px solid black;" title="element with child elements"> - Text in <strong>bold</strong>. + <div class="group" style="width: 300px;"> + <p>Nested elements.</p> + <div id="context2"> + <div title="something else" style="border:1px solid red;"> + tooltipped + <span title="something more" style="border:1px solid green; padding-left: 50px;">nested tooltipped</span> + </div> + </div> + <div id="childish" style="border: 1px solid black;" title="element with child elements"> + Text in <strong>bold</strong>. + </div> </div> - <form style="margin: 2em 0;"> - <div> - <label for="first">First Name:</label> - <input id="first" title="Your first name is optional" /> - </div> - <div> - <label for="last">Last Name:</label> - <input id="last" title="Your last name is optional" /> + <div class="group"> + <p>Play around with focusing and hovering of form elements.</p> + <form> + <div> + <label for="first">First Name:</label> + <input id="first" title="Your first name is optional"> + </div> + <div> + <label for="last">Last Name:</label> + <input id="last" title="Your last name is optional"> + </div> + </form> + + <p>Some inputs nested inside labels:</p> + <div id="nested-input"> + <label title="test"><input type="checkbox">This is a test</label> + <label title="test2"><input type="checkbox">This is a test</label> + <label><input type="checkbox" title="test3">This is a test</label> + <label><input type="checkbox" title="test4">This is a test</label> </div> - </form> - <div id="nested-input"> - <label title="test"><input type="checkbox">This is a test</label> - <label title="test2"><input type="checkbox">This is a test</label> - <label><input type="checkbox" title="test3">This is a test</label> - <label><input type="checkbox" title="test4">This is a test</label> + <p>Some button widgets:</p> + <div id="buttons"> + <button id="button1" title="Button Tooltip">Button Label</button> + <button id="button2" title="Icon Button">Button with Icon</button> + <button id="button3">Icon Only Button 1</button> + <button id="button4">Icon Only Button 2</button> + </div> </div> - <div id="buttons"> - <button id="button1" title="Button Tooltip">Button Label</button> - <button id="button2" title="Icon Button">Button with Icon</button> - <button id="button3">Icon Only Button 1</button> - <button id="button4">Icon Only Button 2</button> + <div class="group"> + <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div> + <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div> </div> - - <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div> - <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div> - - <button id="disable">Toggle disabled</button> - <button id="toggle">Toggle widget</button> </div> <div style="height: 2000px"></div> |