خوش آمدید , میهمان گرامی! ورود or ثبت نام

تغییر رنگ قالب



بستن
ورزش های افزایش قد به صورت طبیعی
AminA90 AminA90 0 22
همین الان تو چه فکری هستی؟ (22)
گلایه bad_boy 542 25596
مشاعره با ترانه خوانندگان 5
غزل luna 471 45216
بالاییت از تو چی تره؟ (2)
payam cowboy luna 706 47064
حرف های تکراری ما
moonlover luna 500 72578
طراحی و ساخت اپلیکیشن های تحت وب
minajafari minajafari 0 28
معرفی کالباس بر پارس برش
allscale allscale 0 31
همه چیز درباره عاج لاستیک خودرو
saharim saharim 0 25
ارتودنسی و ورزش
minajafari shanamobl 1 27
طراحی سایت تاکسی اینترنتی
minajafari minajafari 0 25
طراحی سایت کلیکی و کسب درآمد بیشتر
minajafari minajafari 0 29
مشاوره دیجیتال مارکتینگ
asal010 asal010 0 33
طراحی سایت حرفه ای
asal010 asal010 0 25
سئو و بهینه سازی سایت
asal010 asal010 0 23
دریافت 2500 توکن رایگان
mahmoudezoj mahmoudezoj 0 24
طراحی و دکوراسیون ا چوب ترمووود
roysa roysa 0 31
امنیت سرور مجازی ویندوزی و آموزش بالا بردن امنیت آن – بخش دوم
webpouyanii webpouyanii 0 68
نمایندگی تعمیرات یخچال آریستون در تهران
nopardaz nopardaz 0 36
ساخت ایموجی سفارشی در موبایل
Iman91A Iman91A 0 43
چطوری از اینستاگرام در کامپیوتر استفاده کنیم؟
elecomco elecomco 0 39
نمونه کد اندروید چیست ?
elecomco elecomco 0 35
انواع دستگاه تصفیه آب
nopardaz nopardaz 0 40
آشنایی با تعمیر یخچال فریجیدر
nopardaz nopardaz 0 45
۵۰ روش برای تعمیر گوشی اندرویدی توسط خودتان
zhalezibayi Nazanim 1 222
چگونه یک تعمیرکار موبایل حرفه‌ای شویم؟
saragholipoor Nazanim 2 165
چرا انجام مطالعات امکان سنجی اقتصادی مهم است؟
sharmand sharmand 0 48
ترندهای رنگ مو در بهار ۲۰۲۰
Iman91A Iman91A 0 54
امنیت سرور مجازی ویندوز و آموزش بالا بردن امنیت آن – بخش اول
webpouyanii webpouyanii 0 61
درباره تور ترکیبی ترکیه
amin653 amin653 0 54
درباره تور ترکیبی استانبول ازمیر
amin653 amin653 0 48
درباره تور ترکیبی استانبول آلانیا
amin653 amin653 0 49
تاثیر موسیقی بر جسم و روان هر فرد
Farid99 Farid99 0 75
دوستان آواکسی هر وقت وارد سایت آواکس شدی یه جمله اینجا بنویس.
rapr luna 741 90283
طراحی دکوراسیون فضای داخلی اداری با چوب شرکت Impakta
پیرامیدطرح پیرامیدطرح 0 55
چوب ترمووود در طراحی دکوراسیون
رویسا رویسا 0 47
درخواست کتاب گشایش رمز کتاب الکترونیک بحر المعارف
anasab Atorpatghan 14 4906
بیا بگو همین الان دلت چی میخواد؟ (5)
گلایه iljimae200 220 15103
یه شغل واسه نفر قبلی انتخاب کن.(با دلیل)
melika iljimae200 474 41499
رنگ زندگی از دیدگاه شما
sana iljimae200 125 11596
دلــنوشتــــه (2)
roshanak.m luna 160 31307

نماد ها
دسترسی سریع به تاپیکهای مهم
تبلیغات
مطالب منتخب
مطالب پربازدید
مطالب پربازدید
آموزش جی کوئری در پانزده روز : روز ششمزمان کنونی: Saturday 30 May 2020, 22:17
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: omid
آخرین ارسال: omid
پاسخ: 1
بازدید: 487
 
امتیاز دهید:
  • 27 رأی - میانگین امیتازات : 2.89
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش جی کوئری در پانزده روز : روز ششم
Thursday 04 February 2010, 18:14
ارسال: #1
آموزش جی کوئری در پانزده روز : روز ششم

سلام، در آموزش امروز قصد داریم پر کاربردترین مبحث جی کوئری که به Toggle معروف هست رو یاد بگیریم. Toggle در واقع کدیست که به کمک اون می تونیم یک عمل رو پی در پی انجام بدیم. به یقین این آموزش کاملترین آموزش toggle در وب فارسی هست چون سعی کردم تمام حالات toggle رو آموزش بدم و خیلی برای آموزش امروز زمان گذاشتم چون واقعاً کاربردیه و در افکتهایی که در آینده خواهم گفت کاربرد بسیار زیادی داره.

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

۱٫ محو و نمایان کردن مربع به صورت آنی

۲٫ محو و نمایان کردن مربع در بازۀ زمانی

۳٫ محو و نمایان کردن مربع به صورت کشویی

۴٫ محو و نمایان کردن مربع به صورت fade in  و fade out

5. محو و نمایان کردن یک Class

محو و نمایان کردن مربع به صورت آنی :
امروز هم چون کدهای CSS و jQuery کم هستند اون هارو درون فایل index می نویسیم. و برای هر مرحله از لینک جدا استفاده می کنیم. ابتدا مربع ۳۲۰ پیکسلی معروفمون رو به رنگ مشکی می سازیم.

