آموزش jQuery - افکت show

آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

آموزش اندروید مشهد | دوره طراحی مشهد | کلاس برنامه نویسی کلاس android | کلاس اندروید | آموزش asp مشهد| دوره php

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

افکت ( ) show در jQuery :

این افکت عنصری که مخفی است را نمایان می کند . عملکرد این افکت همانند افکت fadeIn می باشد . بدیهی است عنصری که با این افکت نمایان می شود باید در ابتدا مخفی باشد .
این افکت بر روی عناصری که با یکی از افکت های hide یا fadeOut در jQuery مخفی شده اند و یا خاصیت display آنها در css برابر با none باشد ، اثر خواهد داشت .
شکل کلی استفاده از این متد به شرح زیر است :

Syntax

$ ( " selector " ).show ( speed , callback )

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

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

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

مثال 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 " ) . show( ) }); }); </script> </head> <body> < input type="button" id="Btn_1" value="click me for show image!" /> < img id="img_1" src="../Pic/chrome.gif" /> </body> </html>	کد
	خروجی

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

< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ (" # Check_1 ") . change ( function( ){
          $ ( " .Items " ) . show( )
          });
        });
    </script>
  </head>
<body>
    <input type="checkbox" id="Check_1" /> نمایش زیر مجموعه ها
    طراحی وب
    <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 :

نظر شما :

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