]> source.dussan.org Git - jquery.git/commitdiff
projects / jquery.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 9aa553a)
Split out mouse hover/enter/leave tests into a separate file and add several more...
authorDave Methvin <dave.methvin@gmail.com>
Thu, 8 Sep 2011 01:30:35 +0000 (21:30 -0400)
committertimmywil <timmywillisn@gmail.com>
Mon, 19 Sep 2011 19:42:31 +0000 (15:42 -0400)
test/delegatetest.html patch | blob | history
test/hovertest.html [new file with mode: 0644] patch | blob

diff --git a/test/delegatetest.html b/test/delegatetest.html
index 169e60f7ae0bb76271ea7706a2abeab6be9a65e5..2483063ae2b409bdae9c6714f3b999d74462465d 100644 (file)
--- 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 (file)
index 0000000..2c72674
--- /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>
jQuery JavaScript Library: https://github.com/jquery/jquery