آموزش جی کوئری در پانزده روز : روز دوم

چهارشنبه, ۱۶ام دی , ۱۳۸۸ | ۲۷ دیدگاه

امروز ( روز دوم ) هم به بررسی چند افکت می پردازیم. پیشنهاد می کنم حتماً آموزش روز اول را بخوانید چون آموزش امروز ادامۀ آموزش روز اول است و از همان کدها استفاده خواهیم کرد. در آموزش امروز افکت های مختلفی روی همان جعبه ی قرمز جلسۀ پیش انجام خواهیم داد.

امروز چه کار خواهیم کرد :

  1. انواع محو کردن جعبه
  2. انواع آشکار کردن جعبه
  3. عوض کردن رنگ با کد جی کوئری

انواع محو کردن جعبه :

# Display: none : ساده ترین روش که البته به جی کوئری ربطی ندارد این است که شما در CSS جعبه ، از کد   Display: none; استفاده کنید ! با این کد بعد از ریفرش کردن صفحه دیگر جعبه را نمیبینید ولی امروز یاد می گیریم که چگونه خودمان با کلیک کردن باعث محو شدن و حرکت کشویی یا … شویم. ابتدا کد آموزش روز اول که دانلود کردید باز کنید و Click Here To Fade Out رو به Click Me تغییر بدید چون امروز قرار نیست فقط محو کنیم !

# slideUp :  فکر می کنم بهترین معنی برای این کلمه ” کشویی ” بسته شدن باشه چون در موتور های جستجو گر این واژه زیاد بین کاربرهای فارسی استفاده می شود ما هم زین پس از این واژه استفاده خواهیم کرد. خب برای بسته شدن کشویی کافیست در کد روز اول به جای FadeOut از slideUp استفاده کنیم . خواهید دید که هنگام کلیک روی Click Me ، جعبه به صورت کشویی بسته می شود و در انتها نتیجه ای مانند Display: none به شما می دهد. شما در هر افکت می توانید زمان را کم و زیاد کنید. مانند : (۴۰۰۰) یا (‘slow’)

# hide :  این افکت هنگام فعال شدن باعث می شود جعبه ی ما از عرض و ارتفاع کوچک شده و در ضمن محو هم می شود. کافیست به جای slideUp از hide استفاده کنید. ببینید با چهار حرف چقدر افکت انجام می شود ! این همان سادگی جی کوئریست. فکر کنید به جای Click Me یک دکمه گذاشته اید و لینکدونی سایتتان با زدن دکمه محو خواهد شد.

انواع آشکار کردن جعبه :

برای آشکار کردن جعبه طبیعیست که اول جعبه ای نباشد سپس آن را آشکار کنیم ! خب برای این کار باید در کد CSS  جعبه Display: none; را قرار دهیم تا جعبه در ابتدا نشان داده نشود تا بتوانیم آن را با افکت های جی کوئری آشکار کنیم.

# show :  کافیست جای hide بنویسید show . میبینید که جعبه دقیقاً بر خلاف hide عمل کرده و از عرض و ارتفاع بزرگ شده و آشکار می شود.

# slideDown :  حتماً خودتان می دانید که جای نوشتن این افکت کجاست. این افکت دقیقاً بر عکس slideUp عمل می کند و جعبه را به صورت کشویی از بالا آشکار می کند. در روز های بعد به شما خواهم گفت که چگونه جعبه را از هر طرفی که دوست دارید محو یا آشکار کنید. فکر کنید یک طناب بالای سایتتان آویزان است و با کلیک روی طناب از بالای سایتتان فید یا هر چه دوست دارید به پایین کشیده می شود.

عوض کردن رنگ با کد جی کوئری :

خب برای آموزش  این کد می توانیم رنگ جعبه را عوض کنیم ولی فکر می کنم بهتر باشه که متنی بنویسم با رنگ قرمز و بعد از کلیک روی Click Me همزمان با آشکار شدن جعبه ، رنگ نوشته هم عوض شود ! به این ترتیب میبینید جی کوئری چگونه می تواند همزمان چندین افکت را با هم اجرا کند.

ابتدا در قسمت body تگ پاراگراف را باز کنید و درون تگ هر چه دوست دارید بنوسید :

