همانطور که می دانید، Tooltip ها درواقع توضیحات کوتاهی هستند که با رفتن موس روی عناصر، نمایش داده می شوند. با استفاده از جی کوئری، می توان tooltip های زیبا و جذابی ایجاد نمود.
در ادامه با هم روشی که اینجا برای ایجاد tooltip با جی کوئری معرفی شده است را مرور می کنیم.
پیش نیاز: قبل از هرچیز به کتابخانه ی جی کوئری احتیاج داریم. از اینجا دریافت کنید. (اگر داخل ایران هستید، قادر به دریافت نخواهید بود که در این صورت می توانید از اینجا دریافت کنید).
۱- ایجاد پنجره شناور متنی – نمایش نمونه
برای ایجاد پنجره های شناور متنی، از روش زیر استفاده می کنیم:
ابتدا این اسکریپت را دریافت کنید.
سپس در پرونده 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:#۹۹۹;۰۷.display:none;۰۸.font: 11px Tahoma;۰۹.}حالا کافی است یک لینک مانند زیر داشته باشیم:
۱.<a class="tooltip" title="یک طراح وب" href="http://aliha.ir/">یک طراح وب</a>هر لینکی که کلاس ِ آن برابر با tooltip باشد، از این قاعده اطاعت می کند و متنی که در title ِ آن می نویسید را در پنجره شناور نمایش می دهد.
۲- ایجاد پنجره شناور تصویری – نمایش نمونه
اسکریپت آن را از اینجا دریافت کنید.
مانند مثال قبل، کتابخانه جی کوئری و اسکریپت را به صفحه HTML معرفی می کنیم.
حالا دستورات سی اس اس زیر را باید اضافه کنیم:
۱.#preview{۲.position:absolute;۳.border:1px solid #ccc;۴.background:#۳۳۳;۵.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 هم اضافه کنید تا در پنجره شناور، یک توضیح هم نمایش داده شود.
فایل های لازم و مثال های مطرح شده را یکجا و کامل دریافت کنید(۲۵۰ کیلوبایت):
منبع : www.aliha.ir