01 <style type="text/css">
02 #box
03 {
04     width: 320px;
05     height: 320px;
06     background: black;
07 }
08 </style>
09 <body>
10 <div id="box"></div>
11 </body>

و لینک اول را با کلاسی به نام Toggle1 درست می کنیم تا با کلیک کردن روی اون بتونیم دستور بدیم که عمل محو و نمایان کردن آنی مربع است انجام بشه

1 <a class="toggle1" href="#">Toggle - Simple</a>

خب از ساده ترین کد شروع می کنیم یعنی خود دستور toggle . کافیه کد زیر رو بنویسید و وقتی روی لینک کلیک می کنید مربع به صورت آنی محو و با کلیک دوباره همان لحضه نمایان می شود. دوستان پرسیده بودن که چطور می تونیم یک لینک خاص رو به افکت خاصی اختصاص بدیم. همونطور که میبینید ما برای لینکمون یک کلاس تعریف کردیم به نام toggle1 و در کد زیر هم میبینید به چه صورت دستور کلیک را نوشتیم : a.toggle1

1 $(function() {
2     $('a.toggle1').click(function() {
3         $('#box').toggle();
4     });
5 });

محو و نمایان کردن مربع در بازۀ زمانی :
خب به نظر من اصلاً جالب نیست که مربع ما یک لحظه باشه و یک لحظه نباشه ! ما به راحتی می تونیم به این رفت و آمد افکت اضافه کنیم. کافیه در کد بالا درون پرانتزی که جلوی کد toggle هست یک زمان به میلی ثانیه اضافه کنیم مثلاً ۴ ثانیه برای محو و نمایان شدن :

1 $(function() {
2     $('a.toggle2').click(function() {
3         $('#box').toggle(4000);
4     });
5 });

و البته لینکی با کلاسی به نام toggle2 که با کلیک روی آن عملیات انجام شود.. به صورت زیر :

1 <a class="toggle2" href="#">Toggle - In 4 Second</a>

در این صورت مربع ما به حالت پیش فرض toggle که محوشدن آهسته + کوچک شدن عرض و ارتفاع است در مدت ۴ ثانیه محو می شود و چون از toggle استفاده کردیم با کلیک دوباره روی لینک به همین صورت نمایان خواهد شد.

محو و نمایان کردن مربع به صورت کشویی :
خب درسته که کد زیر به صورت مکرر انجام میشه ولی در اون از toggle استفاده نمی کنیم ! در واقع می شود گفت کد زیر زبانی ساده از مفهوم toggle است. بهتر است این کد را اینطور بخونیم که :
اگر #box بسته بود اون رو در زمان ۴ ثانیه باز کن در غیر این صورت اون رو در زمان ۴ ثانیه ببنید !

1 $('a.toggle3').click(function() {
2       if ($('#box').is(":hidden")) {
3           $('#box').slideDown(4000);
4     } else {
5           $('#box').slideUp(4000);
6             }
7 });

برای اجرای این دستور هم از لینک با کلاسی به نام toggle3 استفاده می کنیم :

1 <a class="toggle3" href="#">Toggle - slide up and slide down</a>

محو و نمایان کردن مربع به صورتfade in و fade out :
خب این قسمت یکمی مفهومش ممکنه سخت به نظر بیاد و توضیح کد siblings به تنهایی یک جلسه زمان می بره ولی مختصر می گم که این کد برای پیدا کردن عنصر خاصی است بین عناصر تکراری دیگر. برای درک مفهوم این کد پیشنهاد می کنم مشاهده لینک رو بخونید و مثال ها رو ببینید تا کاملاً متوجه مورد استفادۀ این بشوید.

1 $('a.toggle4').toggle(function() {
2 $('a.toggle4').siblings('#box').fadeIn(4000);
3 }, function() {
4 $('a.toggle4').siblings('#box').fadeOut(4000);
5 });

و لینک چهارم که به این صورت می نویسیم :

1 <a class="toggle4" href="#">Toggle - fade in and fade out</a>

* اگر معنی کد بالا رو متوجه نشدید نگران نباشید در آینده به تفصیل توضیح خواهم داد. این کد رو کاملاً از خودم ساختم چون در demo ها برای fade in و fade out به صورت toggle چیزی پیدا نکردم !

محو و نمایان کردن یک Class :
ما می تونیم هر Class جدیدی رو بسازیم و با toggle محو و نمایان کنیم. برای مثال من یک class میسازم و به وسیلۀ اون یک کادر به عکس اضافه می کنم. اسم class رو border می زارم و یک خط ۵ پیکسلی برای مربع تعریف می کنم :

1 .border
2 {
3     border: 5px solid red;
4 }

و لینک جدیدی برای این کار می سازم با کلاسی به نام toggle5 :

1 <a class="toggle5" href="#">Toggle - add and remove Class</a>

و میریم سراغ اصل مطلب که کد جی کوئری هست :

1 <script type="text/javascript">
2  
3         $('a.toggle5').click(function() {
4             $('#box').toggleClass('border');
5  
6         });
7 </script>

تنها فرقی که در این کد میبینید toggleclass هست که کاملاً از اسمش پیداست چه کاری انجام میده ! کافیه بعد از این کد آرایه ای که در قسمت CSS تعریف کردید رو بنویسید تا با کلیک بر روی لینک به صورت پی در پی افکت انجام شود. همین.
سعی کردم این جلسه خیلی کامل باشه. امیدوارم به دردتون بخوره…

نقل قول


پرش به انجمن:



زمان کنونی: Saturday 30 May 2020, 22:17