کدنویسی طراحی وب

آسان ترین راه برای ایجاد tooltip (پنجره شناور) با کمک جی کوئری

همانطور که می دانید، Tooltip ها درواقع توضیحات کوتاهی هستند که با رفتن موس روی عناصر، نمایش داده می شوند. با استفاده از جی کوئری، می توان tooltip های زیبا و جذابی ایجاد نمود.
در ادامه با هم روشی که اینجا برای ایجاد tooltip با جی کوئری معرفی شده است را مرور می کنیم.

tooltip-23213

پیش نیاز: قبل از هرچیز به کتابخانه ی جی کوئری احتیاج داریم. از اینجا دریافت کنید. (اگر داخل ایران هستید، قادر به دریافت نخواهید بود که در این صورت می توانید از اینجا دریافت کنید).

 

۱- ایجاد پنجره شناور متنی – نمایش نمونه

برای ایجاد پنجره های شناور متنی، از روش زیر استفاده می کنیم:

ابتدا این اسکریپت را دریافت کنید.

سپس در پرونده HTML ِ خود، در بین تگ head، کدهای زیر را قرار دهید:

۱.<script src="jquery.js" type="text/javascript"></script>

۱.<script src="tooltip-text.js" type="text/javascript"></script>

با این کار، کتابخانه جی کوئری و اسکریپتی که دریافت کردید را به صفحه HTML معرفی کردیم.

دستورات سی اس اس زیر را هم اضافه می کنیم:

۰۱.#tooltip{
۰۲.position:absolute;
۰۳.border:۱px solid #eee;
۰۴.background:#f9f9f9;
۰۵.padding:۲px ۵px;
۰۶.color:#۹۹۹;
۰۷.display:none;
۰۸.font: ۱۱px Tahoma;
۰۹.}

حالا کافی است یک لینک مانند زیر داشته باشیم:

۱.<a class="tooltip" title="یک طراح وب" href="http://aliha.ir/">یک طراح وب</a>

هر لینکی که کلاس ِ آن برابر با tooltip باشد، از این قاعده اطاعت می کند و متنی که در title ِ آن می نویسید را در پنجره شناور نمایش می دهد.

۲- ایجاد پنجره شناور تصویری – نمایش نمونه

اسکریپت آن را از اینجا دریافت کنید.

مانند مثال قبل، کتابخانه جی کوئری و اسکریپت را به صفحه HTML معرفی می کنیم.

حالا دستورات سی اس اس زیر را باید اضافه کنیم:

۱.#preview{
۲.position:absolute;
۳.border:۱px solid #ccc;
۴.background:#۳۳۳;
۵.padding:۵px;
۶.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 هم اضافه کنید تا در پنجره شناور، یک توضیح هم نمایش داده شود.

فایل های لازم و مثال های مطرح شده را یکجا و کامل دریافت کنید(۲۵۰ کیلوبایت):

download-zip

منبع : www.aliha.ir

درباره نویسنده

یک وب

یک‌وب ، تنها یک وب نیست

دیدگاهتون رو ارسال کنید