معمولا وقتی در یک صفحه وب، اشارهگر موس را بر روی لینکی قرار میدهید، اگر ویژگیtitle آن دارای مقداری باشد، آن را در یک جعبه زرد مشاهده میکنید که مدت نمایش آن بسیار کوتاه و دارای یک سری محدودیتهایی است. استفاده از ویژگی title برای عناصر لینک میتواند باعث شود که موتورهای جستجوگری نظیر گوگل بهتر آنها را شناسایی و دنبال کنند. شاید برای کارهای معمولی و ساده استفاده از ویژگیtitle کافی به نظر رسد، اما در شرایطی دیگر و با توجه به وضعیت صفحهای که طراحی میشود، برخی از لینکهای موجود در صفحه نیاز پیدا میکنند تا اطلاعات کاملتری را با کیفیت نمایش بهتر، به کاربران نمایش دهند.
بر این اساس و با استفاده از کتابخانه قدرتمند جیکوئری و پلاگینی که برای انجام این کار نوشته شده است میتوان این نیاز را برطرف کرد.
با استفاده از پلاگینjTip جیکوئری میتوانیدtooltip هایی با امکانات بیشتر و ظاهری بهتر را برای لینکهای موردنظر خود ایجاد کنید، به نحوی که اطلاعات کاملی را در مورد مطالبی که در لینک مورد نظر قرار دارد، به کاربران نمایش دهید.
این پلاگین اطلاعات مورد نظر جهت نمایش را از طریق روشHttpXMLRequest از سرویس دهنده دریافت و به کاربر نمایش میدهد. با افزودن کلاسی با نام jTip به لینک خود میتوانید از امکانات این پلاگین استفاده کنید.
جهت استفاده از این پلاگین ابتدا کد شناسایی جیکوئری توسط مرورگر را در قسمت head صفحه قرار دهید:
و سپس کد شناسایی پلاگین را قرار دهید:
طرز کار پلاگین jTip به این شکل است که ابتدا باید صفحهای که مایل هستید اطلاعاتش به عنوانtooltip نمایش دادهشود را جداگانه ایجاد کنید، سپس آدرسhref لینک موردنظرتان باید به صفحهای که ایجاد کرده اید اشاره کند. از این طریق میتوانیدtooltip مناسبی را برای لینکهای خود ایجاد کنید.
اما شاید این سوال برای شما پیش آید که تکلیف آدرس اصلی چه میشود؟ پاسخ بسیار ساده است، این پلاگین از انعطاف پذیری خوبی برخوردار است، به عنوان مثال فرض کنید لینک شما قرار است به آدرس www.yahoo.com اشاره کند و کاربران را به این آدرس راهنمایی کند، بر این اساس آدرس لینکی که باید در مشخصهhref لینک قرار گیرد چیزی شبیه این خواهد بود:
yahoo.htm صفحه ای است که خودتان آن را ساخته اید و در آن اطلاعاتی در مورد سایت یاهو قرار داده اید تا کاربران اطلاعات بیشتری در مورد محتوای موجود در آن آدرس، کسب کنند.
175Width= پهنای tooltip را مشخص میکند و میتوانید با تغییر آن پهنایtooltip را کنترل کنید، ضمن اینکه مقدار ارتفاعtooltip به صورت خودکار و بر اساس محتوای yahoo.htm مشخص میشود.
link=http://www.yahoo.com نیز آدرس لینک اصلی شما خواهد بود و از این طریق میتوانید کاربران را به آدرس مورد نظرتان راهنمایی کنید.
در پایان لینک مورد نظر شما چیزی شبیه : خواهد بود و زمانی که نشانه موس بر روی لینک قرار میگیرد tooltip مورد نظر نمایش داده میشود و با کلیک بر روی لینک نیز به آدرس مورد نظر خواهید رفت.
همانطور که اشاره شد این پلاگین از انعطافپذیری خوبی برخوردار است و با استفاده از دانش و تجربه خود میتوانید ظاهرtooltip را به کلی تغییر داده و آن را همانگونه که علاقه دارید نمایش دهید.
طرز کار این پلاگین را میتوانید از طریق مراجعه به این آدرس و دانلود فایل و اجرای آن ببینید.
http://www.codylindley.comblogstuff/js/jtip/jTip.zip/
نویسنده: پویا سلیمی