• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

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

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

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

دیدگاه ها 12 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    دانشجو(۵ آذر ۱۳۹۴)

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

  • ‏‏

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


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


    صحیح تر:


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

    • ‏‏
      لقمان آوند(۵ آذر ۱۳۹۴)

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

      • ‏‏

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


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


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


        به این صورت:


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

        • ‏‏
          لقمان آوند(۶ آذر ۱۳۹۴)

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

  • ‏‏

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

    • ‏‏
      لقمان آوند(۵ آذر ۱۳۹۴)

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

  • ‏‏

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

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

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

  • نکته : برای پاسخگویی سریعتر و بهتر، بخش نظرات این مطلب مختص پرسش و پاسخ های کاربران ثبت نامی در دوره ی دوره آموزش جامع و پروژه محور جاوااسکریپت و جی کوئری (پایه تا پیشرفته) است .
    اگر قبلا در این دوره ثبت نام کرده اید پس از ورود به سایت می توانید تمامی پرسش و پاسخ ها و نظرات مطرح شده ی این مطلب را مشاهده و اگر سوالی دارید در همینجا مطرح کنید.

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram