diff options
| author | Richard Worth <rdworth@gmail.com> | 2008-06-04 02:34:33 +0000 |
|---|---|---|
| committer | Richard Worth <rdworth@gmail.com> | 2008-06-04 02:34:33 +0000 |
| commit | 26c16a7e6fc66107819fd9900bc7e7daec561a7f (patch) | |
| tree | 3856267f99dc2645ba9bfa897863239c95f8dfe9 /ui/tests | |
| parent | 9caa12ad6521770dd5217dc1b1a77345a7c90418 (diff) | |
| download | jquery-ui-26c16a7e6fc66107819fd9900bc7e7daec561a7f.tar.gz jquery-ui-26c16a7e6fc66107819fd9900bc7e7daec561a7f.zip | |
Set svn:eol-style to native
Diffstat (limited to 'ui/tests')
| -rw-r--r-- | ui/tests/accordion.html | 338 | ||||
| -rw-r--r-- | ui/tests/accordion.js | 154 | ||||
| -rw-r--r-- | ui/tests/all.html | 362 | ||||
| -rw-r--r-- | ui/tests/autodrag.html | 308 | ||||
| -rw-r--r-- | ui/tests/draggable.html | 80 | ||||
| -rw-r--r-- | ui/tests/draggable.js | 644 | ||||
| -rw-r--r-- | ui/tests/slider.html | 64 | ||||
| -rw-r--r-- | ui/tests/slider.js | 198 | ||||
| -rw-r--r-- | ui/tests/ui.testmouse.js | 342 |
9 files changed, 1245 insertions, 1245 deletions
diff --git a/ui/tests/accordion.html b/ui/tests/accordion.html index f2792df81..66913ba2b 100644 --- a/ui/tests/accordion.html +++ b/ui/tests/accordion.html @@ -1,170 +1,170 @@ -<!DOCTYPE html>
-<html lang="en">
-<head>
- <title>jQuery UI Accordion Test Suite</title>
-
- <link rel="stylesheet" href="../../qunit/testsuite.css" type="text/css" media="screen">
- <script type="text/javascript" src="../../jquery/jquery-1.2.6.js"></script>
-
- <script type="text/javascript" src="../source/ui.core.js"></script>
- <script type="text/javascript" src="../source/ui.accordion.js"></script>
-
- <script type="text/javascript" src="../../qunit/testrunner.js"></script>
-
- <script type="text/javascript" src="accordion.js"></script>
- <style type="text/css">
- .xerror, .error { display: none }
- </style>
-
-</head>
-<body class="flora">
- <h1>jQuery UI Accordion Test Suite</h1>
- <h2 id="banner"></h2>
- <h2 id="userAgent"></h2>
-
- <ol id="tests"></ol>
-
-<div id="main" style="position:absolute;top:-2000000px;">
-
- <fieldset>
- <legend>Standard, container is a div, header is h3 and content p</legend>
-
- <div id="list1">
- <a>There is one obvious advantage:</a>
- <div>
- <p>
- You've seen it coming!<br/>
- Buy now and get nothing for free!<br/>
- Well, at least no free beer. Perhaps a bear, if you can afford it.
- </p>
- </div>
- <a>Now that you've got...</a>
- <div>
- <p>
- your bear, you have to admit it!<br/>
- No, we aren't selling bears.
- </p>
- <p>
- We could talk about renting one.
- </p>
- </div>
- <a>Rent one bear, ...</a>
- <div>
- <p>
- get two for three beer.
- </p>
- <p>
- And now, for something completely different.
- </p>
- </div>
- </div>
-
- </fieldset>
-
- <fieldset>
- <legend>Navigation - Unordered List with anchors and nested lists.</legend>
- <p>The first item is cloned to allow the user to select it. The
- active element is choosen based on location.hash: Open Drums and click
- the first item ('Drums'), then reload the page.</p>
-
- <ul id="navigation">
- <li>
- <a class="head" href="?p=1.1.1">Guitar</a>
- <ul>
- <li><a href="?p=1.1.1.1">Electric</a></li>
- <li><a href="?p=1.1.1.2">Acoustic</a></li>
- <li><a href="?p=1.1.1.3">Amps</a></li>
- <li><a href="?p=1.1.1.4">Effects</a></li>
- <li><a href="?p=1.1.1.5">Accessories</a></li>
- </ul>
- </li>
- <li>
- <a class="head" href="?p=1.1.2">Bass</a>
- <ul>
- <li><a href="?p=1.1.2.1">Electric</a></li>
- <li><a href="?p=1.1.2.2">Acoustic</a></li>
- <li><a href="?p=1.1.2.3">Amps</a></li>
- <li><a href="?p=1.1.2.4">Effects</a></li>
- <li><a href="?p=1.1.2.5">Accessories</a></li>
- <li><a href="?p=1.1.2.5">Accessories</a></li>
- <li><a href="?p=1.1.2.5">Accessories</a></li>
- </ul>
- </li>
- <li>
- <a class="head" href="?p=1.1.3">Drums</a>
- <ul>
- <li><a href="?p=1.1.3.2">Acoustic Drums</a></li>
- <li><a href="?p=1.1.3.3">Electronic Drums</a></li>
- <li><a href="?p=1.1.3.6">Accessories</a></li>
- </ul>
- </li>
- </ul>
-
- </fieldset>
-
- <fieldset>
- <legend>With options, container is a definition list, header dt, content dd</legend>
-
- <dl id="list2">
- <dt class="red">Red</dt>
- <dd>
- Fancy stuff about red thingies.
- </dd>
- <dt class="green selected">Green</dt>
- <dd>
- Green! Green! Green!
- </dd>
- <dt class="blue">Blue</dt>
- <dd>
- Cool kids are blue.
- </dd>
- </dl>
-
- </fieldset>
-
- <fieldset>
- <legend>Divitus structure, div container, div header (class title), div
- content, no active on startup and can be completely closed</legend>
-
- <div id="list3">
- <div>
- <div class="title">Tennis</div>
- <div>
- One ball, two players. Lots of fun.
- </div>
- </div>
- <div>
- <div class="title">Soccer</div>
- <div>
- One ball, 22 players. Lots of fun.
- </div>
- </div>
- <div>
- <div class="title">Baseball</div>
- <div>
- Well, one ball, some guys running around, some guys hitting others with a stick.<br/>
- Sounds like fun, doesn't it?
- </div>
- <div>
- Well, apart from the running part.
- </div>
- </div>
- </div>
-
- </fieldset>
-
- <div id="switch">
- <select>
- <option>Switch to...</option>
- <option value="1">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- </select>
- <button id="close">Close all</button>
- Activate via selector, eg. ':first' or 'a:first': <input id="switch2" />
- </div>
-
- <div id="log"><div><strong>Log of the 2nd accordion</strong></div></div>
-</div>
- </body>
+<!DOCTYPE html> +<html lang="en"> +<head> + <title>jQuery UI Accordion Test Suite</title> + + <link rel="stylesheet" href="../../qunit/testsuite.css" type="text/css" media="screen"> + <script type="text/javascript" src="../../jquery/jquery-1.2.6.js"></script> + + <script type="text/javascript" src="../source/ui.core.js"></script> + <script type="text/javascript" src="../source/ui.accordion.js"></script> + + <script type="text/javascript" src="../../qunit/testrunner.js"></script> + + <script type="text/javascript" src="accordion.js"></script> + <style type="text/css"> + .xerror, .error { display: none } + </style> + +</head> +<body class="flora"> + <h1>jQuery UI Accordion Test Suite</h1> + <h2 id="banner"></h2> + <h2 id="userAgent"></h2> + + <ol id="tests"></ol> + +<div id="main" style="position:absolute;top:-2000000px;"> + + <fieldset> + <legend>Standard, container is a div, header is h3 and content p</legend> + + <div id="list1"> + <a>There is one obvious advantage:</a> + <div> + <p> + You've seen it coming!<br/> + Buy now and get nothing for free!<br/> + Well, at least no free beer. Perhaps a bear, if you can afford it. + </p> + </div> + <a>Now that you've got...</a> + <div> + <p> + your bear, you have to admit it!<br/> + No, we aren't selling bears. + </p> + <p> + We could talk about renting one. + </p> + </div> + <a>Rent one bear, ...</a> + <div> + <p> + get two for three beer. + </p> + <p> + And now, for something completely different. + </p> + </div> + </div> + + </fieldset> + + <fieldset> + <legend>Navigation - Unordered List with anchors and nested lists.</legend> + <p>The first item is cloned to allow the user to select it. The + active element is choosen based on location.hash: Open Drums and click + the first item ('Drums'), then reload the page.</p> + + <ul id="navigation"> + <li> + <a class="head" href="?p=1.1.1">Guitar</a> + <ul> + <li><a href="?p=1.1.1.1">Electric</a></li> + <li><a href="?p=1.1.1.2">Acoustic</a></li> + <li><a href="?p=1.1.1.3">Amps</a></li> + <li><a href="?p=1.1.1.4">Effects</a></li> + <li><a href="?p=1.1.1.5">Accessories</a></li> + </ul> + </li> + <li> + <a class="head" href="?p=1.1.2">Bass</a> + <ul> + <li><a href="?p=1.1.2.1">Electric</a></li> + <li><a href="?p=1.1.2.2">Acoustic</a></li> + <li><a href="?p=1.1.2.3">Amps</a></li> + <li><a href="?p=1.1.2.4">Effects</a></li> + <li><a href="?p=1.1.2.5">Accessories</a></li> + <li><a href="?p=1.1.2.5">Accessories</a></li> + <li><a href="?p=1.1.2.5">Accessories</a></li> + </ul> + </li> + <li> + <a class="head" href="?p=1.1.3">Drums</a> + <ul> + <li><a href="?p=1.1.3.2">Acoustic Drums</a></li> + <li><a href="?p=1.1.3.3">Electronic Drums</a></li> + <li><a href="?p=1.1.3.6">Accessories</a></li> + </ul> + </li> + </ul> + + </fieldset> + + <fieldset> + <legend>With options, container is a definition list, header dt, content dd</legend> + + <dl id="list2"> + <dt class="red">Red</dt> + <dd> + Fancy stuff about red thingies. + </dd> + <dt class="green selected">Green</dt> + <dd> + Green! Green! Green! + </dd> + <dt class="blue">Blue</dt> + <dd> + Cool kids are blue. + </dd> + </dl> + + </fieldset> + + <fieldset> + <legend>Divitus structure, div container, div header (class title), div + content, no active on startup and can be completely closed</legend> + + <div id="list3"> + <div> + <div class="title">Tennis</div> + <div> + One ball, two players. Lots of fun. + </div> + </div> + <div> + <div class="title">Soccer</div> + <div> + One ball, 22 players. Lots of fun. + </div> + </div> + <div> + <div class="title">Baseball</div> + <div> + Well, one ball, some guys running around, some guys hitting others with a stick.<br/> + Sounds like fun, doesn't it? + </div> + <div> + Well, apart from the running part. + </div> + </div> + </div> + + </fieldset> + + <div id="switch"> + <select> + <option>Switch to...</option> + <option value="1">1</option> + <option value="2">2</option> + <option value="3">3</option> + </select> + <button id="close">Close all</button> + Activate via selector, eg. ':first' or 'a:first': <input id="switch2" /> + </div> + + <div id="log"><div><strong>Log of the 2nd accordion</strong></div></div> +</div> + </body> </html>
\ No newline at end of file diff --git a/ui/tests/accordion.js b/ui/tests/accordion.js index c0a42697a..c0e3edfc5 100644 --- a/ui/tests/accordion.js +++ b/ui/tests/accordion.js @@ -1,78 +1,78 @@ -module("accordion");
-
-jQuery.ui.accordion.defaults.animated = false;
-
-function state(accordion) {
- var args = $.makeArray(arguments).slice(1);
- $.each(args, function(i, n) {
- equals(n, accordion.find("div").eq(i).is(":visible"));
- });
-}
-
-test("basics", function() {
- state($('#list1').accordion(), 1, 0, 0);
-});
-
-test("autoheight", function() {
- $('#navigation').accordion({ header: '.head', autoHeight: false });
- equals( 90, $('#navigation ul:first').height() );
- equals( 126, $('#navigation ul:eq(1)').height() );
- equals( 54, $('#navigation ul:last').height() );
- $('#navigation').accordion("destroy").accordion({ header: '.head', autoHeight: true });
- equals( 126, $('#navigation ul:first').height() );
- equals( 126, $('#navigation ul:eq(1)').height() );
- equals( 126, $('#navigation ul:last').height() );
-});
-
-test("activate, numeric", function() {
- var ac = $('#list1').accordion({ active: 1 });
- state(ac, 0, 1, 0);
- ac.accordion("activate", 2);
- state(ac, 0, 0, 1);
- ac.accordion("activate", 0);
- state(ac, 1, 0, 0);
- ac.accordion("activate", 1);
- state(ac, 0, 1, 0);
- ac.accordion("activate", 2);
- state(ac, 0, 0, 1);
- ac.accordion("activate", -1);
- state(ac, 0, 0, 1);
-});
-
-test("activate, boolean and numeric, alwaysOpen:false", function() {
- var ac = $('#list1').accordion({alwaysOpen: false}).accordion("activate", 2);
- state(ac, 0, 0, 1);
- ok("x", "----");
- ac.accordion("activate", 0);
- state(ac, 1, 0, 0);
- ok("x", "----");
- ac.accordion("activate", -1);
- state(ac, 0, 0, 0);
-});
-
-test("activate, boolean, alwaysOpen:true", function() {
- var ac = $('#list1').accordion().accordion("activate", 2);
- state(ac, 0, 0, 1);
- ac.accordion("activate", -1);
- state(ac, 0, 0, 1);
-});
-
-test("activate, string expression", function() {
- var ac = $('#list1').accordion({ active: ":last" });
- state(ac, 0, 0, 1);
- ac.accordion("activate", ":first");
- state(ac, 1, 0, 0);
- ac.accordion("activate", ":eq(1)");
- state(ac, 0, 1, 0);
- ac.accordion("activate", ":last");
- state(ac, 0, 0, 1);
-});
-
-test("activate, jQuery or DOM element", function() {
- var ac = $('#list1').accordion({ active: $("#list1 a:last") });
- state(ac, 0, 0, 1);
- ac.accordion("activate", $("#list1 a:first"));
- state(ac, 1, 0, 0);
- ac.accordion("activate", $("#list1 a")[1]);
- state(ac, 0, 1, 0);
+module("accordion"); + +jQuery.ui.accordion.defaults.animated = false; + +function state(accordion) { + var args = $.makeArray(arguments).slice(1); + $.each(args, function(i, n) { + equals(n, accordion.find("div").eq(i).is(":visible")); + }); +} + +test("basics", function() { + state($('#list1').accordion(), 1, 0, 0); +}); + +test("autoheight", function() { + $('#navigation').accordion({ header: '.head', autoHeight: false }); + equals( 90, $('#navigation ul:first').height() ); + equals( 126, $('#navigation ul:eq(1)').height() ); + equals( 54, $('#navigation ul:last').height() ); + $('#navigation').accordion("destroy").accordion({ header: '.head', autoHeight: true }); + equals( 126, $('#navigation ul:first').height() ); + equals( 126, $('#navigation ul:eq(1)').height() ); + equals( 126, $('#navigation ul:last').height() ); +}); + +test("activate, numeric", function() { + var ac = $('#list1').accordion({ active: 1 }); + state(ac, 0, 1, 0); + ac.accordion("activate", 2); + state(ac, 0, 0, 1); + ac.accordion("activate", 0); + state(ac, 1, 0, 0); + ac.accordion("activate", 1); + state(ac, 0, 1, 0); + ac.accordion("activate", 2); + state(ac, 0, 0, 1); + ac.accordion("activate", -1); + state(ac, 0, 0, 1); +}); + +test("activate, boolean and numeric, alwaysOpen:false", function() { + var ac = $('#list1').accordion({alwaysOpen: false}).accordion("activate", 2); + state(ac, 0, 0, 1); + ok("x", "----"); + ac.accordion("activate", 0); + state(ac, 1, 0, 0); + ok("x", "----"); + ac.accordion("activate", -1); + state(ac, 0, 0, 0); +}); + +test("activate, boolean, alwaysOpen:true", function() { + var ac = $('#list1').accordion().accordion("activate", 2); + state(ac, 0, 0, 1); + ac.accordion("activate", -1); + state(ac, 0, 0, 1); +}); + +test("activate, string expression", function() { + var ac = $('#list1').accordion({ active: ":last" }); + state(ac, 0, 0, 1); + ac.accordion("activate", ":first"); + state(ac, 1, 0, 0); + ac.accordion("activate", ":eq(1)"); + state(ac, 0, 1, 0); + ac.accordion("activate", ":last"); + state(ac, 0, 0, 1); +}); + +test("activate, jQuery or DOM element", function() { + var ac = $('#list1').accordion({ active: $("#list1 a:last") }); + state(ac, 0, 0, 1); + ac.accordion("activate", $("#list1 a:first")); + state(ac, 1, 0, 0); + ac.accordion("activate", $("#list1 a")[1]); + state(ac, 0, 1, 0); });
\ No newline at end of file diff --git a/ui/tests/all.html b/ui/tests/all.html index 4ad64b998..82000437d 100644 --- a/ui/tests/all.html +++ b/ui/tests/all.html @@ -1,182 +1,182 @@ -<!DOCTYPE html>
-<html lang="en">
-<head>
- <title>jQuery UI All Tests</title>
- <link rel="stylesheet" href="../../qunit/testsuite.css" type="text/css" media="screen">
- <script type="text/javascript" src="../../jquery/jquery-1.2.6.js"></script>
-
- <script type="text/javascript" src="../source/ui.core.js"></script>
- <script type="text/javascript" src="../source/ui.accordion.js"></script>
- <script type="text/javascript" src="../source/ui.slider.js"></script>
-
- <script type="text/javascript" src="../../qunit/testrunner.js"></script>
-
- <script type="text/javascript" src="accordion.js"></script>
- <script type="text/javascript" src="slider.js"></script>
- <style type="text/css">
- .xerror, .error { display: none }
- </style>
-
-</head>
-<body class="flora">
- <h1>jQuery UI All Tests</h1>
- <h2 id="banner"></h2>
- <h2 id="userAgent"></h2>
-
- <h4>Run individual testsuites or doubleclick a test below</h4>
- <ul>
- <li><a href="accordion.html">Accordion</a></li>
- <li><a href="slider.html">Slider</a></li>
- </ul>
-
- <ol id="tests"></ol>
-
-<div id="main" style="position:absolute;top:-2000000px;">
-
- <div id='slider1'></div>
- <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;">
- <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>
- </div>
-
- <fieldset>
- <legend>Standard, container is a div, header is h3 and content p</legend>
-
- <div id="list1">
- <a>There is one obvious advantage:</a>
- <div>
- <p>
- You've seen it coming!<br/>
- Buy now and get nothing for free!<br/>
- Well, at least no free beer. Perhaps a bear, if you can afford it.
- </p>
- </div>
- <a>Now that you've got...</a>
- <div>
- <p>
- your bear, you have to admit it!<br/>
- No, we aren't selling bears.
- </p>
- <p>
- We could talk about renting one.
- </p>
- </div>
- <a>Rent one bear, ...</a>
- <div>
- <p>
- get two for three beer.
- </p>
- <p>
- And now, for something completely different.
- </p>
- </div>
- </div>
-
- </fieldset>
-
- <fieldset>
- <legend>Navigation - Unordered List with anchors and nested lists.</legend>
- <p>The first item is cloned to allow the user to select it. The
- active element is choosen based on location.hash: Open Drums and click
- the first item ('Drums'), then reload the page.</p>
-
- <ul id="navigation">
- <li>
- <a class="head" href="?p=1.1.1">Guitar</a>
- <ul>
- <li><a href="?p=1.1.1.1">Electric</a></li>
- <li><a href="?p=1.1.1.2">Acoustic</a></li>
- <li><a href="?p=1.1.1.3">Amps</a></li>
- <li><a href="?p=1.1.1.4">Effects</a></li>
- <li><a href="?p=1.1.1.5">Accessories</a></li>
- </ul>
- </li>
- <li>
- <a class="head" href="?p=1.1.2">Bass</a>
- <ul>
- <li><a href="?p=1.1.2.1">Electric</a></li>
- <li><a href="?p=1.1.2.2">Acoustic</a></li>
- <li><a href="?p=1.1.2.3">Amps</a></li>
- <li><a href="?p=1.1.2.4">Effects</a></li>
- <li><a href="?p=1.1.2.5">Accessories</a></li>
- <li><a href="?p=1.1.2.5">Accessories</a></li>
- <li><a href="?p=1.1.2.5">Accessories</a></li>
- </ul>
- </li>
- <li>
- <a class="head" href="?p=1.1.3">Drums</a>
- <ul>
- <li><a href="?p=1.1.3.2">Acoustic Drums</a></li>
- <li><a href="?p=1.1.3.3">Electronic Drums</a></li>
- <li><a href="?p=1.1.3.6">Accessories</a></li>
- </ul>
- </li>
- </ul>
-
- </fieldset>
-
- <fieldset>
- <legend>With options, container is a definition list, header dt, content dd</legend>
-
- <dl id="list2">
- <dt class="red">Red</dt>
- <dd>
- Fancy stuff about red thingies.
- </dd>
- <dt class="green selected">Green</dt>
- <dd>
- Green! Green! Green!
- </dd>
- <dt class="blue">Blue</dt>
- <dd>
- Cool kids are blue.
- </dd>
- </dl>
-
- </fieldset>
-
- <fieldset>
- <legend>Divitus structure, div container, div header (class title), div
- content, no active on startup and can be completely closed</legend>
-
- <div id="list3">
- <div>
- <div class="title">Tennis</div>
- <div>
- One ball, two players. Lots of fun.
- </div>
- </div>
- <div>
- <div class="title">Soccer</div>
- <div>
- One ball, 22 players. Lots of fun.
- </div>
- </div>
- <div>
- <div class="title">Baseball</div>
- <div>
- Well, one ball, some guys running around, some guys hitting others with a stick.<br/>
- Sounds like fun, doesn't it?
- </div>
- <div>
- Well, apart from the running part.
- </div>
- </div>
- </div>
-
- </fieldset>
-
- <div id="switch">
- <select>
- <option>Switch to...</option>
- <option value="1">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- </select>
- <button id="close">Close all</button>
- Activate via selector, eg. ':first' or 'a:first': <input id="switch2" />
- </div>
-
- <div id="log"><div><strong>Log of the 2nd accordion</strong></div></div>
-</div>
- </body>
+<!DOCTYPE html> +<html lang="en"> +<head> + <title>jQuery UI All Tests</title> + <link rel="stylesheet" href="../../qunit/testsuite.css" type="text/css" media="screen"> + <script type="text/javascript" src="../../jquery/jquery-1.2.6.js"></script> + + <script type="text/javascript" src="../source/ui.core.js"></script> + <script type="text/javascript" src="../source/ui.accordion.js"></script> + <script type="text/javascript" src="../source/ui.slider.js"></script> + + <script type="text/javascript" src="../../qunit/testrunner.js"></script> + + <script type="text/javascript" src="accordion.js"></script> + <script type="text/javascript" src="slider.js"></script> + <style type="text/css"> + .xerror, .error { display: none } + </style> + +</head> +<body class="flora"> + <h1>jQuery UI All Tests</h1> + <h2 id="banner"></h2> + <h2 id="userAgent"></h2> + + <h4>Run individual testsuites or doubleclick a test below</h4> + <ul> + <li><a href="accordion.html">Accordion</a></li> + <li><a href="slider.html">Slider</a></li> + </ul> + + <ol id="tests"></ol> + +<div id="main" style="position:absolute;top:-2000000px;"> + + <div id='slider1'></div> + <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;"> + <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> + </div> + + <fieldset> + <legend>Standard, container is a div, header is h3 and content p</legend> + + <div id="list1"> + <a>There is one obvious advantage:</a> + <div> + <p> + You've seen it coming!<br/> + Buy now and get nothing for free!<br/> + Well, at least no free beer. Perhaps a bear, if you can afford it. + </p> + </div> + <a>Now that you've got...</a> + <div> + <p> + your bear, you have to admit it!<br/> + No, we aren't selling bears. + </p> + <p> + We could talk about renting one. + </p> + </div> + <a>Rent one bear, ...</a> + <div> + <p> + get two for three beer. + </p> + <p> + And now, for something completely different. + </p> + </div> + </div> + + </fieldset> + + <fieldset> + <legend>Navigation - Unordered List with anchors and nested lists.</legend> + <p>The first item is cloned to allow the user to select it. The + active element is choosen based on location.hash: Open Drums and click + the first item ('Drums'), then reload the page.</p> + + <ul id="navigation"> + <li> + <a class="head" href="?p=1.1.1">Guitar</a> + <ul> + <li><a href="?p=1.1.1.1">Electric</a></li> + <li><a href="?p=1.1.1.2">Acoustic</a></li> + <li><a href="?p=1.1.1.3">Amps</a></li> + <li><a href="?p=1.1.1.4">Effects</a></li> + <li><a href="?p=1.1.1.5">Accessories</a></li> + </ul> + </li> + <li> + <a class="head" href="?p=1.1.2">Bass</a> + <ul> + <li><a href="?p=1.1.2.1">Electric</a></li> + <li><a href="?p=1.1.2.2">Acoustic</a></li> + <li><a href="?p=1.1.2.3">Amps</a></li> + <li><a href="?p=1.1.2.4">Effects</a></li> + <li><a href="?p=1.1.2.5">Accessories</a></li> + <li><a href="?p=1.1.2.5">Accessories</a></li> + <li><a href="?p=1.1.2.5">Accessories</a></li> + </ul> + </li> + <li> + <a class="head" href="?p=1.1.3">Drums</a> + <ul> + <li><a href="?p=1.1.3.2">Acoustic Drums</a></li> + <li><a href="?p=1.1.3.3">Electronic Drums</a></li> + <li><a href="?p=1.1.3.6">Accessories</a></li> + </ul> + </li> + </ul> + + </fieldset> + + <fieldset> + <legend>With options, container is a definition list, header dt, content dd</legend> + + <dl id="list2"> + <dt class="red">Red</dt> + <dd> + Fancy stuff about red thingies. + </dd> + <dt class="green selected">Green</dt> + <dd> + Green! Green! Green! + </dd> + <dt class="blue">Blue</dt> + <dd> + Cool kids are blue. + </dd> + </dl> + + </fieldset> + + <fieldset> + <legend>Divitus structure, div container, div header (class title), div + content, no active on startup and can be completely closed</legend> + + <div id="list3"> + <div> + <div class="title">Tennis</div> + <div> + One ball, two players. Lots of fun. + </div> + </div> + <div> + <div class="title">Soccer</div> + <div> + One ball, 22 players. Lots of fun. + </div> + </div> + <div> + <div class="title">Baseball</div> + <div> + Well, one ball, some guys running around, some guys hitting others with a stick.<br/> + Sounds like fun, doesn't it? + </div> + <div> + Well, apart from the running part. + </div> + </div> + </div> + + </fieldset> + + <div id="switch"> + <select> + <option>Switch to...</option> + <option value="1">1</option> + <option value="2">2</option> + <option value="3">3</option> + </select> + <button id="close">Close all</button> + Activate via selector, eg. ':first' or 'a:first': <input id="switch2" /> + </div> + + <div id="log"><div><strong>Log of the 2nd accordion</strong></div></div> +</div> + </body> </html>
\ No newline at end of file diff --git a/ui/tests/autodrag.html b/ui/tests/autodrag.html index 8f436576f..df7590761 100644 --- a/ui/tests/autodrag.html +++ b/ui/tests/autodrag.html @@ -1,154 +1,154 @@ -<!DOCTYPE html>
-<html lang="en">
-<head>
- <title>jQuery UI - Automated Tests</title>
- <script type="text/javascript" src="../../jquery/jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/source/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/source/ui.draggable.js"></script>
- <script type="text/javascript" src="../../ui/source/ui.selectable.js"></script>
-
- <script type="text/javascript" src="ui.testmouse.js"></script>
-
-<style type="text/css">
-
-html, body { height: 100%; }
-#main { height: 100%; }
-
-#foo { position: relative; margin: 10px; padding: 10px; border: 3px solid gray; width: 200px; height: 200px; background: #eef; text-align: center; }
-#foo * { margin: 4px; }
-.ui-draggable .msg-missing-class { display: none !important; background: red; color: white; font-weight: bold; }
-.ui-draggable .msg-enabled { display: block; }
-.ui-draggable .msg-disabled { display: none; }
-.ui-draggable-disabled .msg-enabled { display: none !important; }
-.ui-draggable-disabled .msg-disabled { display: block !important; }
-.ui-selectable .msg-missing-class { display: none !important; background: red; color: white; font-weight: bold; }
-.ui-selectable .msg-enabled { display: block; }
-.ui-selectable .msg-disabled { display: none; }
-.ui-selectable-disabled .msg-enabled { display: none !important; }
-.ui-selectable-disabled .msg-disabled { display: block !important; }
-//.ui-selectee { border: 1px solid white; }
-.ui-selecting { background: Highlight; color: HighlightText; outline: 1px dotted white; }
-.ui-selected { background: Highlight; color: HighlightText; outline: 1px dotted black; }
-
-</style>
-
-<script type="text/javascript">
-$(function() {
-
- var speed = "fast";
-
- var queue;
- var start = function() {
- queue = tests.slice().reverse(); // clone
- $("#status").text("Running...");
- nextTest();
- }
- var stop = function() {
- $("#status").text("Ready");
- teardown();
- }
-
- var tests = [];
- var nextTest = function() {
- if (queue.length) {
- var nTest = queue.pop();
- teardown(function() {
- setupAndRun(nTest);
- });
- } else {
- stop();
- }
- }
-
- var num = 0;
-
- var addTest = function(fn) {
- num += 1;
- tests.push({
- num: num,
- fn: fn
- });
- }
-
- var setupAndRun = function(nTest) {
- $('#testnum').text(nTest.num);
- $('#sandbox').hide()
- .append('<ul id="foo">' +
- '<li class="msg-missing-class">THIS TEXT SHOULD NOT BE VISIBLE</li>' +
- '<li class="msg-enabled">enabled</li>' +
- '<li class="msg-disabled">disabled</li>' +
- '<li>Item 2</li>' +
- '<li>Item 3</li>' +
- '<li>Item 4</li>' +
- '<li>Item 5</li>' +
- '<li>Item 6</li>' +
- '<li>Item 7</li>' +
- '<li>Item 8</li>' +
- '</ul>')
- $('#foo').testMouse({
- speed: speed,
- complete: nextTest
- });
- $('#sandbox').show();
- nTest.fn.apply(nTest.fn);
- }
-
- var teardown = function(fn) {
- $('#sandbox').hide();
- $('#foo').remove();
- if ($.isFunction(fn)) fn.apply();
- }
- var plugin = "draggable";
- plugin = "selectable"
- var testFn = "testMouse";
- var testArgs = ["drag", 40, 50];
- //1
- addTest(function() { $("#foo")[plugin]()[testFn].apply($("#foo"), testArgs); });
- //2
- addTest(function() { $("#foo")[plugin]({ disabled: true })[testFn].apply($("#foo"), testArgs); });
- addTest(function() { $("#foo")[plugin]({ disabled: false })[testFn].apply($("#foo"), testArgs); });
- //4
- addTest(function() { $("#foo")[plugin]()[plugin]('disable')[testFn].apply($("#foo"), testArgs); });
- addTest(function() { $("#foo")[plugin]()[plugin]('enable')[testFn].apply($("#foo"), testArgs); });
- //6
- addTest(function() { $("#foo")[plugin]()[plugin]('enable')[plugin]('disable')[testFn].apply($("#foo"), testArgs); });
- addTest(function() { $("#foo")[plugin]()[plugin]('disable')[plugin]('enable')[testFn].apply($("#foo"), testArgs); });
- //8
- addTest(function() { $("#foo")[plugin]({ disabled: false })[plugin]('disable')[testFn].apply($("#foo"), testArgs); });
- addTest(function() { $("#foo")[plugin]({ disabled: true })[plugin]('enable')[testFn].apply($("#foo"), testArgs); });
- //10
- addTest(function() { $("#foo")[plugin]({ disabled: false }).data('disabled.' + plugin, true)[testFn].apply($("#foo"), testArgs); });
- addTest(function() { $("#foo")[plugin]({ disabled: true }).data('disabled.' + plugin, false)[testFn].apply($("#foo"), testArgs); });
-
- $('#begin').click(function() {
- start();
- });
-
-});
-</script>
-
-</head>
-<body>
-
-<div id="main">
-
- <h1>jQuery UI - Automated Tests</h1>
-
- <div>
- Status: <span id="status">Ready</span>
- </div>
-
- <div>
- Test: <span id="testnum"></span>
- </div>
-
- <div style="height: 3em;"><button id="begin">Run Test</button></div>
-
- <div id="sandbox">
-
- </div>
-
-</div>
-
-</body>
-</html>
+<!DOCTYPE html> +<html lang="en"> +<head> + <title>jQuery UI - Automated Tests</title> + <script type="text/javascript" src="../../jquery/jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/source/ui.core.js"></script> + <script type="text/javascript" src="../../ui/source/ui.draggable.js"></script> + <script type="text/javascript" src="../../ui/source/ui.selectable.js"></script> + + <script type="text/javascript" src="ui.testmouse.js"></script> + +<style type="text/css"> + +html, body { height: 100%; } +#main { height: 100%; } + +#foo { position: relative; margin: 10px; padding: 10px; border: 3px solid gray; width: 200px; height: 200px; background: #eef; text-align: center; } +#foo * { margin: 4px; } +.ui-draggable .msg-missing-class { display: none !important; background: red; color: white; font-weight: bold; } +.ui-draggable .msg-enabled { display: block; } +.ui-draggable .msg-disabled { display: none; } +.ui-draggable-disabled .msg-enabled { display: none !important; } +.ui-draggable-disabled .msg-disabled { display: block !important; } +.ui-selectable .msg-missing-class { display: none !important; background: red; color: white; font-weight: bold; } +.ui-selectable .msg-enabled { display: block; } +.ui-selectable .msg-disabled { display: none; } +.ui-selectable-disabled .msg-enabled { display: none !important; } +.ui-selectable-disabled .msg-disabled { display: block !important; } +//.ui-selectee { border: 1px solid white; } +.ui-selecting { background: Highlight; color: HighlightText; outline: 1px dotted white; } +.ui-selected { background: Highlight; color: HighlightText; outline: 1px dotted black; } + +</style> + +<script type="text/javascript"> +$(function() { + + var speed = "fast"; + + var queue; + var start = function() { + queue = tests.slice().reverse(); // clone + $("#status").text("Running..."); + nextTest(); + } + var stop = function() { + $("#status").text("Ready"); + teardown(); + } + + var tests = []; + var nextTest = function() { + if (queue.length) { + var nTest = queue.pop(); + teardown(function() { + setupAndRun(nTest); + }); + } else { + stop(); + } + } + + var num = 0; + + var addTest = function(fn) { + num += 1; + tests.push({ + num: num, + fn: fn + }); + } + + var setupAndRun = function(nTest) { + $('#testnum').text(nTest.num); + $('#sandbox').hide() + .append('<ul id="foo">' + + '<li class="msg-missing-class">THIS TEXT SHOULD NOT BE VISIBLE</li>' + + '<li class="msg-enabled">enabled</li>' + + '<li class="msg-disabled">disabled</li>' + + '<li>Item 2</li>' + + '<li>Item 3</li>' + + '<li>Item 4</li>' + + '<li>Item 5</li>' + + '<li>Item 6</li>' + + '<li>Item 7</li>' + + '<li>Item 8</li>' + + '</ul>') + $('#foo').testMouse({ + speed: speed, + complete: nextTest + }); + $('#sandbox').show(); + nTest.fn.apply(nTest.fn); + } + + var teardown = function(fn) { + $('#sandbox').hide(); + $('#foo').remove(); + if ($.isFunction(fn)) fn.apply(); + } + var plugin = "draggable"; + plugin = "selectable" + var testFn = "testMouse"; + var testArgs = ["drag", 40, 50]; + //1 + addTest(function() { $("#foo")[plugin]()[testFn].apply($("#foo"), testArgs); }); + //2 + addTest(function() { $("#foo")[plugin]({ disabled: true })[testFn].apply($("#foo"), testArgs); }); + addTest(function() { $("#foo")[plugin]({ disabled: false })[testFn].apply($("#foo"), testArgs); }); + //4 + addTest(function() { $("#foo")[plugin]()[plugin]('disable')[testFn].apply($("#foo"), testArgs); }); + addTest(function() { $("#foo")[plugin]()[plugin]('enable')[testFn].apply($("#foo"), testArgs); }); + //6 + addTest(function() { $("#foo")[plugin]()[plugin]('enable')[plugin]('disable')[testFn].apply($("#foo"), testArgs); }); + addTest(function() { $("#foo")[plugin]()[plugin]('disable')[plugin]('enable')[testFn].apply($("#foo"), testArgs); }); + //8 + addTest(function() { $("#foo")[plugin]({ disabled: false })[plugin]('disable')[testFn].apply($("#foo"), testArgs); }); + addTest(function() { $("#foo")[plugin]({ disabled: true })[plugin]('enable')[testFn].apply($("#foo"), testArgs); }); + //10 + addTest(function() { $("#foo")[plugin]({ disabled: false }).data('disabled.' + plugin, true)[testFn].apply($("#foo"), testArgs); }); + addTest(function() { $("#foo")[plugin]({ disabled: true }).data('disabled.' + plugin, false)[testFn].apply($("#foo"), testArgs); }); + + $('#begin').click(function() { + start(); + }); + +}); +</script> + +</head> +<body> + +<div id="main"> + + <h1>jQuery UI - Automated Tests</h1> + + <div> + Status: <span id="status">Ready</span> + </div> + + <div> + Test: <span id="testnum"></span> + </div> + + <div style="height: 3em;"><button id="begin">Run Test</button></div> + + <div id="sandbox"> + + </div> + +</div> + +</body> +</html> diff --git a/ui/tests/draggable.html b/ui/tests/draggable.html index a99cec5bb..46b487d4f 100644 --- a/ui/tests/draggable.html +++ b/ui/tests/draggable.html @@ -1,40 +1,40 @@ -<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta http-equiv="Content-Language" content="en" />
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title>Draggable Test Page</title>
-<link rel="stylesheet" href="../../qunit/testsuite.css" type="text/css" media="screen">
-
-<script type="text/javascript" src="../../jquery/jquery-1.2.6.js"></script>
-<script type="text/javascript" src="../source/ui.core.js"></script>
-<script type="text/javascript" src="../source/ui.draggable.js"></script>
-
-<script type="text/javascript" src="../../qunit/testrunner.js"></script>
-<script type="text/javascript" src="draggable.js"></script>
-<script type="text/javascript" src="jquery.useraction.js"></script>
-
-<style>
- #main {
- position:absolute !important;
- top: -1000px !important;
- left: -1000px !important;
- }
-</style>
-
-</head>
-<body>
-
- <h1 id="header">Draggable Test Suite</h1>
- <h2 id="banner"></h2>
- <h2 id="userAgent"></h2>
-
- <div id="main" style="border: 1px solid black; padding: 10px; margin: 10px;">
- <div id='draggable1' style="background: green; width: 200px; height: 100px;">Static</div>
- <div id='draggable2' style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span>Absolute</span></div>
- </div>
-
- <ol id="tests"></ol>
-
-</body>
-</html>
+<!DOCTYPE html> +<html lang="en"> +<head> +<meta http-equiv="Content-Language" content="en" /> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<title>Draggable Test Page</title> +<link rel="stylesheet" href="../../qunit/testsuite.css" type="text/css" media="screen"> + +<script type="text/javascript" src="../../jquery/jquery-1.2.6.js"></script> +<script type="text/javascript" src="../source/ui.core.js"></script> +<script type="text/javascript" src="../source/ui.draggable.js"></script> + +<script type="text/javascript" src="../../qunit/testrunner.js"></script> +<script type="text/javascript" src="draggable.js"></script> +<script type="text/javascript" src="jquery.useraction.js"></script> + +<style> + #main { + position:absolute !important; + top: -1000px !important; + left: -1000px !important; + } +</style> + +</head> +<body> + + <h1 id="header">Draggable Test Suite</h1> + <h2 id="banner"></h2> + <h2 id="userAgent"></h2> + + <div id="main" style="border: 1px solid black; padding: 10px; margin: 10px;"> + <div id='draggable1' style="background: green; width: 200px; height: 100px;">Static</div> + <div id='draggable2' style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span>Absolute</span></div> + </div> + + <ol id="tests"></ol> + +</body> +</html> diff --git a/ui/tests/draggable.js b/ui/tests/draggable.js index ba6eaa7f1..a246d4747 100644 --- a/ui/tests/draggable.js +++ b/ui/tests/draggable.js @@ -1,322 +1,322 @@ -var drag = function(el, dx, dy, complete) {
-
- // speed = sync -> Drag syncrhonously.
- // speed = fast|slow -> Drag asyncrhonously - animated.
-
- return $(el).userAction("drag", {
- dx: dx||0, dy: dy||0, speed: 'sync', complete: complete
- });
-};
-
-
-module("Draggable");
-
-test("create and destroy", function() {
-
- expect(2);
-
- $("#draggable1").draggable();
- ok($("#draggable1").data("draggable"), "Accessing draggable instance after creation");
-
- $("#draggable1").draggable("destroy");
- ok(!$("#draggable1").data("draggable"), "Accessing draggable instance after destroy");
-
-});
-
-test("No options, relative", function() {
-
- expect(4);
-
- $("#draggable1").draggable();
-
- var offset = $("#draggable1").data("draggable").element.offset();
- equals(offset.left, -979, "Checking initial left position");
- equals(offset.top, -979, "Checking initial top position");
-
- drag("#draggable1", 50, 50);
-
- var offset = $("#draggable1").data("draggable").element.offset();
- equals(offset.left, -929, "Checking new left position");
- equals(offset.top, -929, "Checking new top position");
-
-
-});
-
-test("No options, absolute", function() {
-
- expect(4);
-
- $("#draggable2").draggable();
-
- var offset = $("#draggable2").data("draggable").element.offset();
- equals(offset.left, -979, "Checking initial left position");
- equals(offset.top, -979, "Checking initial top position");
-
- drag("#draggable2", 50, 50);
-
- var offset = $("#draggable2").data("draggable").element.offset();
- equals(offset.left, -929, "Checking new left position");
- equals(offset.top, -929, "Checking new top position");
-
-
-});
-
-test("{ helper: 'clone' }", function() {
-
- expect(4);
-
- $("#draggable1, #draggable2").draggable({ helper: "clone" });
-
- drag("#draggable1, #draggable2", 50, 50);
-
- var offset = $("#draggable1").data("draggable").element.offset();
- equals(offset.left, -979, "Relative: Original position should be untouched");
- equals(offset.top, -979, "Relative: Original position should be untouched");
-
- var offset = $("#draggable2").data("draggable").element.offset();
- equals(offset.left, -979, "Absolute: Original position should be untouched");
- equals(offset.top, -979, "Absolute: Original position should be untouched");
-
-
-});
-
-test("{ grid: [50,50] }", function() {
-
- expect(4);
-
- $("#draggable1, #draggable2").draggable({ grid: [50,50] });
-
- drag("#draggable1, #draggable2", 30, 30);
-
- var offset = $("#draggable1").data("draggable").element.offset();
- equals(offset.left, -929, "Relative: 50px move in grid");
- equals(offset.top, -929, "Relative: 50px move in grid");
-
- var offset = $("#draggable2").data("draggable").element.offset();
- equals(offset.left, -929, "Absolute: 50px move in grid");
- equals(offset.top, -929, "Absolute: 50px move in grid");
-
-
-});
-
-test("{ axis: 'y' }", function() {
-
- expect(4);
-
- $("#draggable1, #draggable2").draggable({ axis: "y" });
-
- drag("#draggable1, #draggable2", 50, 50);
-
- var offset = $("#draggable1").data("draggable").element.offset();
- equals(offset.left, -979, "Relative: 0px move");
- equals(offset.top, -929, "Relative: 50px move");
-
- var offset = $("#draggable2").data("draggable").element.offset();
- equals(offset.left, -979, "Absolute: 0px move");
- equals(offset.top, -929, "Absolute: 50px move");
-
-
-});
-
-test("{ axis: 'x' }", function() {
-
- expect(4);
-
- $("#draggable1, #draggable2").draggable({ axis: "x" });
-
- drag("#draggable1, #draggable2", 50, 50);
-
- var offset = $("#draggable1").data("draggable").element.offset();
- equals(offset.left, -929, "Relative: 50px move");
- equals(offset.top, -979, "Relative: 0px move");
-
- var offset = $("#draggable2").data("draggable").element.offset();
- equals(offset.left, -929, "Absolute: 50px move");
- equals(offset.top, -979, "Absolute: 0px move");
-
-
-});
-
-test("{ cancel: 'span' }", function() {
-
- expect(2);
-
- $("#draggable2").draggable({ cancel: 'span' });
-
- drag("#draggable2 span", 50, 50);
-
- var offset = $("#draggable2").data("draggable").element.offset();
- equals(offset.left, -979, "Trigger on span: 0px move");
- equals(offset.top, -979, "Trigger on span: 0px move");
-
-
-});
-
-test("{ handle: 'span' }", function() {
-
- expect(4);
-
- $("#draggable2").draggable({ handle: 'span' });
-
- drag("#draggable2 span", 50, 50);
-
- var offset = $("#draggable2").data("draggable").element.offset();
- equals(offset.left, -929, "Trigger on span: 50px move");
- equals(offset.top, -929, "Trigger on span: 50px move");
-
- drag("#draggable2", 50, 50);
-
- var offset = $("#draggable2").data("draggable").element.offset();
- equals(offset.left, -929, "Trigger on element: 0px move");
- equals(offset.top, -929, "Trigger on element: 0px move");
-
-
-});
-
-test("{ containment: 'parent' }", function() {
-
- expect(4);
-
- $("#draggable2, #draggable1").draggable({ containment: 'parent' });
-
- drag("#draggable2, #draggable1", -100, -100);
-
- var offset = $("#draggable2").data("draggable").element.offset();
- equals(offset.left, -989, "Absolute: 10px move (to parent's margin end)");
- equals(offset.top, -989, "Absolute: 10px move (to parent's margin end)");
-
- var offset = $("#draggable1").data("draggable").element.offset();
- equals(offset.left, -989, "Relative: 10px move (to parent's margin end)");
- equals(offset.top, -989, "Relative: 10px move (to parent's margin end)");
-
-
-});
-
-test("{ cursorAt: { left: -5, top: -5 } }", function() {
-
- expect(4);
-
- var position = null;
- $("#draggable2").draggable({
- cursorAt: { left: -5, top: -5 },
- drag: function(e, ui) {
- position = ui.absolutePosition;
- }
- });
-
- drag("#draggable2", -1, -1);
-
- equals(position.left, -875, "Absolute: -1px move");
- equals(position.top, -925, "Absolute: -1px move");
-
- var position = null;
- $("#draggable1").draggable({
- cursorAt: { left: -5, top: -5 },
- drag: function(e, ui) {
- position = ui.absolutePosition;
- }
- });
-
- drag("#draggable1", -1, -1);
-
- equals(position.left, -875, "Relative: -1px move");
- equals(position.top, -925, "Relative: -1px move");
-
-});
-
-test("{ cursor: 'move' }", function() {
-
- expect(2);
-
- var cursor = null;
- $("#draggable2").draggable({
- cursor: "move",
- start: function(e, ui) {
- cursor = $("body").css("cursor");
- }
- });
-
- drag("#draggable2", -1, -1);
-
- equals(cursor, "move", "start callback: cursor 'move'");
- equals($("body").css("cursor"), "auto", "after drag: cursor restored");
-
-});
-
-test("{ distance: 10 }", function() {
-
- expect(2);
-
- var dragged = false;
- $("#draggable2").draggable({
- distance: 10,
- start: function(e, ui) {
- dragged = true;
- }
- });
-
- drag("#draggable2", -9, -9);
- equals(dragged, false, "The draggable should not have moved when moving -9px");
-
- drag("#draggable2", -10, -10);
- equals(dragged, true, "The draggable should have moved when moving -10px");
-
-});
-
-test("{ opacity: 0.5 }", function() {
-
- expect(1);
-
- var opacity = null;
- $("#draggable2").draggable({
- opacity: 0.5,
- start: function(e, ui) {
- opacity = $(this).css("opacity");
- }
- });
-
- drag("#draggable2", -1, -1);
-
- equals(opacity, "0.5", "start callback: opacity is 0.5");
-
-});
-
-test("{ zIndex: 10 }", function() {
-
- expect(1);
-
- var zIndex = null;
- $("#draggable2").draggable({
- zIndex: 10,
- start: function(e, ui) {
- zIndex = $(this).css("zIndex");
- }
- });
-
- drag("#draggable2", -1, -1);
-
- equals(zIndex, "10", "start callback: zIndex is 10");
-
-});
-
-test("callbacks occurance count", function() {
-
- expect(3);
-
- var start = 0, stop = 0, dragc = 0;
- $("#draggable2").draggable({
- start: function() { start++; },
- drag: function() { dragc++; },
- stop: function() { stop++; }
- });
-
- drag("#draggable2", 10, 10);
-
- equals(start, 1, "start callback should happen exactly once");
- equals(dragc, 11, "drag callback should happen exactly 1+10 times (first simultaneously with start)");
- equals(stop, 1, "stop callback should happen exactly once");
-
-});
-
-
-
+var drag = function(el, dx, dy, complete) { + + // speed = sync -> Drag syncrhonously. + // speed = fast|slow -> Drag asyncrhonously - animated. + + return $(el).userAction("drag", { + dx: dx||0, dy: dy||0, speed: 'sync', complete: complete + }); +}; + + +module("Draggable"); + +test("create and destroy", function() { + + expect(2); + + $("#draggable1").draggable(); + ok($("#draggable1").data("draggable"), "Accessing draggable instance after creation"); + + $("#draggable1").draggable("destroy"); + ok(!$("#draggable1").data("draggable"), "Accessing draggable instance after destroy"); + +}); + +test("No options, relative", function() { + + expect(4); + + $("#draggable1").draggable(); + + var offset = $("#draggable1").data("draggable").element.offset(); + equals(offset.left, -979, "Checking initial left position"); + equals(offset.top, -979, "Checking initial top position"); + + drag("#draggable1", 50, 50); + + var offset = $("#draggable1").data("draggable").element.offset(); + equals(offset.left, -929, "Checking new left position"); + equals(offset.top, -929, "Checking new top position"); + + +}); + +test("No options, absolute", function() { + + expect(4); + + $("#draggable2").draggable(); + + var offset = $("#draggable2").data("draggable").element.offset(); + equals(offset.left, -979, "Checking initial left position"); + equals(offset.top, -979, "Checking initial top position"); + + drag("#draggable2", 50, 50); + + var offset = $("#draggable2").data("draggable").element.offset(); + equals(offset.left, -929, "Checking new left position"); + equals(offset.top, -929, "Checking new top position"); + + +}); + +test("{ helper: 'clone' }", function() { + + expect(4); + + $("#draggable1, #draggable2").draggable({ helper: "clone" }); + + drag("#draggable1, #draggable2", 50, 50); + + var offset = $("#draggable1").data("draggable").element.offset(); + equals(offset.left, -979, "Relative: Original position should be untouched"); + equals(offset.top, -979, "Relative: Original position should be untouched"); + + var offset = $("#draggable2").data("draggable").element.offset(); + equals(offset.left, -979, "Absolute: Original position should be untouched"); + equals(offset.top, -979, "Absolute: Original position should be untouched"); + + +}); + +test("{ grid: [50,50] }", function() { + + expect(4); + + $("#draggable1, #draggable2").draggable({ grid: [50,50] }); + + drag("#draggable1, #draggable2", 30, 30); + + var offset = $("#draggable1").data("draggable").element.offset(); + equals(offset.left, -929, "Relative: 50px move in grid"); + equals(offset.top, -929, "Relative: 50px move in grid"); + + var offset = $("#draggable2").data("draggable").element.offset(); + equals(offset.left, -929, "Absolute: 50px move in grid"); + equals(offset.top, -929, "Absolute: 50px move in grid"); + + +}); + +test("{ axis: 'y' }", function() { + + expect(4); + + $("#draggable1, #draggable2").draggable({ axis: "y" }); + + drag("#draggable1, #draggable2", 50, 50); + + var offset = $("#draggable1").data("draggable").element.offset(); + equals(offset.left, -979, "Relative: 0px move"); + equals(offset.top, -929, "Relative: 50px move"); + + var offset = $("#draggable2").data("draggable").element.offset(); + equals(offset.left, -979, "Absolute: 0px move"); + equals(offset.top, -929, "Absolute: 50px move"); + + +}); + +test("{ axis: 'x' }", function() { + + expect(4); + + $("#draggable1, #draggable2").draggable({ axis: "x" }); + + drag("#draggable1, #draggable2", 50, 50); + + var offset = $("#draggable1").data("draggable").element.offset(); + equals(offset.left, -929, "Relative: 50px move"); + equals(offset.top, -979, "Relative: 0px move"); + + var offset = $("#draggable2").data("draggable").element.offset(); + equals(offset.left, -929, "Absolute: 50px move"); + equals(offset.top, -979, "Absolute: 0px move"); + + +}); + +test("{ cancel: 'span' }", function() { + + expect(2); + + $("#draggable2").draggable({ cancel: 'span' }); + + drag("#draggable2 span", 50, 50); + + var offset = $("#draggable2").data("draggable").element.offset(); + equals(offset.left, -979, "Trigger on span: 0px move"); + equals(offset.top, -979, "Trigger on span: 0px move"); + + +}); + +test("{ handle: 'span' }", function() { + + expect(4); + + $("#draggable2").draggable({ handle: 'span' }); + + drag("#draggable2 span", 50, 50); + + var offset = $("#draggable2").data("draggable").element.offset(); + equals(offset.left, -929, "Trigger on span: 50px move"); + equals(offset.top, -929, "Trigger on span: 50px move"); + + drag("#draggable2", 50, 50); + + var offset = $("#draggable2").data("draggable").element.offset(); + equals(offset.left, -929, "Trigger on element: 0px move"); + equals(offset.top, -929, "Trigger on element: 0px move"); + + +}); + +test("{ containment: 'parent' }", function() { + + expect(4); + + $("#draggable2, #draggable1").draggable({ containment: 'parent' }); + + drag("#draggable2, #draggable1", -100, -100); + + var offset = $("#draggable2").data("draggable").element.offset(); + equals(offset.left, -989, "Absolute: 10px move (to parent's margin end)"); + equals(offset.top, -989, "Absolute: 10px move (to parent's margin end)"); + + var offset = $("#draggable1").data("draggable").element.offset(); + equals(offset.left, -989, "Relative: 10px move (to parent's margin end)"); + equals(offset.top, -989, "Relative: 10px move (to parent's margin end)"); + + +}); + +test("{ cursorAt: { left: -5, top: -5 } }", function() { + + expect(4); + + var position = null; + $("#draggable2").draggable({ + cursorAt: { left: -5, top: -5 }, + drag: function(e, ui) { + position = ui.absolutePosition; + } + }); + + drag("#draggable2", -1, -1); + + equals(position.left, -875, "Absolute: -1px move"); + equals(position.top, -925, "Absolute: -1px move"); + + var position = null; + $("#draggable1").draggable({ + cursorAt: { left: -5, top: -5 }, + drag: function(e, ui) { + position = ui.absolutePosition; + } + }); + + drag("#draggable1", -1, -1); + + equals(position.left, -875, "Relative: -1px move"); + equals(position.top, -925, "Relative: -1px move"); + +}); + +test("{ cursor: 'move' }", function() { + + expect(2); + + var cursor = null; + $("#draggable2").draggable({ + cursor: "move", + start: function(e, ui) { + cursor = $("body").css("cursor"); + } + }); + + drag("#draggable2", -1, -1); + + equals(cursor, "move", "start callback: cursor 'move'"); + equals($("body").css("cursor"), "auto", "after drag: cursor restored"); + +}); + +test("{ distance: 10 }", function() { + + expect(2); + + var dragged = false; + $("#draggable2").draggable({ + distance: 10, + start: function(e, ui) { + dragged = true; + } + }); + + drag("#draggable2", -9, -9); + equals(dragged, false, "The draggable should not have moved when moving -9px"); + + drag("#draggable2", -10, -10); + equals(dragged, true, "The draggable should have moved when moving -10px"); + +}); + +test("{ opacity: 0.5 }", function() { + + expect(1); + + var opacity = null; + $("#draggable2").draggable({ + opacity: 0.5, + start: function(e, ui) { + opacity = $(this).css("opacity"); + } + }); + + drag("#draggable2", -1, -1); + + equals(opacity, "0.5", "start callback: opacity is 0.5"); + +}); + +test("{ zIndex: 10 }", function() { + + expect(1); + + var zIndex = null; + $("#draggable2").draggable({ + zIndex: 10, + start: function(e, ui) { + zIndex = $(this).css("zIndex"); + } + }); + + drag("#draggable2", -1, -1); + + equals(zIndex, "10", "start callback: zIndex is 10"); + +}); + +test("callbacks occurance count", function() { + + expect(3); + + var start = 0, stop = 0, dragc = 0; + $("#draggable2").draggable({ + start: function() { start++; }, + drag: function() { dragc++; }, + stop: function() { stop++; } + }); + + drag("#draggable2", 10, 10); + + equals(start, 1, "start callback should happen exactly once"); + equals(dragc, 11, "drag callback should happen exactly 1+10 times (first simultaneously with start)"); + equals(stop, 1, "stop callback should happen exactly once"); + +}); + + + diff --git a/ui/tests/slider.html b/ui/tests/slider.html index 518a9bd98..f77ec68e6 100644 --- a/ui/tests/slider.html +++ b/ui/tests/slider.html @@ -1,32 +1,32 @@ -<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta http-equiv="Content-Language" content="en" />
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title>Slider Test Page</title>
-<link rel="stylesheet" href="../../qunit/testsuite.css" type="text/css" media="screen">
-
-<script type="text/javascript" src="../../jquery/jquery-1.2.6.js"></script>
-<script type="text/javascript" src="../source/ui.core.js"></script>
-<script type="text/javascript" src="../source/ui.slider.js"></script>
-
-<script type="text/javascript" src="../../qunit/testrunner.js"></script>
-<script type="text/javascript" src="slider.js"></script>
-</head>
-<body>
-
- <h1 id="header">jQuery Test Suite</h1>
- <h2 id="banner"></h2>
- <h2 id="userAgent"></h2>
-
- <div id="main" style="position:absolute;top:-20000px">
- <div id='slider1'></div>
- <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;">
- <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>
- </div>
- </div>
-
- <ol id="tests"></ol>
-
-</body>
-</html>
+<!DOCTYPE html> +<html lang="en"> +<head> +<meta http-equiv="Content-Language" content="en" /> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<title>Slider Test Page</title> +<link rel="stylesheet" href="../../qunit/testsuite.css" type="text/css" media="screen"> + +<script type="text/javascript" src="../../jquery/jquery-1.2.6.js"></script> +<script type="text/javascript" src="../source/ui.core.js"></script> +<script type="text/javascript" src="../source/ui.slider.js"></script> + +<script type="text/javascript" src="../../qunit/testrunner.js"></script> +<script type="text/javascript" src="slider.js"></script> +</head> +<body> + + <h1 id="header">jQuery Test Suite</h1> + <h2 id="banner"></h2> + <h2 id="userAgent"></h2> + + <div id="main" style="position:absolute;top:-20000px"> + <div id='slider1'></div> + <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;"> + <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> + </div> + </div> + + <ol id="tests"></ol> + +</body> +</html> diff --git a/ui/tests/slider.js b/ui/tests/slider.js index 035fa496f..0dc020642 100644 --- a/ui/tests/slider.js +++ b/ui/tests/slider.js @@ -1,100 +1,100 @@ -$.fn.triggerKeydown = function(keyCode) {
- return this.trigger("keydown", [$.event.fix({event:"keydown", keyCode: keyCode, target: this[0]})]);
-}
-
-function assertChange(stepping, start, result, action) {
- return function() {
- expect(1);
- var slider = $("#slider3").slider({
- stepping: stepping,
- startValue: start,
- min: 0,
- max: 1000,
- change: function(e, ui) {
- equals(ui.value, result, "changed to " + ui.value);
- }
- });
- action.apply(slider);
- }
-}
-
-module("slider: single handle")
-
-test("change one step via keydown", assertChange(1, undefined, 1, function() {
- this.find("a").triggerKeydown("39");
-}))
-test("change - 10 steps via keydown", assertChange(10, 20, 10, function() {
- this.find("a").triggerKeydown("37");
-}))
-test("change +10 steps via keydown", assertChange(10, 20, 30, function() {
- this.find("a").triggerKeydown("39");
-}))
-
-test("moveTo, absolute value", assertChange(1, 1, 10, function() {
- this.slider("moveTo", 10);
-}))
-
-test("moveTo, absolute value as string", assertChange(1, 1, 10, function() {
- this.slider("moveTo", "10");
-}))
-
-test("moveTo, absolute value, below min", assertChange(1, 1, 0, function() {
- this.slider("moveTo", -10);
-}))
-
-test("moveTo, relative positive value", assertChange(1, 1, 11, function() {
- this.slider("moveTo", "+=10");
-}))
-
-test("moveTo, relative positive value, above max", assertChange(1, 10, 1000, function() {
- this.slider("moveTo", "+=2000");
-}))
-
-test("moveTo, relative negative value", assertChange(1, 20, 10, function() {
- this.slider("moveTo", "-=10");
-}))
-
-test("options update min/max", function() {
- expect(2);
- var slider = $("#slider3").slider({
- stepping: 1,
- startValue: 1
- });
- slider.slider("moveTo", "-=10");
- equals(slider.slider("value"), 0);
- slider.data("min.slider", -10);
- slider.slider("moveTo", "-=20");
- equals(slider.slider("value"), -10);
-})
-
-module("slider: setup and teardown");
-
-test("destroy and recreate", function() {
- expect(3)
- var slider = $("#slider3").slider();
- slider.slider("moveTo", "+=20");
- equals(slider.slider("value"), 20);
- slider.slider("destroy");
-
- slider.slider("moveTo", "+=30");
- ok(true, "nothing happens after slider is destroyed");
-
- slider.slider().slider("moveTo", "30");
-
- equals(Math.round(slider.slider("value")), 30);
-})
-
-test("handle creation", function() {
- var slider = $("#slider1");
- equals(slider.children().size(), 0);
- slider.slider({
- handles: [
- { start: 0 },
- { start: 10 }
- ]
- });
- equals(slider.children().size(), 2);
- var instance = $.data(slider[0], "slider")
- equals(instance.handle.length, 2);
- ok(instance.handle.jquery, "handle must be a jquery object")
+$.fn.triggerKeydown = function(keyCode) { + return this.trigger("keydown", [$.event.fix({event:"keydown", keyCode: keyCode, target: this[0]})]); +} + +function assertChange(stepping, start, result, action) { + return function() { + expect(1); + var slider = $("#slider3").slider({ + stepping: stepping, + startValue: start, + min: 0, + max: 1000, + change: function(e, ui) { + equals(ui.value, result, "changed to " + ui.value); + } + }); + action.apply(slider); + } +} + +module("slider: single handle") + +test("change one step via keydown", assertChange(1, undefined, 1, function() { + this.find("a").triggerKeydown("39"); +})) +test("change - 10 steps via keydown", assertChange(10, 20, 10, function() { + this.find("a").triggerKeydown("37"); +})) +test("change +10 steps via keydown", assertChange(10, 20, 30, function() { + this.find("a").triggerKeydown("39"); +})) + +test("moveTo, absolute value", assertChange(1, 1, 10, function() { + this.slider("moveTo", 10); +})) + +test("moveTo, absolute value as string", assertChange(1, 1, 10, function() { + this.slider("moveTo", "10"); +})) + +test("moveTo, absolute value, below min", assertChange(1, 1, 0, function() { + this.slider("moveTo", -10); +})) + +test("moveTo, relative positive value", assertChange(1, 1, 11, function() { + this.slider("moveTo", "+=10"); +})) + +test("moveTo, relative positive value, above max", assertChange(1, 10, 1000, function() { + this.slider("moveTo", "+=2000"); +})) + +test("moveTo, relative negative value", assertChange(1, 20, 10, function() { + this.slider("moveTo", "-=10"); +})) + +test("options update min/max", function() { + expect(2); + var slider = $("#slider3").slider({ + stepping: 1, + startValue: 1 + }); + slider.slider("moveTo", "-=10"); + equals(slider.slider("value"), 0); + slider.data("min.slider", -10); + slider.slider("moveTo", "-=20"); + equals(slider.slider("value"), -10); +}) + +module("slider: setup and teardown"); + +test("destroy and recreate", function() { + expect(3) + var slider = $("#slider3").slider(); + slider.slider("moveTo", "+=20"); + equals(slider.slider("value"), 20); + slider.slider("destroy"); + + slider.slider("moveTo", "+=30"); + ok(true, "nothing happens after slider is destroyed"); + + slider.slider().slider("moveTo", "30"); + + equals(Math.round(slider.slider("value")), 30); +}) + +test("handle creation", function() { + var slider = $("#slider1"); + equals(slider.children().size(), 0); + slider.slider({ + handles: [ + { start: 0 }, + { start: 10 } + ] + }); + equals(slider.children().size(), 2); + var instance = $.data(slider[0], "slider") + equals(instance.handle.length, 2); + ok(instance.handle.jquery, "handle must be a jquery object") })
\ No newline at end of file diff --git a/ui/tests/ui.testmouse.js b/ui/tests/ui.testmouse.js index 5b73ab013..b42a1036d 100644 --- a/ui/tests/ui.testmouse.js +++ b/ui/tests/ui.testmouse.js @@ -1,171 +1,171 @@ -/*
- * jQuery UI testMouse
- *
- * Copyright (c) 2008 Richard D. Worth (rdworth.org)
- * Dual licensed under the MIT (MIT-LICENSE.txt)
- * and GPL (GPL-LICENSE.txt) licenses.
- *
- * Revision: $Id: $
- */
-;(function($) {
-
- var mouseX = 0;
- var mouseY = 0;
-
- $(function() {
- $(document).mousemove(function(e) {
- if (e.isTrusted !== false) {
- mouseX = e.pageX;
- mouseY = e.pageY;
- }
- });
- });
-
- $.widget("ui.testMouse", {
- trackMouse: function() {},
- init: function() {
- },
- destroy: function() {
- },
- center: function(offset) {
- var o = this.element.offset();
- return {
- x: (o.left + (offset || [0, 0])[0] || 0) + this.element.width() / 2,
- y: (o.top + (offset || [0, 0])[1] || 0) + this.element.height() / 2
- };
- },
- dispatch: function(type, x, y, button, relatedTarget) {
- var evt, e = {bubbles: true, cancelable: (type != "mousemove"), view: window, detail: 0,
- screenX: 0, screenY: 0, clientX: x, clientY: y,
- ctrlKey: false, altKey: false, shiftKey: false, metaKey: false,
- button: button || 0, relatedTarget: relatedTarget, isTrusted: false};
- if ($.isFunction(document.createEvent)) {
- evt = document.createEvent("MouseEvents");
- if ($.isFunction(evt.initMouseEvent)) {
- evt.initMouseEvent(type, e.bubbles, e.cancelable, e.view, e.detail,
- e.screenX, e.screenY, e.clientX, e.clientY,
- e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
- e.button, e.relatedTarget);
- } else {
- evt = document.createEvent("UIEvents");
- evt.initEvent(type, bubbles, cancelable);
- $.extend(evt, e);
- }
- this.element[0].dispatchEvent(evt);
- } else if (document.createEventObject) {
- evt = document.createEventObject();
- $.extend(evt, e);
- evt.button = 1;
- this.element[0].fireEvent('on' + type, evt)
- }
- },
- down: function(x, y) {
- this.dispatch("mousedown", x, y);
- },
- move: function(x, y) {
- this.dispatch("mousemove", x, y);
- },
- up: function(x, y) {
- this.dispatch("mouseup", x, y);
- },
- drag: function(dx, dy) {
- var self = this;
-
- var center = this.center();
- this.left = center.x;
- this.top = center.y;
-
- var OS = (/(win|mac|linux)/i.exec(navigator.platform) || ['other'])[0].toLowerCase();
-
- var defaultUrl = ['cursors', OS == 'other' ? 'win' : OS, 'default.png'].join('/');
- var cursorUrl = function() {
- return ['cursors', OS == 'other' ? 'win' : OS, self.element.css('cursor') + '.png'].join('/');
- }
- var noneUrl = ['cursors', OS == 'other' ? 'win' : OS, 'none' + ($.browser.safari ? '.png' : '.cur')].join('/');
-
- var fakemouse = $('<img src="' + defaultUrl + '" />');
- var realmouse = $('<img src="' + defaultUrl + '" />');
- if ($.browser.msie && $.browser.version == 6) {
- fakemouse = $('<div style="height:32;width:32;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\');" ></div>');
- realmouse = $('<div><div style="height:32;width:32;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\');" ></div></div>');
- }
- var mousescreen = $('<div/>');
-
- var updateCursor = function() {
- if ($.browser.msie && $.browser.version == 6) {
- fakemouse.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + cursorUrl() + '\', sizingMethod=\'scale\'');
- } else {
- fakemouse.attr('src', cursorUrl());
- }
- }
- var resetCursor = function() {
- if ($.browser.msie && $.browser.version == 6) {
- fakemouse.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\'');
- } else {
- fakemouse.attr('src', defaultUrl);
- }
- }
-
- var testStart = function() {
- self.element.bind("mouseover", updateCursor).bind("mouseout", resetCursor);
- fakemouse.appendTo('body').css({ position: 'absolute', left: mouseX, top: mouseY, zIndex: 5000 });
- realmouse.appendTo('body').css({ position: 'absolute', left: mouseX, top: mouseY, zIndex: 5000, opacity: 0.1 });
- mousescreen.appendTo('body').css({ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0, zIndex: 5000 })
- .mousemove(function(e) { realmouse.css({ left: e.pageX, top: e.pageY }); return false; })
- .mousedown(function() { return false; })
- .mouseup(function() { return false; });
- mousescreen.css('cursor', 'url(' + noneUrl + '), crosshair');
- ($.browser.opera && mousescreen.css('cursor', 'crosshair'));
- }
- var testStop = function() {
- self.element.unbind("mouseover", updateCursor).unbind("mouseout", resetCursor);
- mousescreen.remove();
- mouseX = realmouse.css("left");
- mouseY = realmouse.css("top");
- realmouse.remove();
- fakemouse.remove();
- self.options.complete.apply();
- }
-
- testStart();
-
- this.lastX = null;
-
- fakemouse
- .animate({ left: this.left, top: this.top }, this.options.speed, function() {
- self.element.triggerHandler('mouseover');
- self.down(self.left, self.top);
- self.move(self.left, self.top);
- })
- .animate({ left: this.left + dx, top: this.top + dy }, {
- speed: self.options.speed,
- easing: "swing",
- step: function (xory) {
- if (!self.lastX) {
- self.lastX = xory;
- } else {
- var x = self.lastX, y = xory;
- self.move(x, y);
- self.lastX = null;
- }
- },
- complete: function() {
- self.element.triggerHandler('mouseout');
- self.up(0, 0);
- $(this).animate({ left: realmouse.css("left"), top: realmouse.css("top") }, {
- speed: self.options.speed,
- complete: function() {
- testStop();
- }
- })
- }
- });
-
- }
- });
-
- $.ui.testMouse.defaults = {
- speed: "slow"
- }
-
-})(jQuery);
+/* + * jQuery UI testMouse + * + * Copyright (c) 2008 Richard D. Worth (rdworth.org) + * Dual licensed under the MIT (MIT-LICENSE.txt) + * and GPL (GPL-LICENSE.txt) licenses. + * + * Revision: $Id: $ + */ +;(function($) { + + var mouseX = 0; + var mouseY = 0; + + $(function() { + $(document).mousemove(function(e) { + if (e.isTrusted !== false) { + mouseX = e.pageX; + mouseY = e.pageY; + } + }); + }); + + $.widget("ui.testMouse", { + trackMouse: function() {}, + init: function() { + }, + destroy: function() { + }, + center: function(offset) { + var o = this.element.offset(); + return { + x: (o.left + (offset || [0, 0])[0] || 0) + this.element.width() / 2, + y: (o.top + (offset || [0, 0])[1] || 0) + this.element.height() / 2 + }; + }, + dispatch: function(type, x, y, button, relatedTarget) { + var evt, e = {bubbles: true, cancelable: (type != "mousemove"), view: window, detail: 0, + screenX: 0, screenY: 0, clientX: x, clientY: y, + ctrlKey: false, altKey: false, shiftKey: false, metaKey: false, + button: button || 0, relatedTarget: relatedTarget, isTrusted: false}; + if ($.isFunction(document.createEvent)) { + evt = document.createEvent("MouseEvents"); + if ($.isFunction(evt.initMouseEvent)) { + evt.initMouseEvent(type, e.bubbles, e.cancelable, e.view, e.detail, + e.screenX, e.screenY, e.clientX, e.clientY, + e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, + e.button, e.relatedTarget); + } else { + evt = document.createEvent("UIEvents"); + evt.initEvent(type, bubbles, cancelable); + $.extend(evt, e); + } + this.element[0].dispatchEvent(evt); + } else if (document.createEventObject) { + evt = document.createEventObject(); + $.extend(evt, e); + evt.button = 1; + this.element[0].fireEvent('on' + type, evt) + } + }, + down: function(x, y) { + this.dispatch("mousedown", x, y); + }, + move: function(x, y) { + this.dispatch("mousemove", x, y); + }, + up: function(x, y) { + this.dispatch("mouseup", x, y); + }, + drag: function(dx, dy) { + var self = this; + + var center = this.center(); + this.left = center.x; + this.top = center.y; + + var OS = (/(win|mac|linux)/i.exec(navigator.platform) || ['other'])[0].toLowerCase(); + + var defaultUrl = ['cursors', OS == 'other' ? 'win' : OS, 'default.png'].join('/'); + var cursorUrl = function() { + return ['cursors', OS == 'other' ? 'win' : OS, self.element.css('cursor') + '.png'].join('/'); + } + var noneUrl = ['cursors', OS == 'other' ? 'win' : OS, 'none' + ($.browser.safari ? '.png' : '.cur')].join('/'); + + var fakemouse = $('<img src="' + defaultUrl + '" />'); + var realmouse = $('<img src="' + defaultUrl + '" />'); + if ($.browser.msie && $.browser.version == 6) { + fakemouse = $('<div style="height:32;width:32;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\');" ></div>'); + realmouse = $('<div><div style="height:32;width:32;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\');" ></div></div>'); + } + var mousescreen = $('<div/>'); + + var updateCursor = function() { + if ($.browser.msie && $.browser.version == 6) { + fakemouse.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + cursorUrl() + '\', sizingMethod=\'scale\''); + } else { + fakemouse.attr('src', cursorUrl()); + } + } + var resetCursor = function() { + if ($.browser.msie && $.browser.version == 6) { + fakemouse.css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + defaultUrl + '\', sizingMethod=\'scale\''); + } else { + fakemouse.attr('src', defaultUrl); + } + } + + var testStart = function() { + self.element.bind("mouseover", updateCursor).bind("mouseout", resetCursor); + fakemouse.appendTo('body').css({ position: 'absolute', left: mouseX, top: mouseY, zIndex: 5000 }); + realmouse.appendTo('body').css({ position: 'absolute', left: mouseX, top: mouseY, zIndex: 5000, opacity: 0.1 }); + mousescreen.appendTo('body').css({ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0, zIndex: 5000 }) + .mousemove(function(e) { realmouse.css({ left: e.pageX, top: e.pageY }); return false; }) + .mousedown(function() { return false; }) + .mouseup(function() { return false; }); + mousescreen.css('cursor', 'url(' + noneUrl + '), crosshair'); + ($.browser.opera && mousescreen.css('cursor', 'crosshair')); + } + var testStop = function() { + self.element.unbind("mouseover", updateCursor).unbind("mouseout", resetCursor); + mousescreen.remove(); + mouseX = realmouse.css("left"); + mouseY = realmouse.css("top"); + realmouse.remove(); + fakemouse.remove(); + self.options.complete.apply(); + } + + testStart(); + + this.lastX = null; + + fakemouse + .animate({ left: this.left, top: this.top }, this.options.speed, function() { + self.element.triggerHandler('mouseover'); + self.down(self.left, self.top); + self.move(self.left, self.top); + }) + .animate({ left: this.left + dx, top: this.top + dy }, { + speed: self.options.speed, + easing: "swing", + step: function (xory) { + if (!self.lastX) { + self.lastX = xory; + } else { + var x = self.lastX, y = xory; + self.move(x, y); + self.lastX = null; + } + }, + complete: function() { + self.element.triggerHandler('mouseout'); + self.up(0, 0); + $(this).animate({ left: realmouse.css("left"), top: realmouse.css("top") }, { + speed: self.options.speed, + complete: function() { + testStop(); + } + }) + } + }); + + } + }); + + $.ui.testMouse.defaults = { + speed: "slow" + } + +})(jQuery); |