• اسکریپت,قالب جوملا,قالب وردپرس,مرجع اسکریپت,نال شده,نال

  • تبلیغات



    موضوعات

    بایگانی شمسی

    محبوبترین مطالب

    به پایگاه تخصصی اسکریپت پارسی زبانان خوش آمدید.




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

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

    تاریخ : چهارشنبه، ۱ مرداد ۱۳۹۳
    589 views
    ۰دیدگاه
    نوشته:مدیر

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

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

    و اما بعد…

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

    JQuery

     

     

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

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

    HTML

     

     

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

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

    CSS

     

     

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

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

     

     

     

    دانلود
    حجم:

    Time limit is exhausted. Please reload CAPTCHA.



    تبلیغات



    آخرین ارسال ها

    نرم افزارهای ضروری

    XAMPP XAMPP
    5.6.8
    NotePad++ NotePad++
    6.8.1
    FileZilla FileZilla
    3.7.3

    پربازدید ترین ها

    آخرین دیدگاه‌ها

    تبلیغات متنی

    Email Newsletter

    Sign up for our email newsletters
    با عضویت در خبرنامه ی ما از آخرین مطالب ما در ایمیل خود با خبر شوید