</p> کسی که مثل کبک سرشو زیر برف می کنه در واقع لگد دیگرانو به جون می خره <p>

سپس در قسمت CSS رنگ قرمز را برای تگ پاراگراف انتخاب کنید :

P { color:#900 }

و در قسمت جی کوئری );’p’).css(‘color’ , ‘blue’)$ را اضافه کنید که به صورت زیر خواهد شد :

<script type="text/javascript">
		   $(function() {
		        $('a').click(function() {
				     $('#box').fadeOut(5000);
$('p').css('color' , 'blue');
		        });
		   });
</script>

: $(‘p’).css(‘color’ , ‘blue’); توضیحات کد


# طبق معمول کد با $ شروع می شود.

# p گزاره ای است که قرار است افکت روی آن انجام شود.

# .css هنگامی استفاده می شود که بخواهیم با کمک جی کوئری تغییراتی در css بدهیم

# بعد از .css همیشه دو گذاره داریم. اولی تابع تعریف است مثل color یا background-color یا تمام گذاره هایی که در css استفاده می کنیم. و گذارۀ دوم مقدار تابع است.

خب آموزش امروز تمام شد. اگر اشتباهی دارم بگیرید، اگر سئوالی هست بپرسید، اگر پیشنهادی دارید بدهید که من مشتاقانه منتظر نظرات دوستانم هستم.

پستهای مرتبط :

آموزش جی کوئری در پانزده روز : روز اول

مقدمه ای بر آموزش jQuery در ۱۵ روز

Be Sociable, Share!


۲۷ دیدگاه


  1. رضا مرندی
    ۱۶ دی ۱۳۸۸

    سلام
    قسمت نمایش کار نمی کنه ، لطفا تصحیح کنید …




  2. کامران
    ۱۶ دی ۱۳۸۸

    کار میکنه ،دوباره امتحان کنید




  3. Hesam
    ۱۶ دی ۱۳۸۸

    جی کوئری که خیلی آسونه و این که شما خوب آموزش می دید !
    ممنون




  4. مسیح
    ۱۶ دی ۱۳۸۸

    # حسام : بابا این سایتت چرا هر دفعه ارور می ده ! ما هی میایم سر بزنیم خونه نیستی … مرسی از پیگیریت آقا حسام.




  5. مينا
    ۱۶ دی ۱۳۸۸

    ممنون- خیلی عالی بود




  6. روزبه
    ۱۶ دی ۱۳۸۸

    مرسی، بسی فیض بردیم و می بریم در صورت ادامه ی این داستان!
    خیلی لطف کردی




  7. کامران
    ۱۷ دی ۱۳۸۸

    روزبه جان شما ۳۰۰۰ مین کانت رو در این بلاگ ثبت کردی




  8. مجتبي
    ۱۷ دی ۱۳۸۸

    عالی بود متشکرم




  9. روزبه
    ۱۷ دی ۱۳۸۸

    ایول. عجبا! پس یه جایزه ای چیزی !!! :دی




  10. سهیل
    ۱۹ دی ۱۳۸۸

    سلام ببخشید من هر چی نگا می کنم تو جاوا اسکریپت از $ استفاده نمی کردیم چرا اینجا از $ استفاده می کنیم




  11. مسیح
    ۱۹ دی ۱۳۸۸

    یعنی میشه از علامت دیگه ای استفاده کرد که کوتاه تر باشه ؟
    یا کلاً علامت دیگه ای داره که بشه جایگزین کرد ؟
    اگه داره من بلد نیستم. شما بگین ما یاد می گیریم خوشحالم میشیم.




  12. کامران
    ۱۹ دی ۱۳۸۸

    میح جان فکر میکنم منظور سهیل اینه که در جاوا اسکریپت همچین علامتی نداشتیم در حالیکه الان داریم




  13. ایمان
    ۲۱ دی ۱۳۸۸

    سلام
    میخواستم بدونم چطور می شود show,hideرابه صورت پی در پی انجام داد.




  14. سهیل
    ۲۱ دی ۱۳۸۸

    سلام و عرض خسته نباشید
    من اینجا هستم برای یاد گرفتن مستر مسیح
    منظور من دقیقا همونی که کامران خان گفتن من از روی w3school که حتما می شناسید می گم از اونجا که جاوا اسکریپت رُ داشتم می خوندم علامت $ نبود که ظاهرا به قول کامران الان هست
    میشه یه مرجع خوب برای یاد گیری جاوا معرفی کنید
    با تشکر




  15. مسیح
    ۲۱ دی ۱۳۸۸

    # آقا ایمان اینکه یک عملی به صورت پی در پی در جی کوئری انجام بشه بهش می گن toggle . شما می تونی خود کد toggle رو بنویسی و وقتی روی Click Me می زنی، تصویر دیده می شه و با کلیک دوباره محو می شه. مثال :
    .
    http://docs.jquery.com/Effects/toggle#switch
    .
    ولی این نمایان و محو شدن لزوماً به صورت کشویی یا shape in و shape out نیست. جلو تر انواع تکنیک های toggle رو توصیح می دم ولی از اونجایی که شما علاقه مندی پیشنهاد می کنم لینک زیر که افکتهای رایج toggle هست رو ببینی.
    .
    http://www.gowestwebdesign.com/demos/jquery-effects-1/
    .
    باز هم اگر دیدی و سئوال داشتی بپرس راهنماییت می کنم. البته اگر به جلسۀ toggle برسیم ۱۰۰% یاد می گیری که دقیقاً چند افکت برای toggle هست و کدها به چه صورت نوشته میشن.

    # آق سهیل ضمن عرض ارادت و چاق سلامتی و … باید بگم که من چشم باز کردم رفتم سراغ جی کو ئری :دی و اطلاعات جاوا اسکریپ زیادی ندارم. خانوم هوشمند که آموزش های جاوای سایت رو می نویسن شدیدن جاوا اسکریپت کار هستن و من مقابلشون صفر مطلقم. هم می تونید برید آخرین آموزش جاوا ازشون سئوال کنید.
    .
    http://www.ittutorial.ir/?p=2149
    .
    هم با ایمیل ایشون :
    magic_air_isis2294@yahoo.com
    .
    اگر مرجع آموزش جی کوئری می خواستین در بست در خدمتتون بودم ولی ۱۰۰% خانوم هوشمند مراجع بهتری به شما معرفی خواهند کرد.




  16. کامران
    ۲۱ دی ۱۳۸۸

    مسیح جان خانم هوشمن زبان برنامه نویسی جاوا رو آموزش میدهند نه زبان اسکریپت نویسی جاوا اسکریپت رو



  17. […] آموزش جی کوئری در پانزده روز : روز دوم […]



  18. […] آموزش جی کوئری در پانزده روز : روز دوم […]



  19. […] آموزش جی کوئری در پانزده روز : روز دوم […]




  20. مسعود
    ۲۶ بهمن ۱۳۸۸

    ترکوندی




  21. Alir3z4
    ۱۹ خرداد ۱۳۸۹

    سلام
    دنبال آموزش جی کویری بودم
    چون واقعا کامل هستش
    و این کار شما که آموزش در ۱۵ روز هست واقعا کاربردی هست …!
    فعلا دارم تمامی رو دانلود می کنم ..!
    از این حرکت خوبتون تشکر می کنم!




  22. نرگس
    ۱۷ مهر ۱۳۸۹

    سلام
    من تازه دارم جی کویری را شروع میکنم
    خیلی خوب اموزش میدین اصلا خسته کننده نیس
    چه طور میشه با شما ارتباط داشت؟




  23. comerun
    ۲۷ مهر ۱۳۹۰

    دوستان اگر میخوان افکت خاصی رو در حالتی اعمال کنند که با باز شدن صفحه خودش اتوماتیک انجام شه تابع رو داخل onload صفحه بنویسند :

    $
    (window)
    .
    onload
    ()




  24. noora
    ۱ آبان ۱۳۹۰

    از اموزش خوبتوتن ممنون واقعا عالی است




  25. میلاد
    ۱۷ بهمن ۱۳۹۰

    اون قسمت که تگ نوشتید
    اول میاد
    بعد

    که کار نمیکنه اینجوری درستش کنید 😀




  26. تازه کار
    ۲۰ بهمن ۱۳۹۰

    بهترین روش ممکن آموزش میدین ممنون از صبر و حوصله و دقتتون




  27. مژده
    ۲۶ مرداد ۱۳۹۱

    عالی !



دیدگاه خود را بنویسید