دوره مجازی جاوا اسکریپت (جلسه 27): پروژه - طراحی پلاگین closable (افزودن قابلیت بسته شدن به تگ ها)



visibility  
mode_comment   ۷

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

$('selector').closable();

closeBtn

:: به همین راحتی دکمه ای به تگ های دلخواه خودتون اضافه خوهید کرد که با کلیک روی اون تگ مذکور با انیمیشن دلخواه مخفی شود.

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

  • پروژه - پلاگین closable : افزودن قابلیت بسته شدن به تگ های html
  • آموزش نحوه قرار دادن دکمه X برای بستن تگ در گوشه آن
  • توضیح در مورد تگ هایی با خصوصیت absolute  در css
  • تشخیص تگ در برگیرنده X برای بسته شدن در هنگام کلیک
  • تعریف رویداد کلیک برای بسته شدن تگ در برگیرنده دکمه X
  • آموزش نحوه تعین و کدنویسی انیمیشن های مختلف برای بسته شدن تگ
  • تعین انیمیشن بسته شدن تگ توسط کاربر
  • تعین آیکون بسته شدن برای پروژه
info توجه

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

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

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

سلام این جلسه هم خیلی خوب بود البته بیشتر به خاطر نکته هاش که خیلی کاربردی و مهم بودند.
لطف کنید اون نکته هایی که در طول این دوره بهش اشاره میکردیم و شما میگفتین در پروژه ها بهشون میپردازیم رو هم در این پروژه ها توضیح بدین.مثل همون قابلیتی که در رجکس داشتیم lookbehind.

مهدی خسروی replyپاسخ

سلام.گفته بودین که پاسخ تمرین جلسه قبل رو در این جلسه میدین، حیف که این اتفاق نیفتاد 🙁

لقمان آوند

تمرین چی بود؟ احتمالا جلسات بعد گفتیم …

مهدی خسروی

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

لقمان آوند

بسیار خوب .
کدش یه چیزی شبیه این میشه :

Arash Taghavi replyپاسخ

خسته نباشید،آقای آوند درون توی پلاگین closable گفتین یه پارامتر animation تعریف میکنیم بعد با سوییچ میگیم که به ازای هر مقدار یه کاری انجام بده.حالا من میخوام خود animation هم ورودی بگیره.یعنی مثلا مقدارش “fadeOut(5000)” باشه و در قسمت سوییچ هم اون عدد 5000 گرفته بشه و در دستورمون که همون fadeOut شدن المان هست لحاظ بشه.ممنون میشم یه راهنمایی کنید

لقمان آوند

پیشنهاد می کنم اینو به عنوان تمرین برای خودتون در نظر بگیرید و سعی کنید با این چالش در بیفتید!
اگر تا 1 هفته نتونستید درستش کنید بگید که بهتون بگم چیکار کنید.
خیلی سخت نیست

ارسال نظرات

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