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

- visibility ۷ mode_comment

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

$('selector').closable();

closeBtn

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

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

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

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

ثبت نام در دوره جاوااسکریپت و جی کوئری

comment دیدگاه کاربران
hassani

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

مهدی خسروی

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

لقمان آوند

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

مهدی خسروی

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

لقمان آوند

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

Arash Taghavi

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

لقمان آوند

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

نیاز به لاگین

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