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



visibility  
mode_comment   ۱۲

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

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

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

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

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

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

comment دیدگاه کاربران
دانشجو replyپاسخ

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

لقمان آوند

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

دانشجو

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

hassani replyپاسخ

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


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


صحیح تر:


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

لقمان آوند

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

hassani

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


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


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


به این صورت:


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

لقمان آوند

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

hassani replyپاسخ

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

لقمان آوند

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

hassani

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

Farid S replyپاسخ

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

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

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

لقمان آوند

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

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.