The Mouse Toggle
event of jQuery can be used to toggle between various positions of the object
on successive mouse clicks on the Object.
Mouse toggle can be implemented by handling the toggle() event using jQuery as follows
$("#TargetObject").toggle(function(event) {
// Add code here to handle the Event
});
The below example shows on how to Handle the Mouse event in a DIV. In this example the base DIV tag keeps changing (Toggle Effect) on successive mouse clicks on the DIV object.
The below example shows on how to Handle the Mouse event in a DIV. In this example the base DIV tag keeps changing (Toggle Effect) on successive mouse clicks on the DIV object.
Example
Create a new HTML/ASPX page
Copy the below code.
Change the mapping of the jQuery file jquery-1.7.2.js to map to your local drive.
View the page in your browser to test the Mouse Event
<html xmlns="http://www.w3.org/1999/xhtml">
Create a new HTML/ASPX page
Copy the below code.
Change the mapping of the jQuery file jquery-1.7.2.js to map to your local drive.
View the page in your browser to test the Mouse Event
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Mouse
Events</title>
<script type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
src="JavaScript/jquery-1.7.2.js"></script>
<script language="javascript"
type="text/javascript">
type="text/javascript">
$(document).ready(function() {
//
// Mouse Toggle
Event
$("#divToggle").toggle(function() {
$(this).css("background-color", "red");
$("#spanToggle").text('Active Color: Red');
}, function()
{
$(this).css("background-color", "blue");
$("#spanToggle").text('Active Color: Blue');
}, function()
{
$(this).css("background-color", "green");
$("#spanToggle").text('Active Color: Green');
});
});
</script>
</head>
<body>
<form id="frmMouseEvents" runat="server">
<table cellpadding="2" cellspacing="2" border="1">
<tr valign="top">
<td align="center">
<div id="divToggle"
style="width:100px;
height:75px;
background-color:#FCF4EB;
border:1px double #E3B999;">
</div>
</td>
<td align="center">
<span
id="spanToggle"
style=" font-family:Verdana;
font-size:12px; color:Maroon;">
Click to see Toggle Effect
</span>
</td>
</tr>
</table>
</form>
</body>
</html>
Related Post
jQuery Mouse Events Tutorial
jQuery Mouse Toggle Event
jQuery MouseMove Event capture Mouse Position
jQuery Mouse Right Button Click Event
jQuery Mouse Middle Button Click Event
jQuery Mouse Left Button Click Event
jQuery Mouse Hover Event
jQuery Mouse Leave Event
jQuery Mouse Enter Event
jQuery Mouse Over Event
jQuery Mouse Up Event
jQuery Mouse Down Event
jQuery Mouse Double Click Event
jQuery Mouse Click Event
jQuery Mouse Events Tutorial
jQuery Mouse Toggle Event
jQuery MouseMove Event capture Mouse Position
jQuery Mouse Right Button Click Event
jQuery Mouse Middle Button Click Event
jQuery Mouse Left Button Click Event
jQuery Mouse Hover Event
jQuery Mouse Leave Event
jQuery Mouse Enter Event
jQuery Mouse Over Event
jQuery Mouse Up Event
jQuery Mouse Down Event
jQuery Mouse Double Click Event
jQuery Mouse Click Event
No comments:
Post a Comment