دوره مجازی جاوااسکریپت (جلسه 32): پروژه های اسلایدر، منوی کناری مخفی و محتوای تب دار

دسته بندی: جاوا اسکریپت
زمان مطالعه: ۲ دقیقه
۰۳ آذر ۱۳۹۴

امروز  جلسه پرباری رو خواهیم داشت و در این جلسه 3 پروژه جالب و بسیار کاربردی رو با هم پیاده سازی خواهیم کرد. مدت زمان این جلسه کمی طولانی شده و دلیلش هم زمان بر بودن پیاده سازی این موارد هست. در ابتدا به بررسی و توضیح دو پروژه محتوای تب دار (tabbed content) و منوی کناری مخفی خواهیم پرداخت و بعد از اون به طراحی و کدنویسی پروژه اسلایدر معروفمون می پردازیم. دموی اسلایدر طراحی شده و آموزش داده شده در این جلسه رو از لینک زیر می تونید ببینید :

مشاهده دموی پروژه اسلایدر این جلسه

مطالب مطرح شده در این جلسه عبارتند از :

  • توضیح در مورد تمرین-پروژه جلسه قبل
  • پروژه محتوای تب دار - tabbed content
  • توضیح ساختار باکس های تب دار (tabbed content)
  • توضیح کدهای html و css باکس های tabbed
  • کدهای جی کوئری محتوای تب دار
  • پروژه منوی کناری مخفی
  • توضیح کدهای پروژه منوی کناری مخفی
  • پروژه اسلایدر تصویر با امکانات ویژه
  • تعریف پروژه اسلایدر و نمایش دموی آن
  • تشریح قابلیت اسلایدر طراحی شده در این جلسه
  • توضیح کدها و ساختار html و css اسلایدر
  • تشریح قابلیت های اسلایدر و option های موجود
  • ایجاد بخش شمارنده (شماره اسلاید) برای پروژه
  • ایجاد دکمه های رفتن به اسلاید بعدی و قبلی برای پروژه
  • ایجاد دکمه های کنترلی اسلایدها برای پروژه
  • ایجاد caption و توضیح مخصوص برای هر اسلاید
  • تعین انیمیشن های ورورد و خروج هر اسلاید
  • نحوه تنظیم سرعت اجرای انیمیشن
  • نحوه تنظیم و کدنویسی برای تعین مدت زمان نمایش هر اسلاید
  • آموزش نحوه کدنویسی برای توقف اسلایدر در هنگام بردن نشانگر موس روی آن
  • آموزش نحوه پشتیبانی اسلایدر از گسچرهای لمسی برای گوشی های هوشمند و تبلت ها
  • آموزش نحوه تنظیم نوع نمایش اسلایدها (پشت سرهم یا رندم)
  • بررسی نکات مهم و ویژه پروژه این جلسه
:: توجه

این مطلب یک جلسه از آموزش javascript می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش javascript

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

sadra hakim

سلام استاد خسته نباشید
ببخشید یه سوال داشتم. چرا وقتی به کمک یک دستور ساده جی کوئری میشه یک سری المنت رو گرفت، بیایم و دستورات اضافه تر استفاده کنیم ؟
// $(this).parent().parent().find(“div.slTabContents div.slTabContent”).hide()
$(“div.slTabContents div.slTabContent”).hide()
الان این دو خط در پروژه Tab درست کار میکنند. ولی دستوراتی که در خط اول استفاده شده اند بیشتر هستند. آیا خط دوم که دستورات کمتری داره، بهینه تر نیست ؟

Farid S

آقای آوند، توی کد من https://jsfiddle.net/k6ka3wpw/
باید کد

