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



visibility  
mode_comment   ۳۱

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

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

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

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

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

comment دیدگاه کاربران
iimmaann replyپاسخ

سلام جناب آوند
امکانش هست در پروژه ها درباره این دو پلاگین هم صحبت کنید
https://www.magictoolbox.com/magicthumb
https://www.magictoolbox.com/magic360
ممنون بابت زحماتتون

وحید صالحی

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

amir yazdi replyپاسخ

استاد در قسمت bottom نیاز نبود برای top مقدار رو در 2 ضرب کنین , در 1 ضرب می کردین کافی بود.

لقمان آوند

خوب ما یکم بردیمش پایینتر ! اصولا محافظه کارم من ;D

Mohammad Reza replyپاسخ

سلام ببخشید جلسه اخر کی هست ؟ وکی سی دی ها ارسال میشه؟؟

لقمان آوند

سلام
3 جلسه دیگه مونده و تا پایان این هفته ایشالله دوره تمومه. حداکثر 1 هفته بعد از پایان دوره هم دی وی دی ها آماده و ارسال خواهند شد .

hassani

آقا ما وقت اضافه هم ازتون میگیریم یه جلسه هم برا کم و زیادش بذارین.
پروژه ها کلا عالی هستن.
در مورد این فایل pure.css در دوره طراحی وب توضیح دادین؟
امکانش هست که وقتی روی دکمه کلیک شد فرم با درخواست ایجکس در مدال باکسمون نمایش داده بشه منظورم اینه که درخواست ایجکس رو هم در همین پلاگین بعد از تابع enterModal بیاریم؟.

لقمان آوند

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

payman3 replyپاسخ

سلام
استاد شرمنده لینک قسمت 28 این مجموعه رو پیدا نمیکنم !!!

وحید صالحی

دوست عزیز در صفحه ثبت نام دوره لینک تمام جلسات موجوده خدمت شما :
https://7learn.com/tutorials/js-s28-project-jquery-tooltip-plugin

payman3

سپاسگزارم

وحید صالحی

خواهش می کنم موفق باشید

hassani replyپاسخ

سلام
من قبلا یه ماشین حساب طراحی کردم که خیلی ایرادات داشت. توی این مدت که استاد کسالت داشتن بیشتر روی ماشین حساب کار کردم و الان نظر خودم اینه که خیلی عالی شده هرچی بررسی کردم ایراد و اشکالی درش ندیدم.این ماشین حساب به غیر از جمع و تفریق و ضرب و تقسیم اعمال دیگه ای هم انجام میده مثل لگاریتم جذر سینوس و کسینوس و تانژانت و درصدو… .یه امکان خوبی که داره اینه که اگه شما چندبار هم روی مثلا دکمه جذر کلیک کنین و بعدش روی بقیه دکمه ها هم بزنید در محاسبات مشکلی پیش نمیاد.من این ماشین حساب رو با ایده گرفتن از ماشین حساب ویندوز طراحی کردم. اگر مشکلی درش ندیدین میتونین اونو برای بقیه دانشجوها به عنوان نمونه کار یکی از دانشجوها نمایش بدین.
http://s3.picofile.com/file/8223648218/best_calculator.rar.html

لقمان آوند

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

hassani

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

لقمان آوند

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

Farid S replyپاسخ

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

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

لقمان آوند

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

ST replyپاسخ

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

وحید صالحی

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

ST

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

وحید صالحی

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

حمید رحیمی replyپاسخ

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

MRZ65 replyپاسخ

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

لقمان آوند

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

MRZ65 replyپاسخ

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

لقمان آوند

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

MRZ65 replyپاسخ

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

لقمان آوند

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

رسول شاکری replyپاسخ

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

لقمان آوند

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

ارسال نظرات

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