تبلیغات متنی و بنر

رویدادها در jQuery - رویداد ( ) toggle

رویداد ( ) toggle در jQuery :

افکت ( ) toggle  بین دو افکت ( ) show و ( ) hide تغییر وضعیت می دهد .

فکت ( ) toggle وضعیت نمایش و یا عدم نمایش عنصر مورد نظر رابر روی صفحه می سنجد . اگر عنصر در حال نمایش باشد آن را با استفاده از متد Hide مخفی کرده و اگر عنصر مخفی باشد آن را با استفاده از متد Show نمایش می دهد .
نکته : این متد برای عناصری که از ابتدای اجرای صفحه مخفی تعیین شده اند ، کار نمی کند .
برای مشاهده نحوه کار افکت ( ) toggle به مثال عملی دقت نمایید .
شکل کلی استفاده از این متد به شرح زیر است :

Syntax $( selector ).toggle( speed , easing , callback ) ;

syntax توضیح
توضیح Parameter
تعیین کننده id عنصری است که می خواهیم افکت ( ) toggle ، بر روی آن اجرا شود . selector
این پارامتر تعیین کننده سرعت انجام افکت و تغییر حالت عنصر از حالت اول به دوم است . استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
1) MiliSecond : مدت زمان اجرای افکت  بر حسب میلی ثانیه .
2) Slow : سرعت آهسته
3) Fast : سرعت زیاد 		speed
این پارامتر تعیین کننده سرعت انجام افکت در ابتدا و انتهای آن است . استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
1) Swing :سرعت انجام افکت در ابتدا و انتهای فرایند آهسته ولی در وسط آن زیاد است .
2) Liner : سرعت در کل طول فرایند یکسان است . 		easing
به وسیله این پارامتر می توانیم یک تابع را تعیین کنیم ، تا در پایان انجام افکت ( ) toggle ، اجرا شود .
استفاده از این پارامتر اختیاری است . 		function

مثال : در مثال زیر یک پاراگراف داریم . برای  آن یک رویداد ( ) toggle نوشته ایم ، با هر بای کلیک کاربر بر روی  دکمه فرمان رویداد ( ) toggle برای آن اجرا شده و وضعبت نمایش یا عدم نمایش آن تغییر می کند :

Example
< 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> 		کد

نحوه تغییر وضعیت عنصر

 خروجی

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