library-mirrors/jquery
1
0
Fork 0
mirror of https://github.com/jquery/jquery.git synced 2024-11-23 02:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Split out mouse hover/enter/leave tests into a separate file and add several more scenarios.

Browse Source
This commit is contained in:
Dave Methvin 2011-09-07 21:30:35 -04:00 committed by timmywil
parent 9aa553aa18
commit 8ba5010ac2
2 changed files with 144 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
test/delegatetest.html
View File

@ -184,16 +184,6 @@
</tr> </tr>
</table> </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> <ul id="log"></ul>
<script type='text/javascript'> <script type='text/javascript'>
@ -280,10 +270,6 @@
jQuery("#boundSubmit").blink(); jQuery("#boundSubmit").blink();
}); });
var n = 0;
$("div.out").live("mouseleave", function() {
$("p:last", this).text(++n);
});
</script> </script>
</body> </body>
</html> </html>

144
test/hovertest.html Normal file
View File

@ -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>