--- /dev/null
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+ <title>jQuery UI Accordion Test Suite</title>\r
+ \r
+ <link rel="Stylesheet" media="screen" href="../../../qunit/testsuite.css" />\r
+ <script type="text/javascript" src="../../../jquery/src/core.js"></script>\r
+ <script type="text/javascript" src="../../../jquery/src/selector.js"></script>\r
+ <script type="text/javascript" src="../../../jquery/src/event.js"></script>\r
+ <script type="text/javascript" src="../../../jquery/src/ajax.js"></script>\r
+ <script type="text/javascript" src="../../../jquery/src/fx.js"></script>\r
+ <script type="text/javascript" src="../../../jquery/src/offset.js"></script>\r
+ <script type="text/javascript" src="../../../jquery/src/dimensions.js"></script>\r
+\r
+ <script type="text/javascript" src="../../ui.core.js"></script>\r
+ <script type="text/javascript" src="../../ui.accordion.js"></script>\r
+\r
+ <script type="text/javascript" src="../../../qunit/testrunner.js"></script>\r
+ <script type="text/javascript" src="accordion.js"></script>\r
+ <style type="text/css">\r
+ .xerror, .error { display: none }\r
+ </style>\r
+\r
+</head>\r
+<body class="flora">\r
+ <h1>jQuery UI Accordion Test Suite</h1>\r
+ <h2 id="banner"></h2>\r
+ <h2 id="userAgent"></h2>\r
+\r
+ <ol id="tests"></ol>\r
+\r
+<div id="main" style="position:absolute;top:-2000000px;">\r
+\r
+ <fieldset>\r
+ <legend>Standard, container is a div, header is h3 and content p</legend> \r
+\r
+ <div id="list1">\r
+ <a>There is one obvious advantage:</a>\r
+ <div>\r
+ <p>\r
+ You've seen it coming!<br/>\r
+ Buy now and get nothing for free!<br/>\r
+ Well, at least no free beer. Perhaps a bear, if you can afford it.\r
+ </p>\r
+ </div>\r
+ <a>Now that you've got...</a>\r
+ <div>\r
+ <p>\r
+ your bear, you have to admit it!<br/>\r
+ No, we aren't selling bears.\r
+ </p>\r
+ <p>\r
+ We could talk about renting one.\r
+ </p>\r
+ </div>\r
+ <a>Rent one bear, ...</a>\r
+ <div>\r
+ <p>\r
+ get two for three beer.\r
+ </p>\r
+ <p>\r
+ And now, for something completely different.\r
+ </p>\r
+ </div>\r
+ </div>\r
+ \r
+ </fieldset>\r
+ \r
+ <fieldset>\r
+ <legend>Navigation - Unordered List with anchors and nested lists.</legend>\r
+ <p>The first item is cloned to allow the user to select it. The\r
+ active element is choosen based on location.hash: Open Drums and click\r
+ the first item ('Drums'), then reload the page.</p>\r
+\r
+ <ul id="navigation">\r
+ <li>\r
+ <a class="head" href="?p=1.1.1">Guitar</a>\r
+ <ul>\r
+ <li><a href="?p=1.1.1.1">Electric</a></li>\r
+ <li><a href="?p=1.1.1.2">Acoustic</a></li>\r
+ <li><a href="?p=1.1.1.3">Amps</a></li>\r
+ <li><a href="?p=1.1.1.4">Effects</a></li>\r
+ <li><a href="?p=1.1.1.5">Accessories</a></li>\r
+ </ul> \r
+ </li>\r
+ <li>\r
+ <a class="head" href="?p=1.1.2">Bass</a>\r
+ <ul>\r
+ <li><a href="?p=1.1.2.1">Electric</a></li>\r
+ <li><a href="?p=1.1.2.2">Acoustic</a></li>\r
+ <li><a href="?p=1.1.2.3">Amps</a></li>\r
+ <li><a href="?p=1.1.2.4">Effects</a></li>\r
+ <li><a href="?p=1.1.2.5">Accessories</a></li>\r
+ <li><a href="?p=1.1.2.5">Accessories</a></li>\r
+ <li><a href="?p=1.1.2.5">Accessories</a></li>\r
+ </ul> \r
+ </li>\r
+ <li>\r
+ <a class="head" href="?p=1.1.3">Drums</a>\r
+ <ul>\r
+ <li><a href="?p=1.1.3.2">Acoustic Drums</a></li>\r
+ <li><a href="?p=1.1.3.3">Electronic Drums</a></li>\r
+ <li><a href="?p=1.1.3.6">Accessories</a></li>\r
+ </ul> \r
+ </li>\r
+ </ul>\r
+ \r
+ </fieldset>\r
+\r
+ <fieldset>\r
+ <legend>With options, container is a definition list, header dt, content dd</legend>\r
+ \r
+ <dl id="list2">\r
+ <dt class="red">Red</dt>\r
+ <dd>\r
+ Fancy stuff about red thingies.\r
+ </dd>\r
+ <dt class="green selected">Green</dt>\r
+ <dd>\r
+ Green! Green! Green!\r
+ </dd>\r
+ <dt class="blue">Blue</dt>\r
+ <dd>\r
+ Cool kids are blue.\r
+ </dd>\r
+ </dl>\r
+ \r
+ </fieldset>\r
+\r
+ <fieldset>\r
+ <legend>Divitus structure, div container, div header (class title), div\r
+ content, no active on startup and can be completely closed</legend>\r
+\r
+ <div id="list3">\r
+ <div>\r
+ <div class="title">Tennis</div>\r
+ <div>\r
+ One ball, two players. Lots of fun.\r
+ </div>\r
+ </div>\r
+ <div>\r
+ <div class="title">Soccer</div>\r
+ <div>\r
+ One ball, 22 players. Lots of fun.\r
+ </div>\r
+ </div>\r
+ <div>\r
+ <div class="title">Baseball</div>\r
+ <div>\r
+ Well, one ball, some guys running around, some guys hitting others with a stick.<br/>\r
+ Sounds like fun, doesn't it?\r
+ </div>\r
+ <div>\r
+ Well, apart from the running part.\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ </fieldset>\r
+ \r
+ <div id="switch">\r
+ <select>\r
+ <option>Switch to...</option>\r
+ <option value="1">1</option>\r
+ <option value="2">2</option>\r
+ <option value="3">3</option>\r
+ </select>\r
+ <button id="close">Close all</button>\r
+ Activate via selector, eg. ':first' or 'a:first': <input id="switch2" />\r
+ </div>\r
+\r
+ <div id="log"><div><strong>Log of the 2nd accordion</strong></div></div>\r
+</div>\r
+ </body>\r
+</html>
\ No newline at end of file
--- /dev/null
+module("accordion");\r
+\r
+jQuery.ui.accordion.defaults.animated = false;\r
+\r
+function state(accordion) {\r
+ var args = $.makeArray(arguments).slice(1);\r
+ $.each(args, function(i, n) {\r
+ equals(n, accordion.find("div").eq(i).is(":visible"));\r
+ });\r
+}\r
+\r
+test("basics", function() {\r
+ state($('#list1').accordion(), 1, 0, 0);\r
+});\r
+\r
+test("autoheight", function() {\r
+ $('#navigation').accordion({ header: '.head', autoheight: false });\r
+ equals( 90, $('#navigation ul:first').height() );\r
+ equals( 126, $('#navigation ul:eq(1)').height() );\r
+ equals( 54, $('#navigation ul:last').height() );\r
+ $('#navigation').accordion("destroy").accordion({ header: '.head',autoheight: true });\r
+ equals( 126, $('#navigation ul:first').height() );\r
+ equals( 126, $('#navigation ul:eq(1)').height() );\r
+ equals( 126, $('#navigation ul:last').height() );\r
+});\r
+\r
+test("activate, numeric", function() {\r
+ var ac = $('#list1').accordion({ active: 1 });\r
+ state(ac, 0, 1, 0);\r
+ ac.accordion("activate", 2);\r
+ state(ac, 0, 0, 1);\r
+ ac.accordion("activate", 0);\r
+ state(ac, 1, 0, 0);\r
+ ac.accordion("activate", 1);\r
+ state(ac, 0, 1, 0);\r
+ ac.accordion("activate", 2);\r
+ state(ac, 0, 0, 1);\r
+ ac.accordion("activate", -1);\r
+ state(ac, 0, 0, 1);\r
+});\r
+\r
+test("activate, boolean and numeric, alwaysOpen:false", function() {\r
+ var ac = $('#list1').accordion({alwaysOpen: false}).accordion("activate", 2);\r
+ state(ac, 0, 0, 1);\r
+ ok("x", "----")\r
+ ac.accordion("activate", 0);\r
+ state(ac, 1, 0, 0);\r
+ ok("x", "----")\r
+ ac.accordion("activate", -1);\r
+ state(ac, 0, 0, 0);\r
+});\r
+\r
+test("activate, boolean, alwaysOpen:true", function() {\r
+ var ac = $('#list1').accordion().accordion("activate", 2);\r
+ state(ac, 0, 0, 1);\r
+ ac.accordion("activate", -1);\r
+ state(ac, 0, 0, 1);\r
+});\r
+\r
+test("activate, string expression", function() {\r
+ var ac = $('#list1').accordion({ active: ":last" });\r
+ state(ac, 0, 0, 1);\r
+ ac.accordion("activate", ":first");\r
+ state(ac, 1, 0, 0);\r
+ ac.accordion("activate", ":eq(1)");\r
+ state(ac, 0, 1, 0);\r
+ ac.accordion("activate", ":last");\r
+ state(ac, 0, 0, 1);\r
+});\r
+\r
+test("activate, jQuery or DOM element", function() {\r
+ var ac = $('#list1').accordion({ active: $("#list1 a:last") });\r
+ state(ac, 0, 0, 1);\r
+ ac.accordion("activate", $("#list1 a:first"));\r
+ state(ac, 1, 0, 0);\r
+ ac.accordion("activate", $("#list1 a")[1]);\r
+ state(ac, 0, 1, 0);\r
+});
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+ <title>jQuery UI All Tests</title>\r
+ \r
+ <link rel="Stylesheet" media="screen" href="../../../qunit/testsuite.css" />\r
+ <script type="text/javascript" src="../../../jquery/src/core.js"></script>\r
+ <script type="text/javascript" src="../../../jquery/src/selector.js"></script>\r
+ <script type="text/javascript" src="../../../jquery/src/event.js"></script>\r
+ <script type="text/javascript" src="../../../jquery/src/ajax.js"></script>\r
+ <script type="text/javascript" src="../../../jquery/src/fx.js"></script>\r
+ <script type="text/javascript" src="../../../jquery/src/offset.js"></script>\r
+ <script type="text/javascript" src="../../../jquery/src/dimensions.js"></script>\r
+\r
+ <script type="text/javascript" src="../../ui.core.js"></script>\r
+ <script type="text/javascript" src="../../ui.accordion.js"></script>\r
+ <script type="text/javascript" src="../../ui.slider.js"></script>\r
+\r
+ <script type="text/javascript" src="../../../qunit/testrunner.js"></script>\r
+ <script type="text/javascript" src="accordion.js"></script>\r
+ <script type="text/javascript" src="slider.js"></script>\r
+ <style type="text/css">\r
+ .xerror, .error { display: none }\r
+ </style>\r
+\r
+</head>\r
+<body class="flora">\r
+ <h1>jQuery UI All Tests</h1>\r
+ <h2 id="banner"></h2>\r
+ <h2 id="userAgent"></h2>\r
+\r
+ <h4>Run individual testsuites or doubleclick a test below</h4>\r
+ <ul>\r
+ <li><a href="accordion.html">Accordion</a></li>\r
+ <li><a href="slider.html">Slider</a></li>\r
+ </ul>\r
+\r
+ <ol id="tests"></ol>\r
+\r
+<div id="main" style="position:absolute;top:-2000000px;">\r
+\r
+ <div id='slider1'></div>\r
+ <div id='slider3' style="position: relative; margin: 40px; width: 217px; height: 28px; background: url(http://developer.yahoo.com/yui/examples/slider/assets/bg-fader.gif) no-repeat scroll 5px 0px;">\r
+ <div class='ui-slider-handle' style='position: absolute; height: 21px; left: 0px; bottom: 0px; width: 17px; background-image: url(http://developer.yahoo.com/yui/examples/slider/assets/thumb-n.gif);'></div> \r
+ </div>\r
+\r
+ <fieldset>\r
+ <legend>Standard, container is a div, header is h3 and content p</legend> \r
+\r
+ <div id="list1">\r
+ <a>There is one obvious advantage:</a>\r
+ <div>\r
+ <p>\r
+ You've seen it coming!<br/>\r
+ Buy now and get nothing for free!<br/>\r
+ Well, at least no free beer. Perhaps a bear, if you can afford it.\r
+ </p>\r
+ </div>\r
+ <a>Now that you've got...</a>\r
+ <div>\r
+ <p>\r
+ your bear, you have to admit it!<br/>\r
+ No, we aren't selling bears.\r
+ </p>\r
+ <p>\r
+ We could talk about renting one.\r
+ </p>\r
+ </div>\r
+ <a>Rent one bear, ...</a>\r
+ <div>\r
+ <p>\r
+ get two for three beer.\r
+ </p>\r
+ <p>\r
+ And now, for something completely different.\r
+ </p>\r
+ </div>\r
+ </div>\r
+ \r
+ </fieldset>\r
+ \r
+ <fieldset>\r
+ <legend>Navigation - Unordered List with anchors and nested lists.</legend>\r
+ <p>The first item is cloned to allow the user to select it. The\r
+ active element is choosen based on location.hash: Open Drums and click\r
+ the first item ('Drums'), then reload the page.</p>\r
+\r
+ <ul id="navigation">\r
+ <li>\r
+ <a class="head" href="?p=1.1.1">Guitar</a>\r
+ <ul>\r
+ <li><a href="?p=1.1.1.1">Electric</a></li>\r
+ <li><a href="?p=1.1.1.2">Acoustic</a></li>\r
+ <li><a href="?p=1.1.1.3">Amps</a></li>\r
+ <li><a href="?p=1.1.1.4">Effects</a></li>\r
+ <li><a href="?p=1.1.1.5">Accessories</a></li>\r
+ </ul> \r
+ </li>\r
+ <li>\r
+ <a class="head" href="?p=1.1.2">Bass</a>\r
+ <ul>\r
+ <li><a href="?p=1.1.2.1">Electric</a></li>\r
+ <li><a href="?p=1.1.2.2">Acoustic</a></li>\r
+ <li><a href="?p=1.1.2.3">Amps</a></li>\r
+ <li><a href="?p=1.1.2.4">Effects</a></li>\r
+ <li><a href="?p=1.1.2.5">Accessories</a></li>\r
+ <li><a href="?p=1.1.2.5">Accessories</a></li>\r
+ <li><a href="?p=1.1.2.5">Accessories</a></li>\r
+ </ul> \r
+ </li>\r
+ <li>\r
+ <a class="head" href="?p=1.1.3">Drums</a>\r
+ <ul>\r
+ <li><a href="?p=1.1.3.2">Acoustic Drums</a></li>\r
+ <li><a href="?p=1.1.3.3">Electronic Drums</a></li>\r
+ <li><a href="?p=1.1.3.6">Accessories</a></li>\r
+ </ul> \r
+ </li>\r
+ </ul>\r
+ \r
+ </fieldset>\r
+\r
+ <fieldset>\r
+ <legend>With options, container is a definition list, header dt, content dd</legend>\r
+ \r
+ <dl id="list2">\r
+ <dt class="red">Red</dt>\r
+ <dd>\r
+ Fancy stuff about red thingies.\r
+ </dd>\r
+ <dt class="green selected">Green</dt>\r
+ <dd>\r
+ Green! Green! Green!\r
+ </dd>\r
+ <dt class="blue">Blue</dt>\r
+ <dd>\r
+ Cool kids are blue.\r
+ </dd>\r
+ </dl>\r
+ \r
+ </fieldset>\r
+\r
+ <fieldset>\r
+ <legend>Divitus structure, div container, div header (class title), div\r
+ content, no active on startup and can be completely closed</legend>\r
+\r
+ <div id="list3">\r
+ <div>\r
+ <div class="title">Tennis</div>\r
+ <div>\r
+ One ball, two players. Lots of fun.\r
+ </div>\r
+ </div>\r
+ <div>\r
+ <div class="title">Soccer</div>\r
+ <div>\r
+ One ball, 22 players. Lots of fun.\r
+ </div>\r
+ </div>\r
+ <div>\r
+ <div class="title">Baseball</div>\r
+ <div>\r
+ Well, one ball, some guys running around, some guys hitting others with a stick.<br/>\r
+ Sounds like fun, doesn't it?\r
+ </div>\r
+ <div>\r
+ Well, apart from the running part.\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ </fieldset>\r
+ \r
+ <div id="switch">\r
+ <select>\r
+ <option>Switch to...</option>\r
+ <option value="1">1</option>\r
+ <option value="2">2</option>\r
+ <option value="3">3</option>\r
+ </select>\r
+ <button id="close">Close all</button>\r
+ Activate via selector, eg. ':first' or 'a:first': <input id="switch2" />\r
+ </div>\r
+\r
+ <div id="log"><div><strong>Log of the 2nd accordion</strong></div></div>\r
+</div>\r
+ </body>\r
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+<meta http-equiv="Content-Language" content="en" />\r
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r
+<title>Slider Test Page</title>\r
+<link rel="Stylesheet" media="screen" href="../../../qunit/testsuite.css" />\r
+<script type="text/javascript" src="../../../jquery/src/core.js"></script>\r
+<script type="text/javascript" src="../../../jquery/src/selector.js"></script>\r
+<script type="text/javascript" src="../../../jquery/src/event.js"></script>\r
+<script type="text/javascript" src="../../../jquery/src/ajax.js"></script>\r
+<script type="text/javascript" src="../../../jquery/src/fx.js"></script>\r
+<script type="text/javascript" src="../../../jquery/src/offset.js"></script>\r
+<script type="text/javascript" src="../../../jquery/src/dimensions.js"></script>\r
+\r
+<script type="text/javascript" src="../../ui.core.js"></script>\r
+<script type="text/javascript" src="../../ui.slider.js"></script>\r
+\r
+<script type="text/javascript" src="../../../qunit/testrunner.js"></script>\r
+<script type="text/javascript" src="slider.js"></script>\r
+</head>\r
+<body>\r
+\r
+ <h1 id="header">jQuery Test Suite</h1>\r
+ <h2 id="banner"></h2>\r
+ <h2 id="userAgent"></h2>\r
+\r
+ <div id="main" style="position:absolute;top:-20000px">\r
+ <div id='slider1'></div>\r
+ <div id='slider3' style="position: relative; margin: 40px; width: 217px; height: 28px; background: url(http://developer.yahoo.com/yui/examples/slider/assets/bg-fader.gif) no-repeat scroll 5px 0px;">\r
+ <div class='ui-slider-handle' style='position: absolute; height: 21px; left: 0px; bottom: 0px; width: 17px; background-image: url(http://developer.yahoo.com/yui/examples/slider/assets/thumb-n.gif);'></div> \r
+ </div>\r
+ </div>\r
+ \r
+ <ol id="tests"></ol>\r
+ \r
+</body>\r
+</html>\r
--- /dev/null
+$.fn.triggerKeydown = function(keyCode) {\r
+ return this.trigger("keydown", [$.event.fix({event:"keydown", keyCode: keyCode, target: this[0]})]);\r
+}\r
+\r
+function assertChange(stepping, start, result, action) {\r
+ return function() {\r
+ expect(1);\r
+ var slider = $("#slider3").slider({\r
+ stepping: stepping,\r
+ startValue: start,\r
+ min: 0,\r
+ max: 1000,\r
+ change: function(e, ui) {\r
+ equals(ui.value, result, "changed to " + ui.value);\r
+ }\r
+ });\r
+ action.apply(slider);\r
+ }\r
+}\r
+\r
+module("slider: single handle")\r
+\r
+test("change one step via keydown", assertChange(1, undefined, 1, function() {\r
+ this.find("a").triggerKeydown("39");\r
+}))\r
+test("change - 10 steps via keydown", assertChange(10, 20, 10, function() {\r
+ this.find("a").triggerKeydown("37");\r
+}))\r
+test("change +10 steps via keydown", assertChange(10, 20, 30, function() {\r
+ this.find("a").triggerKeydown("39");\r
+}))\r
+\r
+test("moveTo, absolute value", assertChange(1, 1, 10, function() {\r
+ this.slider("moveTo", 10);\r
+}))\r
+\r
+test("moveTo, absolute value as string", assertChange(1, 1, 10, function() {\r
+ this.slider("moveTo", "10");\r
+}))\r
+\r
+test("moveTo, absolute value, below min", assertChange(1, 1, 0, function() {\r
+ this.slider("moveTo", -10);\r
+}))\r
+\r
+test("moveTo, relative positive value", assertChange(1, 1, 11, function() {\r
+ this.slider("moveTo", "+=10");\r
+}))\r
+\r
+test("moveTo, relative positive value, above max", assertChange(1, 10, 1000, function() {\r
+ this.slider("moveTo", "+=2000");\r
+}))\r
+\r
+test("moveTo, relative negative value", assertChange(1, 20, 10, function() {\r
+ this.slider("moveTo", "-=10");\r
+}))\r
+\r
+test("options update min/max", function() {\r
+ expect(2);\r
+ var slider = $("#slider3").slider({\r
+ stepping: 1,\r
+ startValue: 1\r
+ });\r
+ slider.slider("moveTo", "-=10");\r
+ equals(slider.slider("value"), 0);\r
+ slider.data("min.slider", -10);\r
+ slider.slider("moveTo", "-=20");\r
+ equals(slider.slider("value"), -10);\r
+})\r
+\r
+module("slider: setup and teardown");\r
+\r
+test("destroy and recreate", function() {\r
+ expect(3)\r
+ var slider = $("#slider3").slider();\r
+ slider.slider("moveTo", "+=20");\r
+ equals(slider.slider("value"), 20);\r
+ slider.slider("destroy");\r
+ \r
+ slider.slider("moveTo", "+=30");\r
+ ok(true, "nothing happens after slider is destroyed");\r
+ \r
+ slider.slider().slider("moveTo", "30");\r
+ \r
+ equals(Math.round(slider.slider("value")), 30);\r
+})\r
+\r
+test("handle creation", function() {\r
+ var slider = $("#slider1");\r
+ equals(slider.children().size(), 0);\r
+ slider.slider({\r
+ handles: [\r
+ { start: 0 },\r
+ { start: 10 }\r
+ ]\r
+ });\r
+ equals(slider.children().size(), 2);\r
+ var instance = $.data(slider[0], "slider")\r
+ equals(instance.handle.length, 2);\r
+ ok(instance.handle.jquery, "handle must be a jquery object")\r
+})
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI Accordion Test Suite</title>\r
- \r
- <link rel="Stylesheet" media="screen" href="../../../qunit/testsuite.css" />\r
- <script type="text/javascript" src="../../../jquery/src/core.js"></script>\r
- <script type="text/javascript" src="../../../jquery/src/selector.js"></script>\r
- <script type="text/javascript" src="../../../jquery/src/event.js"></script>\r
- <script type="text/javascript" src="../../../jquery/src/ajax.js"></script>\r
- <script type="text/javascript" src="../../../jquery/src/fx.js"></script>\r
- <script type="text/javascript" src="../../../jquery/src/offset.js"></script>\r
- <script type="text/javascript" src="../../../jquery/src/dimensions.js"></script>\r
-\r
- <script type="text/javascript" src="../../ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui.accordion.js"></script>\r
-\r
- <script type="text/javascript" src="../../../qunit/testrunner.js"></script>\r
- <script type="text/javascript" src="accordion.js"></script>\r
- <style type="text/css">\r
- .xerror, .error { display: none }\r
- </style>\r
-\r
-</head>\r
-<body class="flora">\r
- <h1>jQuery UI Accordion Test Suite</h1>\r
- <h2 id="banner"></h2>\r
- <h2 id="userAgent"></h2>\r
-\r
- <ol id="tests"></ol>\r
-\r
-<div id="main" style="position:absolute;top:-2000000px;">\r
-\r
- <fieldset>\r
- <legend>Standard, container is a div, header is h3 and content p</legend> \r
-\r
- <div id="list1">\r
- <a>There is one obvious advantage:</a>\r
- <div>\r
- <p>\r
- You've seen it coming!<br/>\r
- Buy now and get nothing for free!<br/>\r
- Well, at least no free beer. Perhaps a bear, if you can afford it.\r
- </p>\r
- </div>\r
- <a>Now that you've got...</a>\r
- <div>\r
- <p>\r
- your bear, you have to admit it!<br/>\r
- No, we aren't selling bears.\r
- </p>\r
- <p>\r
- We could talk about renting one.\r
- </p>\r
- </div>\r
- <a>Rent one bear, ...</a>\r
- <div>\r
- <p>\r
- get two for three beer.\r
- </p>\r
- <p>\r
- And now, for something completely different.\r
- </p>\r
- </div>\r
- </div>\r
- \r
- </fieldset>\r
- \r
- <fieldset>\r
- <legend>Navigation - Unordered List with anchors and nested lists.</legend>\r
- <p>The first item is cloned to allow the user to select it. The\r
- active element is choosen based on location.hash: Open Drums and click\r
- the first item ('Drums'), then reload the page.</p>\r
-\r
- <ul id="navigation">\r
- <li>\r
- <a class="head" href="?p=1.1.1">Guitar</a>\r
- <ul>\r
- <li><a href="?p=1.1.1.1">Electric</a></li>\r
- <li><a href="?p=1.1.1.2">Acoustic</a></li>\r
- <li><a href="?p=1.1.1.3">Amps</a></li>\r
- <li><a href="?p=1.1.1.4">Effects</a></li>\r
- <li><a href="?p=1.1.1.5">Accessories</a></li>\r
- </ul> \r
- </li>\r
- <li>\r
- <a class="head" href="?p=1.1.2">Bass</a>\r
- <ul>\r
- <li><a href="?p=1.1.2.1">Electric</a></li>\r
- <li><a href="?p=1.1.2.2">Acoustic</a></li>\r
- <li><a href="?p=1.1.2.3">Amps</a></li>\r
- <li><a href="?p=1.1.2.4">Effects</a></li>\r
- <li><a href="?p=1.1.2.5">Accessories</a></li>\r
- <li><a href="?p=1.1.2.5">Accessories</a></li>\r
- <li><a href="?p=1.1.2.5">Accessories</a></li>\r
- </ul> \r
- </li>\r
- <li>\r
- <a class="head" href="?p=1.1.3">Drums</a>\r
- <ul>\r
- <li><a href="?p=1.1.3.2">Acoustic Drums</a></li>\r
- <li><a href="?p=1.1.3.3">Electronic Drums</a></li>\r
- <li><a href="?p=1.1.3.6">Accessories</a></li>\r
- </ul> \r
- </li>\r
- </ul>\r
- \r
- </fieldset>\r
-\r
- <fieldset>\r
- <legend>With options, container is a definition list, header dt, content dd</legend>\r
- \r
- <dl id="list2">\r
- <dt class="red">Red</dt>\r
- <dd>\r
- Fancy stuff about red thingies.\r
- </dd>\r
- <dt class="green selected">Green</dt>\r
- <dd>\r
- Green! Green! Green!\r
- </dd>\r
- <dt class="blue">Blue</dt>\r
- <dd>\r
- Cool kids are blue.\r
- </dd>\r
- </dl>\r
- \r
- </fieldset>\r
-\r
- <fieldset>\r
- <legend>Divitus structure, div container, div header (class title), div\r
- content, no active on startup and can be completely closed</legend>\r
-\r
- <div id="list3">\r
- <div>\r
- <div class="title">Tennis</div>\r
- <div>\r
- One ball, two players. Lots of fun.\r
- </div>\r
- </div>\r
- <div>\r
- <div class="title">Soccer</div>\r
- <div>\r
- One ball, 22 players. Lots of fun.\r
- </div>\r
- </div>\r
- <div>\r
- <div class="title">Baseball</div>\r
- <div>\r
- Well, one ball, some guys running around, some guys hitting others with a stick.<br/>\r
- Sounds like fun, doesn't it?\r
- </div>\r
- <div>\r
- Well, apart from the running part.\r
- </div>\r
- </div>\r
- </div>\r
- \r
- </fieldset>\r
- \r
- <div id="switch">\r
- <select>\r
- <option>Switch to...</option>\r
- <option value="1">1</option>\r
- <option value="2">2</option>\r
- <option value="3">3</option>\r
- </select>\r
- <button id="close">Close all</button>\r
- Activate via selector, eg. ':first' or 'a:first': <input id="switch2" />\r
- </div>\r
-\r
- <div id="log"><div><strong>Log of the 2nd accordion</strong></div></div>\r
-</div>\r
- </body>\r
-</html>
\ No newline at end of file
+++ /dev/null
-module("accordion");\r
-\r
-jQuery.ui.accordion.defaults.animated = false;\r
-\r
-function state(accordion) {\r
- var args = $.makeArray(arguments).slice(1);\r
- $.each(args, function(i, n) {\r
- equals(n, accordion.find("div").eq(i).is(":visible"));\r
- });\r
-}\r
-\r
-test("basics", function() {\r
- state($('#list1').accordion(), 1, 0, 0);\r
-});\r
-\r
-test("autoheight", function() {\r
- $('#navigation').accordion({ header: '.head', autoheight: false });\r
- equals( 90, $('#navigation ul:first').height() );\r
- equals( 126, $('#navigation ul:eq(1)').height() );\r
- equals( 54, $('#navigation ul:last').height() );\r
- $('#navigation').accordion("destroy").accordion({ header: '.head',autoheight: true });\r
- equals( 126, $('#navigation ul:first').height() );\r
- equals( 126, $('#navigation ul:eq(1)').height() );\r
- equals( 126, $('#navigation ul:last').height() );\r
-});\r
-\r
-test("activate, numeric", function() {\r
- var ac = $('#list1').accordion({ active: 1 });\r
- state(ac, 0, 1, 0);\r
- ac.accordion("activate", 2);\r
- state(ac, 0, 0, 1);\r
- ac.accordion("activate", 0);\r
- state(ac, 1, 0, 0);\r
- ac.accordion("activate", 1);\r
- state(ac, 0, 1, 0);\r
- ac.accordion("activate", 2);\r
- state(ac, 0, 0, 1);\r
- ac.accordion("activate", -1);\r
- state(ac, 0, 0, 1);\r
-});\r
-\r
-test("activate, boolean and numeric, alwaysOpen:false", function() {\r
- var ac = $('#list1').accordion({alwaysOpen: false}).accordion("activate", 2);\r
- state(ac, 0, 0, 1);\r
- ok("x", "----")\r
- ac.accordion("activate", 0);\r
- state(ac, 1, 0, 0);\r
- ok("x", "----")\r
- ac.accordion("activate", -1);\r
- state(ac, 0, 0, 0);\r
-});\r
-\r
-test("activate, boolean, alwaysOpen:true", function() {\r
- var ac = $('#list1').accordion().accordion("activate", 2);\r
- state(ac, 0, 0, 1);\r
- ac.accordion("activate", -1);\r
- state(ac, 0, 0, 1);\r
-});\r
-\r
-test("activate, string expression", function() {\r
- var ac = $('#list1').accordion({ active: ":last" });\r
- state(ac, 0, 0, 1);\r
- ac.accordion("activate", ":first");\r
- state(ac, 1, 0, 0);\r
- ac.accordion("activate", ":eq(1)");\r
- state(ac, 0, 1, 0);\r
- ac.accordion("activate", ":last");\r
- state(ac, 0, 0, 1);\r
-});\r
-\r
-test("activate, jQuery or DOM element", function() {\r
- var ac = $('#list1').accordion({ active: $("#list1 a:last") });\r
- state(ac, 0, 0, 1);\r
- ac.accordion("activate", $("#list1 a:first"));\r
- state(ac, 1, 0, 0);\r
- ac.accordion("activate", $("#list1 a")[1]);\r
- state(ac, 0, 1, 0);\r
-});
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>\r
-<html lang="en">\r
-<head>\r
- <title>jQuery UI All Tests</title>\r
- \r
- <link rel="Stylesheet" media="screen" href="../../../qunit/testsuite.css" />\r
- <script type="text/javascript" src="../../../jquery/src/core.js"></script>\r
- <script type="text/javascript" src="../../../jquery/src/selector.js"></script>\r
- <script type="text/javascript" src="../../../jquery/src/event.js"></script>\r
- <script type="text/javascript" src="../../../jquery/src/ajax.js"></script>\r
- <script type="text/javascript" src="../../../jquery/src/fx.js"></script>\r
- <script type="text/javascript" src="../../../jquery/src/offset.js"></script>\r
- <script type="text/javascript" src="../../../jquery/src/dimensions.js"></script>\r
-\r
- <script type="text/javascript" src="../../ui.core.js"></script>\r
- <script type="text/javascript" src="../../ui.accordion.js"></script>\r
- <script type="text/javascript" src="../../ui.slider.js"></script>\r
-\r
- <script type="text/javascript" src="../../../qunit/testrunner.js"></script>\r
- <script type="text/javascript" src="accordion.js"></script>\r
- <script type="text/javascript" src="slider.js"></script>\r
- <style type="text/css">\r
- .xerror, .error { display: none }\r
- </style>\r
-\r
-</head>\r
-<body class="flora">\r
- <h1>jQuery UI All Tests</h1>\r
- <h2 id="banner"></h2>\r
- <h2 id="userAgent"></h2>\r
-\r
- <h4>Run individual testsuites or doubleclick a test below</h4>\r
- <ul>\r
- <li><a href="accordion.html">Accordion</a></li>\r
- <li><a href="slider.html">Slider</a></li>\r
- </ul>\r
-\r
- <ol id="tests"></ol>\r
-\r
-<div id="main" style="position:absolute;top:-2000000px;">\r
-\r
- <div id='slider1'></div>\r
- <div id='slider3' style="position: relative; margin: 40px; width: 217px; height: 28px; background: url(http://developer.yahoo.com/yui/examples/slider/assets/bg-fader.gif) no-repeat scroll 5px 0px;">\r
- <div class='ui-slider-handle' style='position: absolute; height: 21px; left: 0px; bottom: 0px; width: 17px; background-image: url(http://developer.yahoo.com/yui/examples/slider/assets/thumb-n.gif);'></div> \r
- </div>\r
-\r
- <fieldset>\r
- <legend>Standard, container is a div, header is h3 and content p</legend> \r
-\r
- <div id="list1">\r
- <a>There is one obvious advantage:</a>\r
- <div>\r
- <p>\r
- You've seen it coming!<br/>\r
- Buy now and get nothing for free!<br/>\r
- Well, at least no free beer. Perhaps a bear, if you can afford it.\r
- </p>\r
- </div>\r
- <a>Now that you've got...</a>\r
- <div>\r
- <p>\r
- your bear, you have to admit it!<br/>\r
- No, we aren't selling bears.\r
- </p>\r
- <p>\r
- We could talk about renting one.\r
- </p>\r
- </div>\r
- <a>Rent one bear, ...</a>\r
- <div>\r
- <p>\r
- get two for three beer.\r
- </p>\r
- <p>\r
- And now, for something completely different.\r
- </p>\r
- </div>\r
- </div>\r
- \r
- </fieldset>\r
- \r
- <fieldset>\r
- <legend>Navigation - Unordered List with anchors and nested lists.</legend>\r
- <p>The first item is cloned to allow the user to select it. The\r
- active element is choosen based on location.hash: Open Drums and click\r
- the first item ('Drums'), then reload the page.</p>\r
-\r
- <ul id="navigation">\r
- <li>\r
- <a class="head" href="?p=1.1.1">Guitar</a>\r
- <ul>\r
- <li><a href="?p=1.1.1.1">Electric</a></li>\r
- <li><a href="?p=1.1.1.2">Acoustic</a></li>\r
- <li><a href="?p=1.1.1.3">Amps</a></li>\r
- <li><a href="?p=1.1.1.4">Effects</a></li>\r
- <li><a href="?p=1.1.1.5">Accessories</a></li>\r
- </ul> \r
- </li>\r
- <li>\r
- <a class="head" href="?p=1.1.2">Bass</a>\r
- <ul>\r
- <li><a href="?p=1.1.2.1">Electric</a></li>\r
- <li><a href="?p=1.1.2.2">Acoustic</a></li>\r
- <li><a href="?p=1.1.2.3">Amps</a></li>\r
- <li><a href="?p=1.1.2.4">Effects</a></li>\r
- <li><a href="?p=1.1.2.5">Accessories</a></li>\r
- <li><a href="?p=1.1.2.5">Accessories</a></li>\r
- <li><a href="?p=1.1.2.5">Accessories</a></li>\r
- </ul> \r
- </li>\r
- <li>\r
- <a class="head" href="?p=1.1.3">Drums</a>\r
- <ul>\r
- <li><a href="?p=1.1.3.2">Acoustic Drums</a></li>\r
- <li><a href="?p=1.1.3.3">Electronic Drums</a></li>\r
- <li><a href="?p=1.1.3.6">Accessories</a></li>\r
- </ul> \r
- </li>\r
- </ul>\r
- \r
- </fieldset>\r
-\r
- <fieldset>\r
- <legend>With options, container is a definition list, header dt, content dd</legend>\r
- \r
- <dl id="list2">\r
- <dt class="red">Red</dt>\r
- <dd>\r
- Fancy stuff about red thingies.\r
- </dd>\r
- <dt class="green selected">Green</dt>\r
- <dd>\r
- Green! Green! Green!\r
- </dd>\r
- <dt class="blue">Blue</dt>\r
- <dd>\r
- Cool kids are blue.\r
- </dd>\r
- </dl>\r
- \r
- </fieldset>\r
-\r
- <fieldset>\r
- <legend>Divitus structure, div container, div header (class title), div\r
- content, no active on startup and can be completely closed</legend>\r
-\r
- <div id="list3">\r
- <div>\r
- <div class="title">Tennis</div>\r
- <div>\r
- One ball, two players. Lots of fun.\r
- </div>\r
- </div>\r
- <div>\r
- <div class="title">Soccer</div>\r
- <div>\r
- One ball, 22 players. Lots of fun.\r
- </div>\r
- </div>\r
- <div>\r
- <div class="title">Baseball</div>\r
- <div>\r
- Well, one ball, some guys running around, some guys hitting others with a stick.<br/>\r
- Sounds like fun, doesn't it?\r
- </div>\r
- <div>\r
- Well, apart from the running part.\r
- </div>\r
- </div>\r
- </div>\r
- \r
- </fieldset>\r
- \r
- <div id="switch">\r
- <select>\r
- <option>Switch to...</option>\r
- <option value="1">1</option>\r
- <option value="2">2</option>\r
- <option value="3">3</option>\r
- </select>\r
- <button id="close">Close all</button>\r
- Activate via selector, eg. ':first' or 'a:first': <input id="switch2" />\r
- </div>\r
-\r
- <div id="log"><div><strong>Log of the 2nd accordion</strong></div></div>\r
-</div>\r
- </body>\r
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>\r
-<html lang="en">\r
-<head>\r
-<meta http-equiv="Content-Language" content="en" />\r
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r
-<title>Slider Test Page</title>\r
-<link rel="Stylesheet" media="screen" href="../../../qunit/testsuite.css" />\r
-<script type="text/javascript" src="../../../jquery/src/core.js"></script>\r
-<script type="text/javascript" src="../../../jquery/src/selector.js"></script>\r
-<script type="text/javascript" src="../../../jquery/src/event.js"></script>\r
-<script type="text/javascript" src="../../../jquery/src/ajax.js"></script>\r
-<script type="text/javascript" src="../../../jquery/src/fx.js"></script>\r
-<script type="text/javascript" src="../../../jquery/src/offset.js"></script>\r
-<script type="text/javascript" src="../../../jquery/src/dimensions.js"></script>\r
-\r
-<script type="text/javascript" src="../../ui.core.js"></script>\r
-<script type="text/javascript" src="../../ui.slider.js"></script>\r
-\r
-<script type="text/javascript" src="../../../qunit/testrunner.js"></script>\r
-<script type="text/javascript" src="slider.js"></script>\r
-</head>\r
-<body>\r
-\r
- <h1 id="header">jQuery Test Suite</h1>\r
- <h2 id="banner"></h2>\r
- <h2 id="userAgent"></h2>\r
-\r
- <div id="main" style="position:absolute;top:-20000px">\r
- <div id='slider1'></div>\r
- <div id='slider3' style="position: relative; margin: 40px; width: 217px; height: 28px; background: url(http://developer.yahoo.com/yui/examples/slider/assets/bg-fader.gif) no-repeat scroll 5px 0px;">\r
- <div class='ui-slider-handle' style='position: absolute; height: 21px; left: 0px; bottom: 0px; width: 17px; background-image: url(http://developer.yahoo.com/yui/examples/slider/assets/thumb-n.gif);'></div> \r
- </div>\r
- </div>\r
- \r
- <ol id="tests"></ol>\r
- \r
-</body>\r
-</html>\r
+++ /dev/null
-$.fn.triggerKeydown = function(keyCode) {\r
- return this.trigger("keydown", [$.event.fix({event:"keydown", keyCode: keyCode, target: this[0]})]);\r
-}\r
-\r
-function assertChange(stepping, start, result, action) {\r
- return function() {\r
- expect(1);\r
- var slider = $("#slider3").slider({\r
- stepping: stepping,\r
- startValue: start,\r
- min: 0,\r
- max: 1000,\r
- change: function(e, ui) {\r
- equals(ui.value, result, "changed to " + ui.value);\r
- }\r
- });\r
- action.apply(slider);\r
- }\r
-}\r
-\r
-module("slider: single handle")\r
-\r
-test("change one step via keydown", assertChange(1, undefined, 1, function() {\r
- this.find("a").triggerKeydown("39");\r
-}))\r
-test("change - 10 steps via keydown", assertChange(10, 20, 10, function() {\r
- this.find("a").triggerKeydown("37");\r
-}))\r
-test("change +10 steps via keydown", assertChange(10, 20, 30, function() {\r
- this.find("a").triggerKeydown("39");\r
-}))\r
-\r
-test("moveTo, absolute value", assertChange(1, 1, 10, function() {\r
- this.slider("moveTo", 10);\r
-}))\r
-\r
-test("moveTo, absolute value as string", assertChange(1, 1, 10, function() {\r
- this.slider("moveTo", "10");\r
-}))\r
-\r
-test("moveTo, absolute value, below min", assertChange(1, 1, 0, function() {\r
- this.slider("moveTo", -10);\r
-}))\r
-\r
-test("moveTo, relative positive value", assertChange(1, 1, 11, function() {\r
- this.slider("moveTo", "+=10");\r
-}))\r
-\r
-test("moveTo, relative positive value, above max", assertChange(1, 10, 1000, function() {\r
- this.slider("moveTo", "+=2000");\r
-}))\r
-\r
-test("moveTo, relative negative value", assertChange(1, 20, 10, function() {\r
- this.slider("moveTo", "-=10");\r
-}))\r
-\r
-test("options update min/max", function() {\r
- expect(2);\r
- var slider = $("#slider3").slider({\r
- stepping: 1,\r
- startValue: 1\r
- });\r
- slider.slider("moveTo", "-=10");\r
- equals(slider.slider("value"), 0);\r
- slider.data("min.slider", -10);\r
- slider.slider("moveTo", "-=20");\r
- equals(slider.slider("value"), -10);\r
-})\r
-\r
-module("slider: setup and teardown");\r
-\r
-test("destroy and recreate", function() {\r
- expect(3)\r
- var slider = $("#slider3").slider();\r
- slider.slider("moveTo", "+=20");\r
- equals(slider.slider("value"), 20);\r
- slider.slider("destroy");\r
- \r
- slider.slider("moveTo", "+=30");\r
- ok(true, "nothing happens after slider is destroyed");\r
- \r
- slider.slider().slider("moveTo", "30");\r
- \r
- equals(Math.round(slider.slider("value")), 30);\r
-})\r
-\r
-test("handle creation", function() {\r
- var slider = $("#slider1");\r
- equals(slider.children().size(), 0);\r
- slider.slider({\r
- handles: [\r
- { start: 0 },\r
- { start: 10 }\r
- ]\r
- });\r
- equals(slider.children().size(), 2);\r
- var instance = $.data(slider[0], "slider")\r
- equals(instance.handle.length, 2);\r
- ok(instance.handle.jquery, "handle must be a jquery object")\r
-})
\ No newline at end of file
projects / jquery-ui.git / commitdiff