رویدادها در jQuery - رویداد ( ) toggle
رویداد ( ) toggle در jQuery :
افکت ( ) toggle بین دو افکت ( ) show و ( ) hide
تغییر وضعیت می دهد .
فکت ( ) toggle وضعیت نمایش و یا عدم نمایش عنصر مورد نظر رابر روی صفحه می سنجد . اگر عنصر
در حال نمایش باشد آن را با استفاده از متد Hide مخفی کرده و اگر عنصر مخفی باشد آن
را با استفاده از متد Show نمایش می دهد .
نکته : این متد برای عناصری که از ابتدای اجرای صفحه مخفی تعیین شده
اند ، کار نمی کند .
برای مشاهده نحوه کار افکت ( ) toggle به مثال عملی دقت نمایید .
شکل کلی استفاده از این متد به شرح زیر است :
|
Syntax
|
$( selector ).toggle( speed , easing , callback ) ;
|
|
توضیح
|
|
تعیین کننده id عنصری است که می خواهیم افکت ( ) toggle ، بر روی آن اجرا شود .
|
این پارامتر تعیین کننده سرعت انجام افکت و تغییر حالت عنصر از حالت اول به دوم است
. استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
1) MiliSecond : مدت زمان اجرای افکت بر حسب میلی ثانیه .
2) Slow : سرعت آهسته
3) Fast : سرعت زیاد
|
این پارامتر تعیین کننده سرعت انجام افکت در ابتدا و انتهای آن است . استفاده از این
پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
1) Swing :سرعت انجام افکت در ابتدا و انتهای فرایند آهسته ولی در وسط آن زیاد است
.
2) Liner : سرعت در کل طول فرایند یکسان است .
|
به وسیله این پارامتر می توانیم یک تابع را تعیین کنیم ، تا در پایان انجام افکت (
) toggle ، اجرا شود .
استفاده از این پارامتر اختیاری است .
|
مثال : در مثال زیر یک پاراگراف داریم . برای آن یک رویداد
( ) toggle نوشته ایم ، با هر بای کلیک کاربر بر روی دکمه فرمان رویداد ( ) toggle
برای آن اجرا شده و وضعبت نمایش یا عدم نمایش آن تغییر می کند :
< html >
< head >
< script type="text/javascript" src="jquery.js"
> < /script >
< script type="text/javascript" >
$(document).ready(function () {
$("#btn1").click(function(){
$("#p1").toggle();
});
});
</script>
</head>
<body>
<p id="p1" style="font-size: 16px"> نحوه
تغییر وضعیت عنصر</p>
<button id="btn1" type="button"> Toggle ( )</button>
</body>
</html>
|
|
نحوه تغییر وضعیت عنصر
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :