• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

classie : ابزاری برای مدیریت کلاسهای CSS

0 2038 ۹ دی ۹۳

در این مطلب میخوام یک ابزار Javascript بنام classie رو خدمتتون معرفی کنم و اونو آموزش بدم.

با استفاده از این ابزار میتونین به راحتی هر چه تمامتر روی کلاسهایی که مربوط به یک المنت هست مدیریت داشته باشین و هر کلاسی رو اضافه ( add ) و حذف ( remove ) و ... کنید. در ادامه در مورد کارکد اون براتون توضیح میدم. نحوه کار با اون خیلی ساده هست. ولی خوبی که این ابزار داره ، اینه که با مرورگرهای قدیمی هم سازگاری داره.

میبینید که هنگامی که روی دکمه های مختلف کلیک میکنید ، میتونین کلاسهارو به اون تگ P اضافه یا حذف کنید و با توجه به کلاسهایی که در اون لحظه هست ، استایلهای متفاوتی به تگ P اعمال میشه.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jQuery نیاز نداریم و این ابزار مستقل هست. هرچند که همه این کارهارو jQuery هم براتون انجام میده ، ولی اینو در نظر داشته باشین که حجم این ابزار تنها 3KB هست. اگر اونو فشرده کنین ، کمتر از این هم میشه. در این مطلب به classie.js نیاز داریم. من این فایل در انتهای این مطلب قرار دادم و میتونین از اون استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایل مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم. در پایان هم یک تگ script قرار دادیم ، که کدهای خودمون رو درونش بنویسیم.

 

اگر الان روی دکمه های مورد نظر کلیک کنید ، هیچ اتفاقی نمیوفته. برای اینکه با کلیک بر روی هر دکمه ، عملیات مورد نظر به همون دکمه انجام بشه ، باید در ابتدا بوسیله Javascript به اون المنتها دسترسی پیدا کنید و هر کدوم از المنتهارو در یک متغیر قرار بدین. بصورت زیر :

حالا دیگه دست شما هست که میخواین از چه رویدادی برای اجرا شدن عملیات استفاده کنید ، من در این مطلب از رویداد Click استفاده میکنم. بصورت زیر :

حالا اگه بر روی دکمه با id = one کلیک بشه ، کدهای موجود در درون این تابع اجرا خواهند شد.

classie چهار متد کلی داره که عبارتند از :

  • add : اضافه کردن یک کلاس مشخص به المنت مورد نظر
  • remove : حذف کردن یک کلاس مشخص از المنت مورد نظر
  • toggle : اضافه کردن و حذف کردن متوالی. به این صورت که اگه اون کلاس وجود داشته باشه ، اونو حذف میکنه و اگر موجود نباشه ، اونو اضافه میکنه و ترکیبی از add و remove هست
  • has : بررسی اینکه آیا یک المنت کلاس خاصی را داره یا خیر. خروجی این تابع true یا false هست

میبینید که سینتکس ( syntax ) همه متدها تقریبا شبیه به هم هست. در ابتدا classie را مینوسیم و بعد از آن نام متدی که مورد نظرمون هست. هر متد دو ورودی دریافت میکنه. ورودی اول المنت مورد نظر هست و ورودی دوم نام کلاس مورد نظر هست.

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

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram