نویسنده: علی باقری نیا
تاریخ: ۱۲,بهمن,۱۳۹۲
آخرین ویرایش: ۲۵ مهر ۱۳۹۶
بدون دیدگاه
728 بازديد

ساخت تولتیپ خودکار با کمک جی کوئری

و اما بعد… اولین و مهمترین مرحله در انجام این کار، ...

امتیاز دهید :

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
  • در این آموزش سعی ما بر این که سطح دانش  شما دوستان و همراهان عزیز رو با یک آموزش خوب بالاتر ببریم به امید اینکه مورد پسندتون قرار بگیره.

    و اما بعد…

    اولین و مهمترین مرحله در انجام این کار، تعریف یک تابع جی کوئری! اما کار این تابع چیه؟!؟
    محوریت کار این تابع، گرفتن توضیحات (Description) از خاصیت (attribute) عنوان (title) یک لینک، حذف حالت پیشفرض و تعیین حالتی جدید… این عملیات رو میتونیم به راحتی با کمک جی کوئری پیاده سازی کنیم. به همین منظور، تابع زیر رو تعریف کردیم:

    JQuery

    چون یه مقدار دستورات زیاد، من دیگه تک تک خطوط رو توضیح نمیدم! فقط به این چند مورد اشاره میکنم که توابع مهم ما عبارتند از: attr (تابع پیشفرض جی کوئری) که به همراه مقدار title، وظیفه گرفتن توضیحات خاصیت یک عنوان رو داره – init_tooltip مربوط به بحث موقعیت (position) سازی – remove_tooltip هم برای این که وقتی موس رو از روی یک لینک برداشتیم، کادر تولتیپ رو مخفی کنه…

    اما یک بخش مهم دیگه در تابع بالا، تعریف یک متغیر با نام targets که مقدار خاصیت “rel=”tooltip رو (در صورت موجود بودن) میگیره و انجام کلیه توابع رو محدود به وجود این متغیر میکنه. حالا با توجه به این توضیحات، جهت استفاده از تابع بالا، تنها کافیه که خاصیت  ”rel=”tooltip رو به لینک هامون اضافه کنیم. به عنوان نمونه:

    HTML

    * توجه: یادتون باشه که برای کار کردن تولتیپ، حتما باید لینک هاتون دارای خاصیت عنوان (title) باشند.

    تا اینجا بخش مهمی از کار رو انجام دادیم، فقط چون این حالت جدید فارق از یک استایل مشخص، با استفاده از نام آی دی tooltip (که تعریفش رو در متغیر tooltip ریخته بودیم)، یک استایل زیبا رو به فرم زیر ایجاد میکنیم که شباهت زیادی به تولتیپ بوت استرپ داره:

    CSS

    و کار تموم…
    امیدوارم که از این آموزش خوشتون اومده باشه… :)

    منبع: دنیای وردپرس و برنامه نویسی – http://alimir.ir

    فقط فراموش نکنید که حتما مارو تو گوگل پلاس محبوب کنید البته لایکم فراموش نشه…:)

  • تازه های وردپرس رو از کانال تلگرام خانه وردپرس دنبال کنید