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

افکت ها در jQuery - افکت slideToggle

افکت ( ) slideToggle در jQuery :

این افکت همانند یک عملگر دوجانبه بین دو افکت slideUp و slideDown بر روی عنصر مورد اثر خود عمل می کند .
به عبارت دیگر افکت slideToggle ابتدا وصغیت نمایش و یا عدم نمایش عنصر را بررسی کرده و در صورتی که  آن عنصر نمایان باشد ، با کاهش تدریجی ارتفاع آن باعث مخفی شدن عنصر می شود . و چنانچه عنصر مخفی باشد با افزایش تدریجی ارتفاع آن ، عنصر را نمایان می سازد .
این افکت کاربرد بسیار سودمندی می تواند داشته باشد . به وسیله آن می توانید این اختیار را به کاربر بدهید تا عناصری را که می خواهد در صفحه مخفی کرده و یا آنها را نمایان سازد .
شکل کلی استفاده از این متد به شرح زیر است :

Syntax $ ( " selector " ).slideToggle ( speed , callback )

توضیح هر یک از موارد syntax :

syntax توضیح
توضیح Parameter
selector عنصری است که این افکت باعث مخفی و یا نمایان شدن آن می شود . selector
این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .
این پارامتر سرعت مخفی و یا نمایان شدن عنصر توسط افکت را تعین می کند .
این پارامتر به دو صورت قابل مقداردهی می باشد .
  • تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی یا نمایان شود را نعیین می کنید . مثلا 100 ms .
  • تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت مخفی یا نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
    • "slow"
    • "normal"
    • "fast"
speed
توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان یافتن اجرای افکت ، آن تابع اجرا شود .
به کار بردن این پارامتر اختیاری است . 		callback

در چند مثال سعی می کنیم تا استفاده از افکت ( ) slideToggle را در عمل به شما نمایش دهیم .

مثال 1 : در مثال اول یک تصویر ( تگ < img > ) داریم . یک دکمه فرمان طراحی کرده ایم که کاربر می تواند با کلیک بر روی آن باعث تغییر وضعیت نمایش عکس شود .با کلیک بر روی دکمه فرمان چنانچه عکس نمایان باشد آن را مخفی کرده و یا برعکس. برای تغییر وضعیت نمایش عکس بر روی دکمه فرمان در خروجی مثال کلیک نمایید :

Example
< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ (" # Btn_1 ") . click ( function( ){
          $ ( " # img_1 " ) . slideToggle( )
          });
        });
    </script>
  </head>
<body>
      < input type="button" id="Btn_1" value="click me to toggle image!" />
      < img id="img_1" src="../Pic/computer_banner.jpg" " />
</body>
</html> 		کد

slideToggle example 		خروجی

مثال 2 : در مثال دوم دو لیست از اسامی زبان های برنامه نویسی را با آیتم های مختلف به کاربر نمایش داده ایم . در ابتدا آیتم های لیست ها به کاربر نمایش داده می شود . اما کاربر می تواند با برداشتن تیک کنترل انتخابی checkbox در مثال ، آیتم های لیست را مخفی کرده و دوباره با علامت زدن آن ، آیتم را نمایش دهد . برای مخفی کردن و نمایش دوباره آیتم های لیست ها تیک کادر انتخاب را در خروجی مثال تغییر دهید :
راهنمایی مثال : در این مثال افکت slideToggle اعضای کلاس Items را که همان آیتم های لیست ها هستند ، را مخفی و یا نمایان می کند .

Example
< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ (" # Check_1 ") . change ( function( ){
          $ ( " .Items " ) . slideToggle ( )
          });
        });
    </script>
  </head>
<body>
    <input type="checkbox" id="Check_1" checked="checked" /> نمایش زیر مجموعه ها
    طراحی وب
    <ul>
      <li class="Items">HTML </li>
      <li class="Items">CSS </li>
      <li class="Items">Flash </li>
    </ul>
    برنامه نویسی وب
    <ul>
      <li class="Items">ASP.Net </li>
      <li class="Items">PHP </li>
      <li class="Items">Java Script </li>
      <li class="Items">jQuery </li>
    </ul>
</body>
</html> 		کد
نمایش زیر مجموعه ها
طراحی وب
  • HTML
  • CSS
  • Flash
برنامه نویسی وب
  • ASP.Net
  • PHP
  • Java Script
  • jQuery
خروجی

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

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

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

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : جمع سه + پنج چنده ؟