0
آموزش jquery قسمت نهم کار با Event ها
آموزش jquery قسمت نهم کار با Event ها
در قسمت های قبلی آموزش نصب JQuery ، Selector ها ، Filter ها ، Traversing ، Manipulating ، Content Inserting ، Replacing Content و CSS Content در jquery پرداختیم.
در ادامه این آموزش به مفهوم Event ها در jquery می پردازیم.
از mouseover و mouseleave برای highlight کردن استفاده می شود.
در مثال زیر یک تابع به نام highlight تعریف کردیم و سپس توسط toggleClass یک کلاس را به آن اختصاص دادیم. زمانی که ماوس روی (mouseover) متن قرار میگرد highlight می شود و زمانی که ماوس بیرون (mouseleave) متن باشد از حالت highlight خارج می شود.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
function highlight() {
$("#eventTarget").toggleClass("highlighted");
}
$(document).ready(function () {
$("#eventTarget").bind("mouseover", highlight);
$("#eventTarget").bind("mouseleave", highlight);
});
</script>
<style type="text/css">
.highlighted {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<div id="eventTarget">
www.iranganj.ir
</div>
</body>
</html>
در این مثال فقط مثال قبلی رو تغییر دادیم و mouseover و mouseleave در یک خط نوشتیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#eventTarget").bind("mouseover mouseleave", highlight);
});
function highlight(eventArgs) {
$("#eventTarget").toggleClass("highlighted");
}
</script>
<style type="text/css">
.highlighted {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<div id="eventTarget">
www.iranganj.ir
</div>
</body>
</html>
در این مثال فقط با اضافه کردن DisableHighlight زمانی که روی عنصر انتخابی کلیک می شود تابع DisableHighlight اجرا شد و توسط unbind عمل mouseover و mouseleaveرا برای آن غیر فعال می شود.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#eventTarget").bind("mouseover mouseleave", highlight);
$("#eventTarget").bind("click", DisableHighlight);
});
function highlight(eventArgs) {
$("#eventTarget").toggleClass("highlighted");
}
function DisableHighlight(eventArgs) {
$("#eventTarget").unbind("mouseover mouseleave", highlight);
}
</script>
<style type="text/css">
.highlighted {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<div id="eventTarget">
www.iranganj.ir
</div>
</body>
</html>
در این مثال که همانند مثال قبلی است فقط با استفاده از تابع html زمانی که روی عنصر انتخابی کلیک می شود یک متن را را نیز درج می کند.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#eventTarget").bind("mouseover mouseleave", highlight);
$("#eventTarget").bind("click", function (parameters) {
$("#eventTarget").unbind("mouseover mouseleave", highlight);
$("#eventTarget").html("<p>You shut off hover effect</p>");
});
});
function highlight(eventArgs) {
$("#eventTarget").toggleClass("highlighted");
}
</script>
<style type="text/css">
.highlighted {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<div id="eventTarget">
www.iranganj.ir
</div>
</body>
در مثال زیر که همانند مثال های قبلی است فقط در این مثال از کلمه this استفاده شده که اشاره به عنصر انتخابی همان تابع می کند یعنی دوباره نخواستم ID عنصر انتخابی را بنویسم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#eventTarget").bind("mouseover mouseleave", highlight);
$("#eventTarget").bind("click", function () {
$(this).unbind("mouseover mouseleave", highlight);
$(this).html("<p>You shut off hover effect</p>");
});
});
function highlight(eventArgs) {
$("#eventTarget").toggleClass("highlighted");
}
</script>
<style type="text/css">
.highlighted {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<div id="eventTarget">
www.iranganj.ir
</div>
</body>
</html>
این مثال نیز همانند مثال قبلی است فقط با این تفاوت که در صفحه چندین تگ div داریم و چون در اینجا از کلمه this استفاده کردیم زمانی که روی div مورد نظر قرار می گیریم و روی آن div کلیک می کنیم در اینجا this اشاره به همان div ی می کند که روی آن قرار گرفتیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div").bind("mouseover mouseleave", highlight);
$("div").bind("click", function (parameters) {
$(this).unbind("mouseover mouseleave", highlight);
$(this).html("<p>You shut off hover effect</p>");
});
});
function highlight(eventArgs) {
$(this).toggleClass("highlighted");
}
</script>
<style type="text/css">
.highlighted {
color: blue;
background-color: yellow;
}
div {
background-color: burlywood;
margin: 10px;
height: 100px;
width: 150px;
}
</style>
</head>
<body>
<div>
www.iranganj.ir
</div>
<div>
www.iranganj.ir
</div>
<div>
www.iranganj.ir
</div>
</body>
</html>
در مثال زیر یک table ایجاد کردیم سپس با استفاده از فیلترهای odd و even در jquery سطرهای جدول را یک در میان رنگی کردیم و سپس عمل highlight را همانند مثال های قبلی انجام دادیم و یک جدول highlight دار ایجاد کردیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
$("tr").bind("mouseover mouseleave", highlight);
$("tr").bind("click", highlight);
});
function highlight(eventArgs) {
$(this).toggleClass("highlighted");
}
</script>
<style type="text/css">
.odd {
background-color: burlywood;
}
.even {
background-color: cadetblue;
}
.highlighted {
background-color: yellow;
}
table {
width: 200px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>site</td>
<td>iranganj</td>
</tr>
<tr>
<td>site</td>
<td>karkoo</td>
</tr>
<tr>
<td>site</td>
<td>google</td>
</tr>
<tr>
<td>site</td>
<td>yahoo</td>
</tr>
</tbody>
</table>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال