همانطور که می دانید، Tooltip ها درواقع توضیحات کوتاهی هستند که با رفتن موس روی عناصر، نمایش داده می شوند. با استفاده از جی کوئری، می توان tooltip های زیبا و جذابی ایجاد نمود.
در ادامه با هم روشی که اینجا برای ایجاد tooltip با جی کوئری معرفی شده است را مرور می کنیم.
پیش نیاز: قبل از هرچیز به کتابخانه ی جی کوئری احتیاج داریم. از اینجا دریافت کنید. (اگر داخل ایران هستید، قادر به دریافت نخواهید بود که در این صورت می توانید از اینجا دریافت کنید).
1- ایجاد پنجره شناور متنی – نمایش نمونه
برای ایجاد پنجره های شناور متنی، از روش زیر استفاده می کنیم:
ابتدا این اسکریپت را دریافت کنید.
سپس در پرونده HTML ِ خود، در بین تگ head، کدهای زیر را قرار دهید:
<script src="jquery.js" type="text/javascript"></script>
<script src="tooltip-text.js" type="text/javascript"></script>
با این کار، کتابخانه جی کوئری و اسکریپتی که دریافت کردید را به صفحه HTML معرفی کردیم.
دستورات سی اس اس زیر را هم اضافه می کنیم:
#tooltip{
position:absolute;
border:1px solid #eee;
background:#f9f9f9;
padding:2px 5px;
color:#999;
display:none;
font: 11px Tahoma;
}
حالا کافی است یک لینک مانند زیر داشته باشیم:
<a class="tooltip" title="یک طراح وب" href="http://aliha.ir/">یک طراح وب</a>
هر لینکی که کلاس ِ آن برابر با tooltip باشد، از این قاعده اطاعت می کند و متنی که در title ِ آن می نویسید را در پنجره شناور نمایش می دهد.
2- ایجاد پنجره شناور تصویری – نمایش نمونه
اسکریپت آن را از اینجا دریافت کنید.
مانند مثال قبل، کتابخانه جی کوئری و اسکریپت را به صفحه HTML معرفی می کنیم.
حالا دستورات سی اس اس زیر را باید اضافه کنیم:
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
سپس در پرونده HTML، کدهای زیر را قرار می دهیم:
<ul> <li><a class="preview" href="1.jpg"><img src="1s.jpg" alt="gallery thumbnail" /></a></li> <li><a class="preview" href="2.jpg"><img src="2s.jpg" alt="gallery thumbnail" /></a></li> <li><a class="preview" href="3.jpg"><img src="3s.jpg" alt="gallery thumbnail" /></a></li> <li><a class="preview" href="4.jpg"><img src="4s.jpg" alt="gallery thumbnail" /></a></li> </ul>
همانطور که می بینید، یک لیست از چند تصویر ایجاد کردیم و به لینک شان، کلاس ِ preview دادیم.
پنجره شناور تصویری مان ایجاد شد :) می توانید به لینک های تصاویر، title هم اضافه کنید تا در پنجره شناور، یک توضیح هم نمایش داده شود.
فایل های لازم و مثال های مطرح شده را یکجا و کامل دریافت کنید(250 کیلوبایت):