$(slides[i]).is("

")

به این صورت بنویسم تا جواب بده

1
$($(slides[i]).is("

"))

چرا؟ شما بصورت اولی نوشید و کار کرد چرا مال من کار نمیکنه؟ و کد دوم چه معنی میده؟ مگه ما اونو ابتدا تبدیل به آبجکت جی کوئری نکردیم دوباره برای چه منظور !

لقمان آوند

شاید درست تبدیل نشده یا اینکه کدتون یه جاییش مشکل داره. اینو بررسی کنید.

hassani

آقای آوند مطمئنا شما یه شبه کدهایی مثل همین اسلایدر رو ننوشتین درسته؟و اینم میدونم که هرچه مدت زمان بیشتری با جی کویری کار کنیم و پروژه های بیشتری رو انجام بدیم مسلما توانایی ما برای سریع تر انجام دادن یک پروژه بیشتر میشه. من الان مشکلی که دارم اینه که برای یه پروژه باید مدت زیادی رو صرف کنم و روشهای مختلفی رو برای کدزدن امتحان کنم تا نتیجه بگیرم و خیلی وقتها هم نیاز دارم تا در اینترنت جستجو کنم و نمونه کدهای پروژه مشابه رو بررسی کنم. برای شما هم اون اوایل این طور بود؟
مشکل دیگه ای که دارم اینه که من مسیر انجام پروژه ام رو برای خودم مشخص میکنم ولی هنگام کد زدن به مشکل برمیخورم نمیدونم که ایده ام رو چطور با کد پیاده کنم .اگه میشه در جلسه آینده در این مورد بیشتر صحبت کنین و روش های صحیح کد زدن رو بیشتر برامون بگین. مثلا کجاها لازمه که یه تابع جدید تعریف کنیم یا کجاها از حلقه استفاده کنیم و…
و اینکه اگه امکانش هست نمونه پروژه هایی که خودتون قبلا انجام میدادین رو برامون بذارین تا ما خودمون اونا رو بررسی کنیم و به این صورت تجربه بیشتری پیدا کنیم.
تشکر

لقمان آوند

سلام
یعنی چی شبه کد ننوشتم؟ دقیقا متوجه نشدم …
جستجو و مطالعه همیشه وجود داره و من هم همین الان مابین کدزدن هام برای رفع مشکلات احتمالی جستجو و مطالع زیاد انجام میدم.
خوب برمی گرده به همون مسئله ای که توی جلسات ذکر کردم. مسیر و امکانات انجام پروژه شاید راحت باشه. نحوه انجام و بحث طراحی الگوریتم پیاده سازیش مهمه . نیاز به تجربه بیشتر داره. حالا حالا ها باید برای تواناتر شدن در این بحث کد بزنید و مطالعه کنید …

hassani

😆 😆
آقا یه شبه=یک شبه = مخالف یک روزه
منظورم اینه که خیلی سریع
متوجه میشین

hassani

سلام عالی بود.
این تکه کد خیلی هوشمندانه بود نمیدونم من باید چند روز فکر کنم تا اینو پیدا کنم:

 i = (s + slideCount) % slideCount;

و فکر کنم یه اشتباهی هم شد اینکه swipright رو باید به این صورت کد میزدین:

 slider.swiperight(function () {
     showSlide(i + 1,"fade","swipeRight")
    })

صحیح تر:

 slider.swiperight(function () {
     showSlide(i - 1,"fade","swipeRight")
    })

چون وقتی اسلاید رو به سمت راست میکشیم باید بیایم اسلاید قبلی اینطوری با دکمه های کنترل هم تنظیم میشه. و برای swipleft هم به همین صورت باید در کد تغییر ایجاد کنیم.

لقمان آوند

سلام
باید توانایی های حل مسئله و طراحی الگوریتم خودتون رو افزایش بدید تا حل این مسائل براتون ساده تر باشه. ایشالله تجربه و مطالعه تون که بالاتر بره ساده تر میشه براتون.
هدف این بود که اسلاید در جهتی که swipe می کنیم هماهنگ با اون کشیده بشه …

hassani

سلام استاد آوند
تکه کد زیر حواستون نبود اشتباهی گذاشتین:

 slide.removeClass("current");

که باید به صورت زیر میذاشتین:

 slide.removeClass('curr');

این قسمت رو هم باید اصلاح کنید:

 var anims = ["fade", "slide", "swipeRight", "swipeLeft"];
     anim = anims[rand(0, 3)];

به این صورت:

 var anims = ["fade", "slide", "swipeRight", "swipeLeft"];
     anim = anims[rand(0, 4)];

یعنی پارامتر دوم تابع رندوم رو باید طول anims بذاریم نه ایندیکس آخرین عضو اگه دقت کنین موقع رفتن اسلاید فقط سه حالت اتفاق می افته و اون حالت آخر اتفاق نمی افته یعنی حالت swipeLeft
فکر کنم مشکل از تابع رندوم باشه.

لقمان آوند

سلام
نه اشتباه نیست ولی ازش استفاده هم نکردیم. کلاس curr مربوط به کنترل های اسلایدهاست و نه خود اسلاید.
الان دقیقا یادم نیست ولی شاید تابع رندم خود پارامتر دوم رو تو اعداد نیاره و به گفته شما باید یکی اضافه تر بدیم اون رو ..
ممنون

دانشجو

سلام و خدا قوت استاد آوند عزیز و گرامی
هنوز فیلمهای بخش جیکوئری رو کامل ندیدم توی آموزشها در مورد تداخلهای جیکوئری و روشهای رفع اونها هم صحبت کردید؟ گفته بودید توی دوره جیکوئری مفصل مطرح میکنید. 😉
تشکر

لقمان آوند

بله دلیل تداخل و نحوه کدنویسی صحیح برای رفع اون رو توضیح دادیم

دانشجو

خیلی ممنونم عالیه

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

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

نیاز به لاگین

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