جهت ورود به تالار گفتمان سایت کلیک کنید


پلاگین جی کوئری تغییر استایل ToolTip + آموزش ساده

منظور از تولتیب ها, همان کادر های ساده و رنگ روشنی هستند که با قرار دادن موس بر روی آنها , پس از 1 ثانیه ظاهر میشوند و شرح مختصری از اون Object رو به ما میده .

این تولتیب ها با دادن اتربیوت title به یک تگ در html ساخته می شوند .

همانطور که میدانیم به صورت پیش فرض تولتیب ها دارای استایلی ساده می باشند .

با استفاده از این آموزش میتوانید این استایل را تغییر و از یکنواختی در بیاورید .

پلاگین جی کوئری تغییر استایل ToolTip + آموزش ساده

آموزش :

ابتدا باید فایل های مورد نیاز را از اینجا دانلود کنید و سپس در روت ( root ) سایت خود قرار دهید . ( منظور از روت , پوشه ی اصلی سایت شماست . مثلا در هاست های لینوکسی , در پوشه ی public_html و یا www )

نکته : کاملا بدیهی است که این آموزش , طریقه نصب پلاگین در روت سایت میباشد و اگر بخواهید جای فایل ها و پوشه هارو عوض کنید , باید آدرس دهی کدهایی که در ادامه آموزش خواهم داد رو هم به صورت مناسب عوض کنید .

حال در بالای صفحه و یا صفحات خود , کد زیر را در بین دو تگ <head> و <head/> قرار دهید .

<link rel="stylesheet" type="text/css" href="css/tooltipster.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.js"></script>

پس از این کار , کدهای زیر را در 2 خط مانده به آخر , یعنی قبل از دو تگ <html/> و <body/> قرار دهید .

<script type="text/javascript">
	$(document).ready(function() {
		$('*').tooltipster();
	});
</script>

 نکته :  برای دادن این خاصت به هر تگی که دوست دارید , کافیست اتربیوت title را به آن تگ اضافه کنید . البته به دلیل از بین بردن شلوغی در وب سایت , بهتر است فقط به تگ های لینک و عکس این خاصیت را بدهید .

<a href="http://اسکریپت.com" title="اسکریپت دات کام<"ترفند و آموزش</a>
<img src="test.jpg" title="اسکریپت دات کام">

دموی آماده پلاگین

پحش اختصاصی

گرداوری : وحید مجیدی

دانلود نمونه ی آماده :

[sdm_download id=”1728″ fancy=”0″]

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

7 پاسخ به “پلاگین جی کوئری تغییر استایل ToolTip + آموزش ساده”

  1. علی گفت:

    دمت گرم داش.
    خیلی آقایی.

  2. رضا گفت:

    سلام اقای مجیدی
    من تمام مراحل رو به درستی انجام دادم اما متاسفانه کد نمایش داده نمی شه یعنی تولتیپ به صورت معمولی به نمایش در میاد
    میشه کمک کنید

    با تشکر

  3. dashesi_lamer گفت:

    یه سوال داشتم این بکسی که تگ ها رو توش میذاری رو چطوری تو سایتمون بذاریم

  4. dashesi_lamer گفت:

    20*20=جیگرتو :D

پاسخ دادن به علی لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *