0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

آموزش ساخت تولتیپ با جی کوئری

نویسنده پشتیبانی وب یار
امتیاز مطلب
Rate this post
تعداد بازدید 921
تاریخ بروزرسانی ۷ اردیبهشت ۱۴۰۱

تولتیپ چیست؟

تولتیپ را می توان به هر عنصر فعال (آیکون ها، پیوندهای متنی، دکمه ها و غیره) در یک صفحه متصل کرد. آنها توضیحاتی را برای عنصر خود ارائه می دهند. بنابراین، تولتیپ بسیار متنی و خاص هستند. در این مبحث از مجموعه آموزش های وب یار می خواهیم نحوه ساخت تولتیپ را آموزش دهیم.

ابتدا توسط جی کوئری یک تابع می سازیم تا برای تولتیپ tooltip از آن برای تول تیپ لینک ها استفاده کنیم آموزش ساختن تولتیپ

tooltip_preview

tooltip

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

JQuery

در ساخت تولتیپ با جی کوئری توابع مهم ما عبارتند از:

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

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

HTML

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

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

CSS

Rate this post
مطالب مرتبط
دیدگاه ها

دیدگاهتان را بنویسید

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