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

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



بستن
عیب یابی و تعمیر لوازم خانگی برقی کوچک
nopardaz nopardaz 0 30
الان داری چه آهنگی گوش میدی ؟
moonlover luna 512 104460
حمله ddos سرور مجازی چیست و چگونه می توان با آن مقابله کرد – بخش اول
pouyanweb9 pouyanweb9 0 34
نگاهی به تاریخچه و انواع مختلف ساز آکاردئون
minajafari minajafari 0 33
هزینه کیملیک ترکیه
minajafari minajafari 0 32
هزینه اقامت در ترکیه
minajafari minajafari 0 32
تفاوت Rank Math و Yoast در سئو وردپرس
minajafari minajafari 0 36
طراحی سایت چند منظوره
minajafari minajafari 0 37
طراحی سایت با پایتون
minajafari minajafari 0 47
طراحی سایت املاک حرفه ای
minajafari minajafari 0 44
ورزش های افزایش قد به صورت طبیعی
AminA90 AminA90 0 52
همین الان تو چه فکری هستی؟ (22)
گلایه bad_boy 542 25723
مشاعره با ترانه خوانندگان 5
غزل luna 471 45421
بالاییت از تو چی تره؟ (2)
payam cowboy luna 706 47225
حرف های تکراری ما
moonlover luna 500 72698
طراحی و ساخت اپلیکیشن های تحت وب
minajafari minajafari 0 49
معرفی کالباس بر پارس برش
allscale allscale 0 50
همه چیز درباره عاج لاستیک خودرو
saharim saharim 0 47
ارتودنسی و ورزش
minajafari shanamobl 1 44
طراحی سایت تاکسی اینترنتی
minajafari minajafari 0 38
طراحی سایت کلیکی و کسب درآمد بیشتر
minajafari minajafari 0 40
مشاوره دیجیتال مارکتینگ
asal010 asal010 0 47
طراحی سایت حرفه ای
asal010 asal010 0 39
سئو و بهینه سازی سایت
asal010 asal010 0 37
دریافت 2500 توکن رایگان
mahmoudezoj mahmoudezoj 0 40
طراحی و دکوراسیون ا چوب ترمووود
roysa roysa 0 41
امنیت سرور مجازی ویندوزی و آموزش بالا بردن امنیت آن – بخش دوم
webpouyanii webpouyanii 0 79
نمایندگی تعمیرات یخچال آریستون در تهران
nopardaz nopardaz 0 43
ساخت ایموجی سفارشی در موبایل
Iman91A Iman91A 0 54
چطوری از اینستاگرام در کامپیوتر استفاده کنیم؟
elecomco elecomco 0 48
نمونه کد اندروید چیست ?
elecomco elecomco 0 46
انواع دستگاه تصفیه آب
nopardaz nopardaz 0 51
آشنایی با تعمیر یخچال فریجیدر
nopardaz nopardaz 0 57
۵۰ روش برای تعمیر گوشی اندرویدی توسط خودتان
zhalezibayi Nazanim 1 228
چگونه یک تعمیرکار موبایل حرفه‌ای شویم؟
saragholipoor Nazanim 2 172
چرا انجام مطالعات امکان سنجی اقتصادی مهم است؟
sharmand sharmand 0 58
ترندهای رنگ مو در بهار ۲۰۲۰
Iman91A Iman91A 0 65
امنیت سرور مجازی ویندوز و آموزش بالا بردن امنیت آن – بخش اول
webpouyanii webpouyanii 0 77
درباره تور ترکیبی ترکیه
amin653 amin653 0 74
درباره تور ترکیبی استانبول ازمیر
amin653 amin653 0 64

نماد ها
دسترسی سریع به تاپیکهای مهم
تبلیغات
مطالب منتخب
مطالب پربازدید
مطالب پربازدید
آموزش جی کوئری در پانزده روز : روز ششمزمان کنونی: Saturday 06 June 2020, 01:42
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: omid
آخرین ارسال: omid
پاسخ: 1
بازدید: 491
 
امتیاز دهید:
  • 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 06 June 2020, 01:42