diff options
Diffstat (limited to 'test')
| -rw-r--r-- | test/delegatetest.html | 14 | ||||
| -rw-r--r-- | test/hovertest.html | 144 |
2 files changed, 144 insertions, 14 deletions
diff --git a/test/delegatetest.html b/test/delegatetest.html index 169e60f7a..2483063ae 100644 --- a/test/delegatetest.html +++ b/test/delegatetest.html @@ -183,16 +183,6 @@ <td id='boundSubmit' class="red">DOCUMENT</td> </tr> </table> - - <h1>Mouseleave Tests</h1> - - <div class="out" style="margin:20px; border:1px solid #000; background: red;"> - <p>Count mouse leave event</p> - <div class="in" style="background: green; margin: 10px auto; width: 50%;"> - <p>mouse over here should not trigger the counter.</p> - </div> - <p>0</p> - </div> <ul id="log"></ul> @@ -280,10 +270,6 @@ jQuery("#boundSubmit").blink(); }); - var n = 0; - $("div.out").live("mouseleave", function() { - $("p:last", this).text(++n); - }); </script> </body> </html> diff --git a/test/hovertest.html b/test/hovertest.html new file mode 100644 index 000000000..2c7267408 --- /dev/null +++ b/test/hovertest.html @@ -0,0 +1,144 @@ +<html> +<head> +<title>Hover tests</title> +<script src="http://code.jquery.com/jquery-1.6.2.js" type='text/javascript'></script> +<style> +/* Remove body dimensions so we can test enter/leave to surrounding browser chrome */ +body, html { + border: 0; + margin: 0; + padding: 0; +} +p { + margin: 2px 0; +} +.hover-box { + background: #f33; + padding: 3px; + margin: 10px 40px 20px 0; +} +.hover-status { + background: #f66; + padding: 1px; +} +.hover-inside { + background: #6f6; + padding: 1px; + margin: 8px auto; + width: 40%; + text-align: center; +} +</style> + </head> + <body> + <h2>Hover (mouse{over,out,enter,leave}) Tests</h2> + <p>Be sure to try moving the mouse out of the browser via the left side on each test.</p> + <div id="wrapper"> + + <div id="hoverbox" class="hover-box"> + <div class="hover-status"> + <button>Activate</button> + .hover() in/out: <span class="ins">0</span> / <span class="outs">0</span> + </div> + <div class="hover-inside"> + Mouse over here should NOT trigger the counter. + </div> + </div> + + <div id="livebox" class="hover-box"> + <div class="hover-status"> + <button>Activate</button> + Live enter/leave: <span class="ins">0</span> / <span class="outs">0</span> + </div> + <div class="hover-inside"> + Mouse over here should NOT trigger the counter. + </div> + </div> + + <div id="delegateenterbox" class="hover-box"> + <div class="hover-status"> + <button>Activate</button> + Delegated enter/leave: <span class="ins">0</span> / <span class="outs">0</span> + </div> + <div class="hover-inside"> + Mouse over here should NOT trigger the counter. + </div> + </div> + + <div id="overbox" class="hover-box"> + <div class="hover-status"> + <button>Activate</button> + Bind over/out: <span class="ins">0</span> / <span class="outs">0</span> + </div> + <div class="hover-inside"> + Mouse over here SHOULD trigger the counter. + </div> + </div> + <div id="delegateoverbox" class="hover-box"> + <div class="hover-status"> + <button>Activate</button> + Delegated over/out: <span class="ins">0</span> / <span class="outs">0</span> + </div> + <div class="hover-inside"> + Mouse over here SHOULD trigger the counter. + </div> + </div> + + </div> <!-- wrapper --> + +<script> + +$(function(){ + + var x, + countIns = function() { + var d = $(this).data(); + $("span.ins", this).text(++d.ins); + }, + countOuts = function() { + var d = $(this).data(); + $("span.outs", this).text(++d.outs); + }; + + // Tests can be activated separately or in combination to check for interference + + $("#hoverbox button").click(function(){ + $("#hoverbox") + .data({ ins: 0, outs: 0 }) + .hover( countIns, countOuts ); + $(this).remove(); + }); + $("#delegateenterbox button").click(function(){ + $("html") + .find("#delegateenterbox").data({ ins: 0, outs: 0 }).end() + .delegate("#delegateenterbox", "mouseenter", countIns ) + .delegate("#delegateenterbox", "mouseleave", countOuts ); + $(this).remove(); + }); + $("#livebox button").click(function(){ + $("#livebox") + .data({ ins: 0, outs: 0 }) + .live("mouseenter", countIns ) + .live("mouseleave", countOuts ); + $(this).remove(); + }); + + $("#overbox button").click(function(){ + $("#overbox") + .data({ ins: 0, outs: 0 }) + .bind("mouseover", countIns ) + .bind("mouseout", countOuts ); + $(this).remove(); + }); + $("#delegateoverbox button").click(function(){ + $(document) + .find("#delegateoverbox").data({ ins: 0, outs: 0 }).end() + .delegate("#delegateoverbox", "mouseover", countIns ) + .delegate("#delegateoverbox", "mouseout", countOuts ); + $(this).remove(); + }); +}); + +</script> +</body> +</html> |