همانطور که می دانید، Tooltip ها درواقع توضیحات کوتاهی هستند که با رفتن موس روی عناصر، نمایش داده می شوند. با استفاده از جی کوئری، می توان tooltip های زیبا و جذابی ایجاد نمود.
در ادامه با هم روشی که اینجا برای ایجاد tooltip با جی کوئری معرفی شده است را مرور می کنیم.
پیش نیاز: قبل از هرچیز به کتابخانه ی جی کوئری احتیاج داریم. از اینجا دریافت کنید. (اگر داخل ایران هستید، قادر به دریافت نخواهید بود که در این صورت می توانید از اینجا دریافت کنید).
۱- ایجاد پنجره شناور متنی – نمایش نمونه
برای ایجاد پنجره های شناور متنی، از روش زیر استفاده می کنیم:
ابتدا این اسکریپت را دریافت کنید.
سپس در پرونده HTML ِ خود، در بین تگ head، کدهای زیر را قرار دهید:
1 |
<script src="jquery.js" type="text/javascript"></script> |
1 |
<script src="tooltip-text.js" type="text/javascript"></script> |
با این کار، کتابخانه جی کوئری و اسکریپتی که دریافت کردید را به صفحه HTML معرفی کردیم.
دستورات سی اس اس زیر را هم اضافه می کنیم:
حالا کافی است یک لینک مانند زیر داشته باشیم:
هر لینکی که کلاس ِ آن برابر با tooltip باشد، از این قاعده اطاعت می کند و متنی که در title ِ آن می نویسید را در پنجره شناور نمایش می دهد.
۲- ایجاد پنجره شناور تصویری – نمایش نمونه
اسکریپت آن را از اینجا دریافت کنید.
مانند مثال قبل، کتابخانه جی کوئری و اسکریپت را به صفحه HTML معرفی می کنیم.
حالا دستورات سی اس اس زیر را باید اضافه کنیم:
سپس در پرونده HTML، کدهای زیر را قرار می دهیم:
2 |
<li><a class="preview" href="1.jpg"><img src="1s.jpg" alt="gallery thumbnail" /></a></li> |
3 |
<li><a class="preview" href="2.jpg"><img src="2s.jpg" alt="gallery thumbnail" /></a></li> |
4 |
<li><a class="preview" href="3.jpg"><img src="3s.jpg" alt="gallery thumbnail" /></a></li> |
5 |
<li><a class="preview" href="4.jpg"><img src="4s.jpg" alt="gallery thumbnail" /></a></li> |
همانطور که می بینید، یک لیست از چند تصویر ایجاد کردیم و به لینک شان، کلاس ِ preview دادیم.
پنجره شناور تصویری مان ایجاد شد :) می توانید به لینک های تصاویر، title هم اضافه کنید تا در پنجره شناور، یک توضیح هم نمایش داده شود.
فایل های لازم و مثال های مطرح شده را یکجا و کامل دریافت کنید(۲۵۰ کیلوبایت):
