دوره مجازی جاوااسکریپت (جلسه 30): پروژه - طراحی و پیاده سازی پلاگین Modal

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

در جلسه امروز یکی از جالبترین پلاگین های مورد استفاده در صفحات وب رو با همدیگه از 0 تا 100 کدنویسی خواهیم کرد. پروژه امروز چیزی نیست جز پلاگین مُدال! اگر روی دکمه جستجو در منوی بالای سایت سون لرن کلیک کنید خواهید دید که یک باکس روی صفحه وب باز میشه که فرم جستجو رو درون خودش داره! پروژه امروز ما هم دقیقا همین هست. البته با امکانات و افکت های ورود جالب! با ما همراه باشید...

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

  • پروژه مُدال - Modal Boxes (شبیه ساز پنجره باز شده روی صفحه وب)
  • تشریح و توضیح کدهای html و css پروژه این جلسه
  • نحوه ارتباط دادن لینک ها و دکمه ها به باکس های مربوط به خود
  • آموزش نحوه تنظیم رنگ پس زمینه مدال
  • آموزش نحوه کدنویسی برای تنظیم شفافیت پس زمینه
  • آموزش نحوه کدنویسی برای تعین عرض مدال
  • آموزش کدنویسی برای تنظیم انیمیشن ورود مدال به صفحه وب
  • تنظیم انیمیشن های ورود از جهات مختلف و با افکت های گوناگون
  • تنظیم فاصله از بالای مدال
  • نحوه کدنویسی برای به وسط آوردن مدال
  • نحوه تنظیم انتخابی رویداد فعال برای بازشدن یک مدال
  • تنظیم سرعت انیمیشن ورود
  • نحوه دریافت توابع callback از کاربر و اجرای آنها قبل و بعد از نمایش مدال
  • تمرین - افزودن دکمه و متن برای بستن مدال
:: توجه

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

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

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

جلسات دوره

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

رسول شاکری

ای کای حداقل قسمت اول از این دوره رو به صورت رایگان قرار می دادین تا با کیفیت و سبک آموزش آشنا می شدیم

لقمان آوند

سلام
در صفحه ثبت نام دوره دمو قرار داده شده که همون قسمت اول دوره هست …

MRZ65

چرا با وجود اینکه باکسهای Modal با فریمورک Pure ایجاد شدند و قاعدتاً باید واکنش گرا باشند ولی اینگونه نیست؟

لقمان آوند

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

MRZ65

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

لقمان آوند

اینکارو هم میشه انجام داد منتهی وقتی ready میزارید از آماده بودن برای اجرا مطمئن هستید.

MRZ65

سلام استاد آوند فراموش کردن یا حواسشون نبود دقیقه 57:40 رکورد کردن ویدیو رو Pause کنند و یه اتفاق جالب توی این جلسه افتاد تا ما هم با لحظاتی لبخند خستگیمون رفع بشه!

لقمان آوند

قبلا یکی از بچه ها گزارش داده بود. چقدر هم که خودم خندیدم !!!
تو نسخه سمت وب حذف شده ولی تو دی وی دی ها احتمالا هست !

حمید رحیمی

با سلام بر استاد گرامی و تشکر از زحمتتون
استاد این تمرین این جلسه لطفا یه نگاهی بهش بندازید
خوبه یانه ممننوووووووووون
http://s8.picofile.com/file/8267480750/tamrin_7L.rar.html
😛 😛

ST

در جلسه ۳۰ دقیقه ۵۷ تا دو دقیقه بعدش رو گوش کنید ویرایش کنید ویدیو رو .
موفق باشید

وحید صالحی

بررسی شد مشکلی نداشت دوست عزیز!!!منظور شما چی هست؟

ST

احتمالا آقای آوند ویرایش کردن . ویدیویی که برای ما به صورت cd ارسال شده بود در دقیقه ۵۷ آقای آوند فردی رو صدا می کنه و فکر می کنه ویدیو رو استپ زده و …

وحید صالحی

بله این مورد اصلاح شده اما اینگونه موارد بعضی مواقع بوجود میاد و طبیعی هست به هر حال ممنونیم از توجه و دقتتون
موفق باشید

Farid S

من نتونستم این خط کد رو درک کنم

 if(typeof option.onStart === 'function')

چجوری ‘function’ نقش فانکشن رو بازی میکنه مگه رشته نیست؟ مابقی رو هم متوجه نشدم! البته توی آموزش گفتین چیکار میکنه
میدونم باوجود === باید مقدا ر و نوعشون یکی باشه ولی typeof چجوری عمل میکنه و چجوری داره true, false بر میگرده رو متوجه نشدم

لقمان آوند

سلام
دستور typeof نوع option.onStart رو بر میگردونه. نوع برگردونده شده میتونه رشته، عدد یا function باشه. اینجا بررسی میشه اگر option.onStart یک تابع بود چیکار کنه …

وحید صالحی

موارد مشابهش آموزش داده شده در کل خیلی ساده هست پیاده سازیش و بعد از این دوره باید بتونید ایجادش کنید

لقمان آوند

مشتاقانه منتظر دوره طراحی ماشین حسابت هستیم ;D
اون کد مال 4-5 سال پیش بوده و تو 1 روز جمع و جور شده و وسطاش ادامه داده نشده. البته که مشکلاتی داره. ضمن اینکه گفتم شلوغ پلوغه بیشتر از لحاظ ظاهری روش وقت گذاشته شده …

hassani

این ماشین حساب شما ضعف های زیادی داره استاد کافیه روی علامت + – / * چندبار بزنی همه چی خراب میشه یا اینکه بعد از مساوی اگه چندبار دیگه روی دکمه مساوی بزنی باید بازم جواب بده درمورد سینوس و… هم که نحوه عملکردش خیلی ضعیف و وقت بگیره تا هرچی هم که دلت بخواد میشه عدد وارد کرد که اینم ضعفه دیگه چی بگم واللا
ماشین حساب خودم از ماشین حساب استاد هم بهتره اصلا از زمین تا آسمون فرق میکنه.
من درحد ماکروسافت ماشین حسابو کدنویسی کردم.
حالا ناراحت نشین اگه مایل بودین یه دوره آموزشی براتون میذارم تا استاد گرامی هم به مهارت من نزدیک بشن. 😛 😛

لقمان آوند

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

لقمان آوند

سلام
یه توضیح کلی در مورد pure دادیم اونجا. اره تقریبا …
بله اینکار امکانپذیر هست و با کمی فکر کردن می تونید پیاده سازیش کنید به راحتی.

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

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

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

نیاز به لاگین

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