1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

آموزش jQuery

شروع موضوع توسط hector2141 ‏12/9/12 در انجمن Web

صفحه 2 از 3
  1. hector2141

    کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش jQuery

    [h=2]رویدادها در jQuery - رویداد focusin[/h] رویداد ( ) focusin در jQuery :
    رویداد focusin زمانی اتفاق می افتد که یک عنصر فرزند ( عنصری که در درون یک عنصر دیگر قرار گرفته است )، فوکوس برنامه را به دست آورد . عنصری که در هر لحظه انتخاب شده و تمرکز برنامه بر روی آن است ، فوکوس برنامه را در اختیار دارد . دقت کنید که برای رخ دادن این رویداد ، باید یک عنصر فرزند فوکوس را به دست آورد و نه خود عنصر . بدیهی است این رویداد در مورد تگ هایی که عنصر فرزند ندارند ، اجرا نمی شود .
    برای مثال فرض کنید که یک تگ < div > طراحی کرده ایم که در درون آن دو کادر متن قرار دارد . زمانی که هر کدام از کادرهای متین درون آن ، فوکوس برنامه را به دست آورد ، این رویداد اتفاق می افتد .
    شکل کلی استفاده از این متد به شرح زیر است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Syntax [/TD]
    [TD="class: prdes, align: left"] $ ( " selector " ).focusin ( function ( ) { ... some code ... } ; [/TD]
    [/TR]
    [/TABLE]

    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] syntax توضیح [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] توضیح [/TD]
    [TD="class: header"] Parameter [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] selector کنترل یا عنصری است که یک عنصر فرزند آن فوکوس برنامه را به دست می آورد . [/TD]
    [TD="class: header"] selector [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود . [/TD]
    [TD="class: header"] function ( ) [/TD]
    [/TR]
    [/TABLE]

    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Example [/TD]
    [TD="class: prdes, align: left"] $ ( " #div_1 " ).focusin ( function ( ) { ... some code } ; [/TD]
    [/TR]
    [/TABLE]

    در چند مثال سعی می کنیم تا استفاده از رویداد focusin را در عمل به شما نمایش دهیم .
    مثال : در مثال اول یک تگ < div > داریم که دو عدد کادر متن به عنوان عنصر فرزند در درون آن قرار گرفته است . کدی طراحی کرده ایم که با اجرای آن ، در هنگامی که یکی از کادرهای متن کنترل فوکوس برنامه را به دست آورد ، رنگ پس زمینه کنترل مادر یعنی تگ < div > تغییر می کند . برای مشاهده خروجی هر کدام از کادر های متن را انتخاب کنید :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" #div_1 ") . focusin ( function( ){
    $ ( this ) . css( " background-color " , " Gray " );
    });
    });
    </script>
    </head>
    <body>
    <div id="div_1" style="border: 1px solid black ; padding : 10px" >
    Name : < input type="text" id="Text1" size="10" />
    Family : < input type="text" id="Text2" size="10" />
    < div >
    </body>
    </html> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] Name :
    Family :
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    مثال 2 : در مثال دوم همان مثال اول را تکرار کرده ایم با این تفاوت که در این مورد ، با بدست آوردن فوکوس برنامه توسط هر یک از کادر های متن ، فونت نوشته عنصر مادر یعنی تگ div به صورت bold در می آید .
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" #div_2 ") . focusin ( function( ){
    $ ( this ) . css( " font-weight " , " bold " );
    });
    });
    </script>
    </head>
    <body>
    <div id="div_2" style="border: 1px solid black ; padding : 10px" >
    Name : < input type="text" id="Text3" size="10" />
    Family : < input type="text" id="Text4" size="10" />
    < div >
    </body>
    </html>
    [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] Name :
    Family :
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
     
    hector2141, ‏12/9/12
    #11
  2. hector2141

    کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش jQuery

    [h=2]افکت ها در jQuery - افکت fadeIn[/h] افکت ( ) fadeIn در jQuery :
    این افکت باعث می شود تا عنصر مورد اثر آن به تدریج از حالت مخفی به حالت نمایان در بیاید .این افکت در یک افکت تصویری با زیاد کردن نور عنصر به تدریج باعث نمایان شدن آن می شود .
    بدیهی است این افکت بر روی عناصری قابل اجراست که در ابتدا مخفی باشند . شکل کلی استفاده از این متد به شرح زیر است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Syntax [/TD]
    [TD="class: prdes, align: left"] $ ( " selector " ).fadeIn ( speed , callback ) [/TD]
    [/TR]
    [/TABLE]
    توضیح هر یک از موارد syntax :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] syntax توضیح [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] توضیح [/TD]
    [TD="class: header"] Parameter [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] selector عنصری است که این افکت باعث نمایان شدن آن می شود . [/TD]
    [TD="class: header"] selector [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] این پارامتر اختیاری بوده و مقدار پیش فرض آن صفر است .
    این پارامتر سرعت نمایان شدن عنصر توسط افکت را تعین می کند .
    این پارامتر به دو صورت قابل مقداردهی می باشد .
    • تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر به تدریج نمایان شود را نعیین می کنید . مثلا 100 ms .
    • تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
      • "slow"
      • "normal"
      • "fast"
    [/TD]
    [TD="class: header"] speed [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و نمایان شدن عنصر مورد نظر ، آن تابع اجرا شود .
    به کار بردن این پارامتر اختیاری است . [/TD]
    [TD="class: header"] callback [/TD]
    [/TR]
    [/TABLE]
    در چند مثال سعی می کنیم تا استفاده از افکت ( ) fadeIn را در عمل به شما نمایش دهیم .

    مثال 1 : در مثال اول یک تگ < div > د اریم که در ابتدا از دید کاربر مخفی است . یک دکمه فرمان طراحی کرده ایم که کاربر برای مشاهده تگ < div > مخفی باید بر روی آن کلیک نماید . با کلیک بر روی دکمه فرمان مثال تگ < div > نمایان می شود :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # Btn_1 ") . click ( function( ){
    $ ( " # div_1 " ) . fadeIn( )
    });
    });
    </script>
    </head>
    <body>
    < input type="button" id="Btn_1" value="click me for fadeIn!" />
    <div id= "div_1" style = "font-size: medium ; border: solid 1px black " >
    در این سایت آموزش زبان های زیر را داریم
    <ul>
    <li>HTML </li>
    <li>CSS </li>
    <li>Java Script </li>
    <li>jQuery </li>
    </ul>
    < /div >
    </body>
    </html> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"]
    در این سایت آموزش زبان های زیر را داریم
    • HTML
    • CSS
    • Java Script
    • jQuery
    ​
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    مثال 2 : نحوه استفاده از پارامتر speed در افکت fadeIn در مثال دوم ، مثال قبل را بازنویسی کرده ایم با این تفاوت که در 2 حالت به پارامتر speed افکت fadeIn مقدار داده ایم . برای مشاهده تاثیر مقدار پارامتر بر روی افکت بر روی خروجی های مثال کلیک نمایید :
    [TABLE="width: 100%"]
    [TR]
    [TD] [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] مثال حالت 1 : مقدار 2000 میلی ثانیه برای انجام افکت [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # Btn_2 ") . click ( function( ){
    $ ( " # div_2 " ) . fadeIn( 2000 )
    });
    });
    </script>
    </head>
    <body>
    < input type="button" id="Btn_2" value="click me for fadeIn!" />
    <div id= "div_2" style = "font-size: medium ; border: solid 1px black " >
    در این سایت آموزش زبان های زیر را داریم
    <ul>
    <li>HTML </li>
    <li>CSS </li>
    <li>Java Script </li>
    <li>jQuery </li>
    </ul>
    < /div >
    </body>
    </html> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"]
    در این سایت آموزش زبان های زیر را داریم
    • HTML
    • CSS
    • Java Script
    • jQuery
    ​
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [/TD]
    [TD] [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] مثال حالت 2 : مقدار slow برای انجام افکت [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # Btn_3 ") . click ( function( ){
    $ ( " # div_3 " ) . fadeIn( "slow" )
    });
    });
    </script>
    </head>
    <body>
    < input type="button" id="Btn_3" value="click me for fadeIn!" />
    <div id= "div_3" style = "font-size: medium ; border: solid 1px black " >
    در این سایت آموزش زبان های زیر را داریم
    <ul>
    <li>HTML </li>
    <li>CSS </li>
    <li>Java Script </li>
    <li>jQuery </li>
    </ul>
    < /div >
    </body>
    </html>
    [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"]
    در این سایت آموزش زبان های زیر را داریم
    • HTML
    • CSS
    • Java Script
    • jQuery
    ​
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [/TD]
    [/TR]
    [/TABLE]
     
    hector2141, ‏12/9/12
    #12
  3. hector2141

    کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش jQuery

    [h=2]لیست افکت ها ( effects ) در jQuery[/h] لیست افکت ها ( effects ) در jQuery :
    افکت ها در jQuery یکی از مهمترین و پرکاربردترین قابلیت ها در این زبان هستند که به طراحان وب امکانات گسترده و جذابی را می دهند . افکت ها jQuery شامل تعدادی متد از پیش تعریف شده هستند که برای مثال به شما امکان می دهند عناصر مورد نظر خود را مخفی و نمایان کرده و یا نحوه نمایش آن را تغییر دهید .
    استفاده از افکت ها در jQuery بسیار ساده و شبیه رویداد ها در این زبان هستند . بهتر است قبل از مطالعه این بخش ، بخش آموزش رویدادها در jQuery را مطالعه نمایید .
    در لیست زیر به معرفی مهمترین افکت ها در jQuery پرداخته ایم . برای دریافت اطلاعات درباره هر افکت بر روی نام آن کلیک نمایید :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] نام افکت [/TD]
    [TD="class: prdes"] شرح
    [/TD]
    [/TR]
    [TR]
    [TD="class: prname"] fadeIn ( ) [/TD]
    [TD="class: prbody"] این افکت باعث می شود عنصر مورد اثر خود را به آرامی از حالت نمایان به حالت مخفی در بیاورد . [/TD]
    [/TR]
    [TR]
    [TD="class: prname"] fadeOut ( ) [/TD]
    [TD="class: prbody"] این افکت باعث می شود عنصر مورد اثر خود را به آرامی از حالت مخفی به حالت نمایان در بیاورد . [/TD]
    [/TR]
    [TR]
    [TD="class: prname"] fadeTo ( ) [/TD]
    [TD="class: prbody"] این افکت میزان وضوح نمایش عنصر مورد اثر خود را به یک میزان دلخواه تغییر می دهد . [/TD]
    [/TR]
    [TR]
    [TD="class: prname"] hide ( ) [/TD]
    [TD="class: prbody"] این افکت عنصر مورد اثر خود را مخفی می کند . [/TD]
    [/TR]
    [TR]
    [TD="class: prname"] show ( ) [/TD]
    [TD="class: prbody"] این افکت عنصر مورد اثر خود را نمایان می کند . [/TD]
    [/TR]
    [TR]
    [TD="class: prname"] slideDown ( ) [/TD]
    [TD="class: prbody"] این افکت با افزایش تدریجی ارتفاع ، عنصر مورد اثر خود را نمایان می کند . [/TD]
    [/TR]
    [TR]
    [TD="class: prname"] slideUp ( ) [/TD]
    [TD="class: prbody"] این افکت با کاهش تدریجی ارتفاع ، عنصر مورد اثر خود را مخفی می کند . [/TD]
    [/TR]
    [/TABLE]
     
    hector2141, ‏12/9/12
    #13
  4. hector2141

    کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش jQuery

    [h=2]افکت ها در jQuery - افکت fadeIn[/h] افکت ( ) fadeIn در jQuery :
    این افکت باعث می شود تا عنصر مورد اثر آن به تدریج از حالت مخفی به حالت نمایان در بیاید .این افکت در یک افکت تصویری با زیاد کردن نور عنصر به تدریج باعث نمایان شدن آن می شود .
    بدیهی است این افکت بر روی عناصری قابل اجراست که در ابتدا مخفی باشند . شکل کلی استفاده از این متد به شرح زیر است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Syntax [/TD]
    [TD="class: prdes, align: left"] $ ( " selector " ).fadeIn ( speed , callback ) [/TD]
    [/TR]
    [/TABLE]
    توضیح هر یک از موارد syntax :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] syntax توضیح [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] توضیح [/TD]
    [TD="class: header"] Parameter [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] selector عنصری است که این افکت باعث نمایان شدن آن می شود . [/TD]
    [TD="class: header"] selector [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] این پارامتر اختیاری بوده و مقدار پیش فرض آن صفر است .
    این پارامتر سرعت نمایان شدن عنصر توسط افکت را تعین می کند .
    این پارامتر به دو صورت قابل مقداردهی می باشد .
    • تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر به تدریج نمایان شود را نعیین می کنید . مثلا 100 ms .
    • تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
      • "slow"
      • "normal"
      • "fast"
    [/TD]
    [TD="class: header"] speed [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و نمایان شدن عنصر مورد نظر ، آن تابع اجرا شود .
    به کار بردن این پارامتر اختیاری است . [/TD]
    [TD="class: header"] callback [/TD]
    [/TR]
    [/TABLE]
    در چند مثال سعی می کنیم تا استفاده از افکت ( ) fadeIn را در عمل به شما نمایش دهیم .

    مثال 1 : در مثال اول یک تگ < div > د اریم که در ابتدا از دید کاربر مخفی است . یک دکمه فرمان طراحی کرده ایم که کاربر برای مشاهده تگ < div > مخفی باید بر روی آن کلیک نماید . با کلیک بر روی دکمه فرمان مثال تگ < div > نمایان می شود :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # Btn_1 ") . click ( function( ){
    $ ( " # div_1 " ) . fadeIn( )
    });
    });
    </script>
    </head>
    <body>
    < input type="button" id="Btn_1" value="click me for fadeIn!" />
    <div id= "div_1" style = "font-size: medium ; border: solid 1px black " >
    در این سایت آموزش زبان های زیر را داریم
    <ul>
    <li>HTML </li>
    <li>CSS </li>
    <li>Java Script </li>
    <li>jQuery </li>
    </ul>
    < /div >
    </body>
    </html> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"]
    در این سایت آموزش زبان های زیر را داریم
    • HTML
    • CSS
    • Java Script
    • jQuery
    ​
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    مثال 2 : نحوه استفاده از پارامتر speed در افکت fadeIn در مثال دوم ، مثال قبل را بازنویسی کرده ایم با این تفاوت که در 2 حالت به پارامتر speed افکت fadeIn مقدار داده ایم . برای مشاهده تاثیر مقدار پارامتر بر روی افکت بر روی خروجی های مثال کلیک نمایید :
    [TABLE="width: 100%"]
    [TR]
    [TD] [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] مثال حالت 1 : مقدار 2000 میلی ثانیه برای انجام افکت [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # Btn_2 ") . click ( function( ){
    $ ( " # div_2 " ) . fadeIn( 2000 )
    });
    });
    </script>
    </head>
    <body>
    < input type="button" id="Btn_2" value="click me for fadeIn!" />
    <div id= "div_2" style = "font-size: medium ; border: solid 1px black " >
    در این سایت آموزش زبان های زیر را داریم
    <ul>
    <li>HTML </li>
    <li>CSS </li>
    <li>Java Script </li>
    <li>jQuery </li>
    </ul>
    < /div >
    </body>
    </html> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"]
    در این سایت آموزش زبان های زیر را داریم
    • HTML
    • CSS
    • Java Script
    • jQuery
    ​
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [/TD]
    [TD] [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] مثال حالت 2 : مقدار slow برای انجام افکت [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # Btn_3 ") . click ( function( ){
    $ ( " # div_3 " ) . fadeIn( "slow" )
    });
    });
    </script>
    </head>
    <body>
    < input type="button" id="Btn_3" value="click me for fadeIn!" />
    <div id= "div_3" style = "font-size: medium ; border: solid 1px black " >
    در این سایت آموزش زبان های زیر را داریم
    <ul>
    <li>HTML </li>
    <li>CSS </li>
    <li>Java Script </li>
    <li>jQuery </li>
    </ul>
    < /div >
    </body>
    </html> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"]
    در این سایت آموزش زبان های زیر را داریم
    • HTML
    • CSS
    • Java Script
    • jQuery
    ​
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [/TD]
    [/TR]
    [/TABLE]
     
    hector2141, ‏12/9/12
    #14
  5. hector2141

    کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش jQuery

    [h=2]افکت ها در jQuery - افکت fadeOut[/h] افکت ( ) fadeOut در jQuery :
    این افکت باعث می شود تا عنصر مورد اثر آن به تدریج از حالت نمایان به حالت مخفی در بیاید .این افکت در یک افکت تصویری با کم کردن نور عنصر به تدریج باعث مخفی شدن آن از دید کاربر می شود .
    شکل کلی استفاده از این متد به شرح زیر است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Syntax [/TD]
    [TD="class: prdes, align: left"] $ ( " selector " ).fadeOut ( speed , callback ) [/TD]
    [/TR]
    [/TABLE]
    توضیح هر یک از موارد syntax :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] syntax توضیح [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] توضیح [/TD]
    [TD="class: header"] Parameter [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] selector عنصری است که این افکت باعث مخفی شدن آن می شود . [/TD]
    [TD="class: header"] selector [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] این پارامتر اختیاری بوده و مقدار پیش فرض آن صفر است .
    این پارامتر سرعت مخفی شدن عنصر توسط افکت را تعین می کند .
    این پارامتر به دو صورت قابل مقداردهی می باشد .
    • تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر به تدریج مخفی شود را نعیین می کنید . مثلا 100 ms .
    • تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت مخفی شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
      • "slow"
      • "normal"
      • "fast"
    [/TD]
    [TD="class: header"] speed [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و مخفی شدن عنصر مورد نظر ، آن تابع اجرا شود .
    به کار بردن این پارامتر اختیاری است . [/TD]
    [TD="class: header"] callback [/TD]
    [/TR]
    [/TABLE]
    در چند مثال سعی می کنیم تا استفاده از افکت ( ) fadeOut را در عمل به شما نمایش دهیم .

    مثال 1 : در مثال اول یک تگ < div > داریم که با کلیک کاربر بر روی آن افکت fadeOut اجرا شده و باعث مخفی شدن آن می شود . برای اجرای افکت بر روی متن تگ < div > کلیک نمایید .
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # div_1 ") . click ( function( ){
    $ ( " # div_1 " ) . fadeOut( )
    });
    });
    </script>
    </head>
    <body>
    <div id= "div_1" style = "font-size: medium ; border: solid 1px black " >
    jQuery is a very inteligent way for programming . many wonderful things you can do with it !
    < /div >
    </body>
    </html> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] jQuery is a very inteligent way for programming . many wonderful things you can do with it !
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    مثال 2 : نحوه استفاده از پارامتر speed در افکت fadeOut در مثال دوم ، مثال قبل را بازنویسی کرده ایم با این تفاوت که در 2 حالت به پارامتر speed افکت fadeOut مقدار داده ایم . برای مشاهده تاثیر مقدار پارامتر بر روی افکت بر روی خروجی های مثال کلیک نمایید :
    [TABLE]
    [TR]
    [TD] [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] مثال حالت 1 : مقدار 2000 میلی ثانیه برای انجام افکت [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # div_2 ") . click ( function( ){
    $ ( " # div_2 " ) . fadeOut( 2000 )
    });
    });
    </script>
    </head>
    <body>
    <div id= "div_2" style = "font-size: medium ; border: solid 1px black " >
    jQuery is a very inteligent way for programming . many wonderful things you can do with it !
    < /div >
    </body>
    </html> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] jQuery is a very inteligent way for programming . many wonderful things you can do with it !
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [/TD]
    [TD] [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] مثال حالت 2 : مقدار slow برای انجام افکت [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # div_3 ") . click ( function( ){
    $ ( " # div_3 " ) . fadeOut( "slow" )
    });
    });
    </script>
    </head>
    <body>
    <div id= "div_3" style = "font-size: medium ; border: solid 1px black " >
    jQuery is a very inteligent way for programming . many wonderful things you can do with it !
    < /div >
    </body>
    </html> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"] jQuery is a very inteligent way for programming . many wonderful things you can do with it !
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    [/TD]
    [/TR]
    [/TABLE]

    [HR][/HR]
     
    hector2141, ‏12/9/12
    #15
  6. hector2141

    کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش jQuery

    [h=2]افکت ها در jQuery - افکت fadeTo[/h] افکت ( ) fadeTo در jQuery :
    این متد میزان شفافیت و وضوح نمایش یک عنصر را به تدریج به یک مقدار تعیین شده از سوی کاربر تغییر می دهد .
    به عبارت دیگر این افکت میزان نور نمایش یک عنصر را کم یا زیاد می کند . شکل کلی استفاده از این متد به شرح زیر است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Syntax [/TD]
    [TD="class: prdes, align: left"] $ ( " selector " ).fadeTo ( speed , opacity , callback ) [/TD]
    [/TR]
    [/TABLE]
    توضیح هر یک از موارد syntax :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] syntax توضیح [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] توضیح [/TD]
    [TD="class: header"] Parameter [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] selector عنصری است که این افکت باعث تغییر وضوح نمایش آن می شود . [/TD]
    [TD="class: header"] selector [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] این پارامتر در این متد اجباری بوده و حتما باید مقدار دهی شود . در غیر این صورت افکت کار نخواهد کرد .
    این پارامتر سرعت تغییر وضوح تصویر عنصر توسط افکت را تعین می کند .
    این پارامتر به دو صورت قابل مقداردهی می باشد .
    • تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن وضوح تصویرعنصر تغییر کند را نعیین می کنید . مثلا 100 ms .
    • تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت تغییر وضوح تصویر عنصر را آرام ، معمولی و یا سریع انتخاب می نمایید .
      • "slow"
      • "normal"
      • "fast"
    [/TD]
    [TD="class: header"] speed [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] این پارامتر در این متد اجباری بوده و حتما باید مقدار دهی شود . در غیر این صورت افکت کار نخواهد کرد . .
    این پارامتر میزان تغییر وضوح تصویر عنصر را تعیین می کند . مقداری که به این پارامتر می توان داد باید عددی بین 0.0 تا 1 باشد و هر چه عدد انتخاب شده کمتر باشد ، وضوح تصویر عنصر هم کمتر خواهد بود . [/TD]
    [TD="class: header"] opacity [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان یافتن اجرای افکت و تغییر وضوح تصویر عنصر مورد نظر ، آن تابع اجرا شود .
    به کار بردن این پارامتر اختیاری است . [/TD]
    [TD="class: header"] callback [/TD]
    [/TR]
    [/TABLE]
    در چند مثال سعی می کنیم تا استفاده از افکت ( ) fadeTo را در عمل به شما نمایش دهیم .

    مثال 1 : در مثال اول یک تگ < div > د اریم که در ابتدا به صورت عادی نمایش داده می شود . کاربر می تواند با کلیک بروی دکمه فرمان تعیین شده وضوح تصوی آن تگ را در مدت 2 ثانیه به مقدار نصف کاهش دهد . برای مشاهده مثال در عمل بر روی دکمه فرمان در خروجی کلیک نمایید :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # Btn_1 ") . click ( function( ){
    $ ( " # div_1 " ) . fadeTo ( 2000 , 0.5 )
    });
    });
    </script>
    </head>
    <body>
    < input type="button" id="Btn_1" value="click me for fadeTo half!" />
    <div id= "div_1" style = "font-size: medium ; border: solid 1px black " >
    در این سایت آموزش زبان های زیر را داریم
    <ul>
    <li>HTML </li>
    <li>CSS </li>
    <li>Java Script </li>
    <li>jQuery </li>
    </ul>
    < /div >
    </body>
    </html> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"]
    در این سایت آموزش زبان های زیر را داریم
    • HTML
    • CSS
    • Java Script
    • jQuery
    ​
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    مثال 2 : در مثال دوم یک عکس ( تگ < div > ) د اریم که در ابتدا به صورت عادی است . کاربر می تواند با کلیک بر روی دکمه فرمان مثال وضوح نمایش آن عکس را به میزان خیلی کمی کاهش دهد . برای مشاهده خروجی مثال بروی دکمه فرمان کلیک نمایید . توجه داشته باشید این افکت به علت استفاده از پارامتر "slow" به آرامی انجام می شود :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # Btn_2 ") . click ( function( ){
    $ ( " # Pic_1 " ) . fadeTo ( "slow" , 0.1 )
    });
    });
    </script>
    </head>
    <body>
    < input type="button" id="Btn_2" value="click me for fadeTo!" />
    < img alt="firefox" src="../Pic/firefox.gif" id="Pic_1" />
    </body>
    </html> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"]
    [​IMG] [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
     
    hector2141, ‏12/9/12
    #16
  7. hector2141

    کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش jQuery

    [h=2]افکت ها در jQuery - افکت hide[/h] افکت ( ) hide در jQuery :
    این افکت باعث مخفی شدن عنصر مورد نظر می شود . عمکلرد این افکت بسیار شبیه به افکت fadeOut می باشد . بوسیله این افکت برای مثال می توانید این اختیار را به کاربر بدهید تا عناصری را که در صفحه لازم ندارد ، مخفی کند .
    شکل کلی استفاده از این متد به شرح زیر است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Syntax [/TD]
    [TD="class: prdes, align: left"] $ ( " selector " ).hide ( speed , callback ) [/TD]
    [/TR]
    [/TABLE]
    توضیح هر یک از موارد syntax :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] syntax توضیح [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] توضیح [/TD]
    [TD="class: header"] Parameter [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] selector عنصری است که این افکت باعث مخفی شدن آن می شود . [/TD]
    [TD="class: header"] selector [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .
    این پارامتر سرعت مخفی شدن عنصر توسط افکت را تعین می کند .
    این پارامتر به دو صورت قابل مقداردهی می باشد .
    • تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی شود را نعیین می کنید . مثلا 100 ms .
    • تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت مخفی شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
      • "slow"
      • "normal"
      • "fast"
    [/TD]
    [TD="class: header"] speed [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و مخفی شدن عنصر مورد نظر ، آن تابع اجرا شود .
    به کار بردن این پارامتر اختیاری است . [/TD]
    [TD="class: header"] callback [/TD]
    [/TR]
    [/TABLE]
    در چند مثال سعی می کنیم تا استفاده از افکت ( ) hide را در عمل به شما نمایش دهیم .

    مثال 1 : در مثال اول یک تگ < div > د اریم که در ابتدا نمایش داده می شود . یک دکمه فرمان طراحی کرده ایم که کاربر برای مخفی کردن تگ < div > باید بر روی آن کلیک نماید . با کلیک بر روی دکمه فرمان مثال ، تگ < div > مخفی می شود :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # Btn_1 ") . click ( function( ){
    $ ( " # div_1 " ) . hide( )
    });
    });
    </script>
    </head>
    <body>
    < input type="button" id="Btn_1" value="click me for hide!" />
    <div id= "div_1" style = "font-size: medium ; border: solid 1px black " >
    در این سایت آموزش زبان های زیر را داریم
    <ul>
    <li>HTML </li>
    <li>CSS </li>
    <li>Java Script </li>
    <li>jQuery </li>
    </ul>
    < /div >
    </body>
    </html> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"]
    در این سایت آموزش زبان های زیر را داریم
    • HTML
    • CSS
    • Java Script
    • jQuery
    ​
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    مثال 2 : در مثال دوم دو لیست از اسامی زبان های برنامه نویسی را با آیتم های مختلف به کاربر نمایش داده ایم . در ابتدا آیتم های لیست ها به کاربر نمایش داده می شود . اما کاربر می تواند با برداشتن تیک کنترل انتخابی checkbox در مثال ، آیتم های لیست را مخفی کند . برای مخفی کردن آیتم های لیست ها تیک کادر انتخاب را در خروجی مثال بردارید :
    راهنمایی مثال : در این مثال افکت hide اعضای کلاس Items را که همان آیتم های لیست ها هستند ، را مخفی می کند .
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # Check_1 ") . change ( function( ){
    $ ( " .Items " ) . hide( )
    });
    });
    </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> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] نمایش زیر مجموعه ها
    طراحی وب
    • HTML
    • CSS
    • Flash
    برنامه نویسی وب
    • ASP.Net
    • PHP
    • Java Script
    • jQuery
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
     
    hector2141, ‏12/9/12
    #17
  8. hector2141

    کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش jQuery

    [h=2]افکت ها در jQuery - افکت show[/h] افکت ( ) show در jQuery :
    این افکت عنصری که مخفی است را نمایان می کند . عملکرد این افکت همانند افکت fadeIn می باشد . بدیهی است عنصری که با این افکت نمایان می شود باید در ابتدا مخفی باشد .
    این افکت بر روی عناصری که با یکی از افکت های hide یا fadeOut در jQuery مخفی شده اند و یا خاصیت display آنها در css برابر با none باشد ، اثر خواهد داشت .
    شکل کلی استفاده از این متد به شرح زیر است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Syntax [/TD]
    [TD="class: prdes, align: left"] $ ( " selector " ).show ( speed , callback ) [/TD]
    [/TR]
    [/TABLE]
    توضیح هر یک از موارد syntax :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] syntax توضیح [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] توضیح [/TD]
    [TD="class: header"] Parameter [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] selector عنصری است که این افکت باعث نمایان شدن آن می شود . [/TD]
    [TD="class: header"] selector [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .
    این پارامتر سرعت نمایان شدن عنصر توسط افکت را تعین می کند .
    این پارامتر به دو صورت قابل مقداردهی می باشد .
    • تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر نمایان شود را نعیین می کنید . مثلا 100 ms .
    • تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
      • "slow"
      • "normal"
      • "fast"
    [/TD]
    [TD="class: header"] speed [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و نمایان شدن عنصر مورد نظر ، آن تابع اجرا شود .
    به کار بردن این پارامتر اختیاری است . [/TD]
    [TD="class: header"] callback [/TD]
    [/TR]
    [/TABLE]
    در چند مثال سعی می کنیم تا استفاده از افکت ( ) show را در عمل به شما نمایش دهیم .

    مثال 1 : در مثال اول یک تصویر ( تگ < img > ) د اریم که در ابتدا مخفی است . یک دکمه فرمان طراحی کرده ایم که کاربر می تواند با کلیک بر روی آن باعث نمایان شدن و نمایش عکس شود . برای مشاهده عکس مخفی بر روی دکمه فرمان در خروجی مثال کلیک نمایید :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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> [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body"]
    [​IMG] [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
    مثال 2 : در مثال دوم دو لیست از اسامی زبان های برنامه نویسی را با آیتم های مختلف به کاربر نمایش داده ایم . در ابتدا آیتم های لیست ها مخفی هستند . اما کاربر می تواند با علامت زدن تیک کنترل انتخابی checkbox در مثال ، آیتم های لیست را نمایان کند . برای نمایان کردن آیتم های لیست ها تیک کادر انتخاب را در خروجی مثال علامت بزنید :
    راهنمایی مثال : در این مثال افکت show اعضای کلاس Items را که همان آیتم های لیست ها هستند ، را نمایان می کند .
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < 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>
    [/TD]
    [TD="class: header"] کد [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] نمایش زیر مجموعه ها
    طراحی وب
    • HTML
    • CSS
    • Flash
    برنامه نویسی وب
    • ASP.Net
    • PHP
    • Java Script
    • jQuery
    [/TD]
    [TD="class: header"] خروجی [/TD]
    [/TR]
    [/TABLE]
     
    hector2141, ‏12/9/12
    #18
  9. hector2141

    کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش jQuery

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

    افکت ( ) slideDown در jQuery :
    این افکت با افزایش تدریجی ارتفاع یک عنصر مخفی ، آن را از حالت مخفی به حالت نمایان در می آورد . در واقع این افکت این کار را در قالب یک افکت تصویری انجام می دهد . بدیهی است این افکت بر روی عنصری موثر است که در ابتدا مخفی باشد .
    این افکت بر روی عناصری که با یکی از افکت های hide یا fadeOut در jQuery مخفی شده اند و یا خاصیت display آنها در css برابر با none باشد ، اثر خواهد داشت .
    شکل کلی استفاده از این متد به شرح زیر است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Syntax
    [/TD]
    [TD="class: prdes, align: left"] $ ( " selector " ).slideDown ( speed , callback )[/TD]
    [/TR]
    [/TABLE]
    توضیح هر یک از موارد syntax :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] syntax توضیح
    [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] توضیح[/TD]
    [TD="class: header"] Parameter
    [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] selector عنصری است که این افکت باعث نمایان شدن آن می شود .
    [/TD]
    [TD="class: header"] selector
    [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .
    این پارامتر سرعت نمایان شدن عنصر توسط افکت را تعین می کند .
    این پارامتر به دو صورت قابل مقداردهی می باشد .
    • تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر نمایان شود را نعیین می کنید . مثلا 100 ms .
    • تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت نمایان شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
      • "slow"
      • "normal"
      • "fast"
    [/TD]
    [TD="class: header"] speed
    [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و نمایان شدن عنصر مورد نظر ، آن تابع اجرا شود .
    به کار بردن این پارامتر اختیاری است .[/TD]
    [TD="class: header"] callback
    [/TD]
    [/TR]
    [/TABLE]
    در چند مثال سعی می کنیم تا استفاده از افکت ( ) slideDown را در عمل به شما نمایش دهیم .

    مثال 1 : در مثال اول یک تصویر ( تگ < img > ) د اریم که در ابتدا مخفی است . یک دکمه فرمان طراحی کرده ایم که کاربر می تواند با کلیک بر روی آن باعث نمایان شدن و نمایش عکس شود . برای مشاهده عکس مخفی بر روی دکمه فرمان در خروجی مثال کلیک نمایید :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example
    [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # Btn_1 ") . click ( function( ){
    $ ( " # img_1 " ) . slideDown( )
    });
    });
    </script>
    </head>
    <body>
    < input type="button" id="Btn_1" value="click me for show image!" />
    < img id="img_1" src="../Pic/computer_banner.jpg" style="display: none" />
    </body>
    </html>[/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"]
    [/TD]
    [TD="class: header"] خروجی[/TD]
    [/TR]
    [/TABLE]
    مثال 2 : مثال قبلی را بازنویسی نموده ایم با این تفاوت که در آن پارامتر speed افکت را با مقدار 2 ثانیه مقدار دهی کرده ایم . برای مشاهده عکس مخفی و تاثیر پارامتر speed بر روی دکمه فرمان در خروجی مثال کلیک نمایید :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example
    [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # Btn_2 ") . click ( function( ){
    $ ( " # img_2 " ) . slideDown( 2000 )
    });
    });
    </script>
    </head>
    <body>
    < input type="button" id="Btn_2" value="click me for show image!" />
    < img id="img_2" src="../Pic/computer_banner.jpg" style="display: none" />
    </body>
    </html>[/TD]
    [TD="class: header"] کد[/TD]
    [/TR]
    [TR]
    [TD="class: body"]
    [/TD]
    [TD="class: header"] خروجی[/TD]
    [/TR]
    [/TABLE]
     
    hector2141, ‏12/9/12
    #19
  10. hector2141

    کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,323
    تشکر شده:
    2,698
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    پاسخ : آموزش jQuery

    [h=2]افکت ها در jQuery - افکت slideUp[/h] افکت ( ) slideUp در jQuery :
    این افکت با کاهش تدریجی ارتفاع یک عنصر باعث مخفی شدن آن می شود . در واقع این افکت این کار را در قالب یک افکت تصویری انجام می دهد .
    شکل کلی استفاده از این متد به شرح زیر است :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] Syntax [/TD]
    [TD="class: prdes, align: left"] $ ( " selector " ).slideUp ( speed , callback ) [/TD]
    [/TR]
    [/TABLE]
    توضیح هر یک از موارد syntax :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] syntax توضیح [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: center"] توضیح [/TD]
    [TD="class: header"] Parameter [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] selector عنصری است که این افکت باعث مخفی شدن آن می شود . [/TD]
    [TD="class: header"] selector [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است .
    این پارامتر سرعت مخفی شدن عنصر توسط افکت را تعین می کند .
    این پارامتر به دو صورت قابل مقداردهی می باشد .
    • تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی شود را نعیین می کنید . مثلا 100 ms .
    • تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت مخفی شدن را آرام ، معمولی و یا سریع انتخاب می نمایید .
      • "slow"
      • "normal"
      • "fast"
    [/TD]
    [TD="class: header"] speed [/TD]
    [/TR]
    [TR]
    [TD="class: body, align: right"] توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و مخفی شدن عنصر مورد نظر ، آن تابع اجرا شود .
    به کار بردن این پارامتر اختیاری است . [/TD]
    [TD="class: header"] callback [/TD]
    [/TR]
    [/TABLE]
    در چند مثال سعی می کنیم تا استفاده از افکت ( ) slideUp را در عمل به شما نمایش دهیم .

    مثال 1 : در مثال اول یک تصویر ( تگ < img > ) د اریم . یک دکمه فرمان طراحی کرده ایم که کاربر می تواند با کلیک بر روی آن باعث مخفی شدن عکس شود . برای مخفی کردن عکس بر روی دکمه فرمان در خروجی مثال کلیک نمایید :
    [TABLE="class: ex"]
    [TR]
    [TD="class: header, colspan: 2"] Example [/TD]
    [/TR]
    [TR]
    [TD="class: body"] < html >
    < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
    $ (document). ready ( function( ) {
    $ (" # Btn_1 ") . click ( function( ){
    $ ( " # img_1 " ) . slideUp( )
    });
    });
    </script>
    </head>
    <body>
    < input type="button" id="Btn_1" value="click me to hide image!" />
    < img id="img_1" src="../Pic/computer_banner.jpg" " />
    </body>
    </html> [/TD]
    [/TR]
    [/TABLE]
     
    hector2141, ‏12/9/12
    #20
صفحه 2 از 3