تبلیغات
طراحی و بهینه سازیمشاهده

هاست

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

آموزش ها , تولتيپ , جی کوئری , مقالات,آموزش,ترفند
ساخت تولتیپ خودکار با کمک جی کوئریReviewed by Admin on Jul 22Rating:

مدتی پیش ، یکی از دوستان سؤالی رو مطرح کرده بود که “چطور میشه حالت پیشفرض تولتیپ رو در لینک های سایتمون شخصی سازی کنیم؟ “، در پاسخ به این دوست عزیز، امروز فرصتی پیدا کردم تا با یک پست آموزشی جدید در خدمت همراهان همیشگی بیست اسکریپت باشم.

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

و اما بعد…

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

JQuery

 

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

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

HTML

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

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

CSS

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

فقط فراموش نکنيد که کتابخانه جي کوئري هم حتما بايد در قالبتون فراخواني شده باشه.
دوستان وردپرسي ميتونن، تابع رو در يک فايل js و کدهاي css رو در شيوه نامه قرار بدن.در آخر هم براي لينک هاشون خاصيت rel رو که توضيحش رو دادم تعريف کنند.

دانلود

.

تور استانبول | مشاهده لیست قیمت ها


دیجیتال لایف مرجع تخصصی قالب وردپرس و آموزش برنامه نویسی


مطلب مفیدی بود ؟
کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
5,396اسکریپت ایجاد صفحات Flip Book با اسکریپت WOWBook تاریخ : 2013/10/29
4,699اسلایدر بسیار پیشرفته جی کوئری در ۱۴ طرح تاریخ : 2013/11/24
2,844پلاگین جی کوئری نمایش فید مخازن گیتهاب Github تاریخ : 2016/04/14
4,813اسکریپت بنر های اسلایدی حرفه ای CJ Shuffle تاریخ : 2016/08/4
7,491ساخت تابلو اعلانات با کمک جی کوئری تاریخ : 2014/08/12
3,172گالری پیشرفت نوار بسیار حرفه ای جی کوئری تاریخ : 2013/11/25
6,706دانلود ساعت آنالوگ جی کوئری + PSD تاریخ : 2013/11/20
4,369پلاگین زیبا و متحرک Loader سایت به صورت جی کوئری تاریخ : 2014/03/9
3,412اسکریپت لیست کارها به صورت ایجکس تاریخ : 2013/10/21
3,914روبان بسیار زیبای متحرک به صورت جی کوئری تاریخ : 2014/03/28
2,559دانلود عنصر های انتخاب بسیار زیبا جی کوئری تاریخ : 2013/12/3
5,966فهرست آبشاری با بهره گیری از جی کوئری تاریخ : 2014/07/29
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب