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

دسته بندی: آموزش
زمان مطالعه: ۱ دقیقه
۱۷ آبان ۱۳۹۴

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

$('selector').closable();

closeBtn

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

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

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

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

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

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

جلسات دوره

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

Arash Taghavi

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

لقمان آوند

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

لقمان آوند

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

 (function( $ ) {
 $.fn.showLinkLocation = function() { 
  this.filter( "a" ).each(function() {
   var link = $( this );
   link.append( " (" + link.attr( "href" ) + ")" );
  });
  return this;
 };
}( jQuery ));
مهدی خسروی

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

لقمان آوند

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

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

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

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

نیاز به لاگین

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