JQuery tutorial – Events — Part 3

1. mouseover mouseleave event

$(function() {
$(“#evtTarget”).on(“mouseover mouseleave”, highlight);
$(“#evtTarget”).on(“click”, function(evt) {
$(“#evtTarget”).off(“mouseover mouseleave”, highlight);
$(“#evtTarget”).html(“<p>You shut off the hover effect!</p>”);
});
});

function highlight(evt) {
$(“#evtTarget”).toggleClass(“highlighted”);
}

2.Using jQuery to find the dive position

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Using the jQuery Event Object</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“div”).click(function(evt) {
$(this).html(“pageX: ” + evt.pageX + “, pageY: ” + evt.pageY + “, type: ” + evt.type + “, target: ” +
evt.target);
});
});
</script>
<style type=’text/css’>
.normal {
width:300px;
height:200px;
background-color: Silver;
font-size:18pt;
margin:5pt 5pt 5pt 5pt;
}
</style>
</head>
<body>
<h1>Using the jQuery Event Object</h1>
<div id=”Div1″ class=”normal”>Click on this div (Div1) to see the event information</div>
<div id=”Div2″ class=”normal”>Click on this div (Div2) to see the event information</div>
<div id=”Div3″ class=”normal”>Click on this div (Div3) to see the event information</div>
</body>
</html>

3. more mouse relative event

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Using Event Helpers</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#evtTarget”).hover(highlight, highlight);

$(“#evtTarget”).click(fnClick1);
$(“#evtTarget”).dblclick(fnClick2);
});

function highlight(evt) {
$(“#evtTarget”).toggleClass(“highlighted”);
}
function fnClick1() {
$(“#evtTarget”).html(“Click!”);
}
function fnClick2() {
$(“#evtTarget”).html(“Double Click!”);
}
</script>
<style type=’text/css’>
.normal {
width:300px;
height:200px;
background-color:Yellow;
font-size:18pt;
}

.highlighted {
background-color:Red;
}
</style>
</head>
<body>
<h1>Using Event Helpers</h1>
<div id=”evtTarget” class=”normal”>Mouse over this div to see the effect. Click on it to change the content.</div>
</body>
</html>

4. div click event

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Miscellaneous jQuery Events</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“div”).one(“click”, function() {
$(this).css({ background: “red”,
cursor: “auto”
});
});
});
</script>
<style type=”text/css”>
div {
width: 60px;
height: 60px;
margin: 10px;
float: left;
background: blue;
border: 2px solid black;
cursor: pointer;
}
p {
font-size: 18pt;
}
</style>
</head>
<body>
<p>
Click on each square to change color</p>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>

5. table working with event

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Striping/Hover Highlighting a Table</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#theList tr:even”).addClass(“stripe1”);
$(“#theList tr:odd”).addClass(“stripe2”);

$(“#theList tr”).hover(
function() {
$(this).toggleClass(“highlight”);
},
function() {
$(this).toggleClass(“highlight”);
}
);

$(“#theList”).on(“click”, “tr”, function showText (evt) {
alert($(this).text());
})
});
</script>
<style type=”text/css”>
th,td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
tr {
border: 1px solid gray;
}
td {
width:200px;
padding:3px;
}
th {
background-color:#D2E0E8;
color:#003366
}
table {
border: 1pt solid gray;
}
.clickable {
cursor:pointer;
}
.stripe1 {
background-color:#0f0;
}
.stripe2 {
background-color:#afa;
}
.highlight {
background-color: #ffcc00;
font-weight:bold;
}
</style>
</head>
<body>
<h1>Using jQuery to stripe and hover-highlight a table</h1>
<table id=”theList”>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Milk</td>
<td>1.99</td>
</tr>
<tr>
<td>Eggs</td>
<td>2.29</td>
</tr>
<tr>
<td>Butter</td>
<td>3.49</td>
</tr>
<tr>
<td>Bread</td>
<td>0.99</td>
</tr>
<tr>
<td>Pasta</td>
<td>1.19</td>
</tr>
<tr>
<td>Honey</td>
<td>4.39</td>
</tr>
<tr>
<td>Cookies</td>
<td>2.99</td>
</tr>
<tr>
<td>Apples</td>
<td>0.59</td>
</tr>
<tr>
<td>Sugar</td>
<td>1.78</td>
</tr>
<tr>
<td>Pepper</td>
<td>1.56</td>
</tr>
</tbody>
</table>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s