همانطور که می دانید، Tooltip ها درواقع توضیحات کوتاهی هستند که با رفتن موس روی عناصر، نمایش داده می شوند. با استفاده از جی کوئری، می توان tooltip های زیبا و جذابی ایجاد نمود.
در ادامه با هم روشی که اینجا برای ایجاد tooltip با جی کوئری معرفی شده است را مرور می کنیم.
پیش نیاز: قبل از هرچیز به کتابخانه ی جی کوئری احتیاج داریم. از اینجا دریافت کنید. (اگر داخل ایران هستید، قادر به دریافت نخواهید بود که در این صورت می توانید از اینجا دریافت کنید).
1- ایجاد پنجره شناور متنی – نمایش نمونه
برای ایجاد پنجره های شناور متنی، از روش زیر استفاده می کنیم:
ابتدا این اسکریپت را دریافت کنید.
سپس در پرونده HTML ِ خود، در بین تگ head، کدهای زیر را قرار دهید:
1.<script src="jquery.js" type="text/javascript"></script>1.<script src="tooltip-text.js" type="text/javascript"></script>با این کار، کتابخانه جی کوئری و اسکریپتی که دریافت کردید را به صفحه HTML معرفی کردیم.
دستورات سی اس اس زیر را هم اضافه می کنیم:
01.#tooltip{02.position:absolute;03.border:1px solid #eee;04.background:#f9f9f9;05.padding:2px 5px;06.color:#999;07.display:none;08.font: 11px Tahoma;09.}حالا کافی است یک لینک مانند زیر داشته باشیم:
1.<a class="tooltip" title="یک طراح وب" href="http://aliha.ir/">یک طراح وب</a>هر لینکی که کلاس ِ آن برابر با tooltip باشد، از این قاعده اطاعت می کند و متنی که در title ِ آن می نویسید را در پنجره شناور نمایش می دهد.
2- ایجاد پنجره شناور تصویری – نمایش نمونه
اسکریپت آن را از اینجا دریافت کنید.
مانند مثال قبل، کتابخانه جی کوئری و اسکریپت را به صفحه HTML معرفی می کنیم.
حالا دستورات سی اس اس زیر را باید اضافه کنیم:
1.#preview{2.position:absolute;3.border:1px solid #ccc;4.background:#333;5.padding:5px;6.display:none;7.color:#fff;8.}سپس در پرونده HTML، کدهای زیر را قرار می دهیم:
1.<ul>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>6.</ul>همانطور که می بینید، یک لیست از چند تصویر ایجاد کردیم و به لینک شان، کلاس ِ preview دادیم.
پنجره شناور تصویری مان ایجاد شد 🙂 می توانید به لینک های تصاویر، title هم اضافه کنید تا در پنجره شناور، یک توضیح هم نمایش داده شود.
فایل های لازم و مثال های مطرح شده را یکجا و کامل دریافت کنید(250 کیلوبایت):
منبع : www.aliha.ir
