diff options
| author | Ca-Phun Ung <pazu2k@gmail.com> | 2009-05-11 04:29:30 +0000 |
|---|---|---|
| committer | Ca-Phun Ung <pazu2k@gmail.com> | 2009-05-11 04:29:30 +0000 |
| commit | 2291be6a65f8b0a23ec1cf44546cda0bc7147423 (patch) | |
| tree | b77a3d9952560692b1a3de811de3416fe7ae4123 /external/mousewheel/test/index.html | |
| parent | f6b219fdc4feaff1bb236f79590809db829e922e (diff) | |
| download | jquery-ui-2291be6a65f8b0a23ec1cf44546cda0bc7147423.tar.gz jquery-ui-2291be6a65f8b0a23ec1cf44546cda0bc7147423.zip | |
spinner: added mousewheel plugin to trunk/external.
Diffstat (limited to 'external/mousewheel/test/index.html')
| -rwxr-xr-x | external/mousewheel/test/index.html | 204 |
1 files changed, 204 insertions, 0 deletions
diff --git a/external/mousewheel/test/index.html b/external/mousewheel/test/index.html new file mode 100755 index 000000000..ce716a40e --- /dev/null +++ b/external/mousewheel/test/index.html @@ -0,0 +1,204 @@ +<!doctype html> +<html> + <head> + <title>Testing mousewheel plugin</title> + <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> + <script type="text/javascript" src="../jquery.mousewheel.js"></script> + + <style> + #test1 { + background-color: #000; + width: 100px; + height: 100px; + color: #fff; + float: left; + } + + #test2 { + background-color: #333; + width: 100px; + height: 100px; + color: #fff; + float: left; + } + + #test3 { + background-color: #666; + width: 100px; + height: 100px; + color: #fff; + float: left; + } + + #test4 { + background-color: #000; + width: 100px; + height: 100px; + color: #fff; + float: left; + } + + #test5 { + background-color: #333; + padding: 5px; + width: 400px; + height: 400px; + color: #fff; + float: left; + } + + #test6 { + background-color: #666; + padding: 5px; + width: 250px; + height: 250px; + color: #fff; + float: left; + } + + #test7 { + background-color: #000; + padding: 5px; + width: 100px; + height: 100px; + color: #fff; + float: left; + } + + #forceScroll { + clear: both; + height: 1000px; + } + + #logger { + position: absolute; + top: 395px; + left: 12px; + width: 380px; + height: 290px; + overflow: auto; + } + </style> + <script type="text/javascript"> + $(function() { + $('#userAgent').html(navigator.userAgent); + + + $('#test1') + .mousewheel(function(event, delta) { + if (delta > 0) + log('#test1: up ('+delta+')'); + else if (delta < 0) + log('#test1: down ('+delta+')'); + + log('pageX: ' + event.pageX + ' pageY: ' + event.pageY ); + }); + + $('#test2') + .mousewheel(function(event, delta) { + if (delta > 0) + log('#test2: up ('+delta+')'); + else if (delta < 0) + log('#test2: down ('+delta+')'); + return false; // prevent default + }); + + $('#test3') + .hover(function() { log('#test3: mouseover'); }, function() { log('#test3: mouseout'); }) + .mousewheel(function(event, delta) { + log('#test3: I should not have been logged'); + }) + .unmousewheel(); + + var testRemoval = function(event, delta) { + log('#test4: I should not have been logged'); + }; + + $('#test4') + .mousewheel(function(event, delta) { + if (delta > 0) + log('#test4: up ('+delta+')'); + else if (delta < 0) + log('#test4: down ('+delta+')'); + return false; + }) + .mousewheel(testRemoval) + .mousewheel(function(event, delta) { + if (delta > 0) + log('#test4: up ('+delta+') from 2nd handler'); + else if (delta < 0) + log('#test4: down ('+delta+') from 2nd handler'); + return false; + }) + .unmousewheel(testRemoval); + + $('#test5') + .mousewheel(function(event, delta) { + if (delta > 0) + log('#test5: up ('+delta+')'); + else if (delta < 0) + log('#test5: down ('+delta+')'); + + event.stopPropagation(); + event.preventDefault(); + }); + + $('#test6') + .mousewheel(function(event, delta) { + if (delta > 0) + log('#test6: up ('+delta+')'); + else if (delta < 0) + log('#test6: down ('+delta+')'); + + event.stopPropagation(); + event.preventDefault(); + }); + + $('#test7') + .mousewheel(function(event, delta) { + if (delta > 0) + log('#test7: up ('+delta+')'); + else if (delta < 0) + log('#test7 down ('+delta+')'); + + event.preventDefault(); + }); + + function log(msg) { + $('#logger').append(msg+'<br>').scrollTop(999999); + }; + }); + </script> + </head> + <body> + <h1 id="banner">jQuery mousewheel.js - Test</h1> + <h2 id="userAgent"></h2> + + <ul> + <li><strong>Test1</strong> is just using the plain on mousewheel() with a function passed in and does not prevent default. (Also logs the value of pageX and pageY event properties.)</li> + <li><strong>Test2</strong> should prevent the default action.</li> + <li><strong>Test3</strong> should only log a mouseover and mouseout event. Testing unmousewheel().</li> + <li><strong>Test4</strong> has two handlers.</li> + <li><strong>Test5</strong> is like Test2 but has children. The children should not scroll until mousing over them.</li> + <li><strong>Test6</strong> is like Test5 but should not scroll children or parents.</li> + <li><strong>Test7</strong> is like Test6 but has no children. It will propagate the event and scroll test 6 as well.</li> + </ul> + + + <div id="test1"><p>Test1</p></div> + <div id="test2"><p>Test2</p></div> + <div id="test3"><p>Test3</p></div> + <div id="test4"><p>Test4</p></div> + <div id="test5"> + <p>Test5</p> + <div id="test6"> + <p>Test6</p> + <div id="test7"><p>Test7</p></div> + </div> + </div> + + <div id="logger"></div> + + <div id="forceScroll"></div> + </body> +</html> |