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

آخرین ارسال های تالار مشاهده انجمن

عنوانپاسخبازدیدتوسط
iconforumافزونه لینک کوتاه مطالب وردپرس11212tourbinblog
iconforumبهینه سازی وردپرس00ehsannasr
iconforumترفند هایی جذاب در طراحی سایت دانشگاهی00sitecode
iconforumطراحی سایت داینامیک در سایت کد00sitecode
iconforumساخت سیستم عضویت کاربر در وردپرس319Configer
iconforumکمک کنید!!!878Configer
iconforumکدام اسکریپت؟!125M.J Saberyan
iconforumفروش وب سایت کافه دانلود Caffedownload.ir587smz9999
iconforumخرید قالب دوستونه وردپرس893Configer
iconforumمشکل با اسکریپت ActiveCampaign کمک فوری327Configer
iconforumنیاز به اسکریپت240Configer

آموزش وردپرس WordPressآموزش وردپرس WordPress سایت

آموزش جی کوئری jQueryآموزش جی کوئری jQuery جاوا اسکریپت

آموزش انگولار جی اس Angular JS آموزش انگولار جی اس 2 AngularJS 

آموزش اچ تی ام ال HTML5 CSS3آموزش HTML5 و CSS3 اچ تی ام ال 5

آموزش پی اچ پی PHPآموزش پی اچ پی PHP پک 1 برنامه نویسی وب

آموزش سئو SEO آموزش سئو سایت و وردپرس SEO گوگل 

آموزش سوئیفت SWIFT آموزش سوئیفت Swift برنامه نویسی اپل

آموزش برنامه نویسی اندروید استودیو  آموزش برنامه نویسی اندروید استودیو  

آموزش زامارین Xamarinآموزش زامارین Xamarin برنامه نویسی موبایل

درگاه پرداخت

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

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

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

و اما بعد…

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

JQuery

 

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

در ادامه بخوانید  افزونه سئو وردپرس SEO Premium Yoast نسخه 3.1.2

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

HTML

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

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

CSS

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

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


به کانال تلگرام بیست اسکریپت بپیوندید !

دانلود

خرید هاست پربازدید با منابع کاملا اختصاصی


مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1393/04/31 5 آموزش ها , تولتيپ , جی کوئری , مقالات,آموزش,ترفند

لینک کوتاه مطلب : http://www.20script.ir/?p=7597

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
2,032اسکریپت جی کوئری بنر های اسلایدی با طرح کاشی تاریخ : 1395/03/12
3,612افکت گذاری بسیار زیبا بر روی تصاویر با جی کوئری تاریخ : 1392/12/17
2,052اسکریپت اسلایدر جی کوئری Zoom In/Out نسخه 2.0 تاریخ : 1395/02/28
3,200آموزش اجرای متد ها در jquery تاریخ : 1392/08/30
1,540پلاگین جی کوئری دکمه اشتراک گذاری مطالب در موبایل تاریخ : 1395/02/11
4,188پلاگین جی کوئری شمارنده اعداد FlipCounter تاریخ : 1394/04/21
2,668Seven Slider اسلایدر فوق العاده زیبا به صورت جی کوئری تاریخ : 1392/08/30
3,260ایجاد انیمیشن متنی با Textillate به صورت جی کوئری تاریخ : 1393/04/22
2,715اسلایدر سه بعدی بسیار زیبای جی کوئری تاریخ : 1392/08/11
2,341اسکریپت منوی تصویری بسیار زیبا و کاربردی تاریخ : 1392/08/10
1,967افزونه حرفه ای مکعب نمونه کارها تاریخ : 1392/09/24
2,160منوی حرفه ای به صورت جی کوئری تاریخ : 1392/08/3
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب