مكتبة jQuery Tools، المكتبة المفقودة للويب – 2 Tooltips

صندوق تلميحة بداخله أكواد HTML

ننتقل الأن إلى الخطوة الثانية من التعرف على Tooltips في الدرس السابق تعرفنا على عرض (نص) لأي عنصر باستخدام ابسط الطرق وكتابتها بأبسط طريقة, الأن في هذا الدرس سنتعرف بدلاً من عرض النص سنعرض (اكواد HTML) داخل الـ Tooltip أو صندوق التلميحة فبسم الله أولاً وأخيراً.

نتيجة الدرس ستكون كالصورة التالية ويمكنك مشاهدتها حية وفي نهاية الدرس يمكنك تحميل ملف تطبيق الدرس كما قمت بإرفاق ملف الفوتوشوب لتصميم الزر وصندوق التلميحة للفائدة.

قبل التأشير

بعد التأشير

اضغط هنا للمشاهدة الحية على التطبيق

طريقة عمل التلميحة السابقة كالتالي

كما تعرفنا سابقاً بطريقة البداية السهلة هي استدعاء ملف المكتبة في هذه المرة سيكون هناك تغيير بسيط وفائدة أخرى لهذه المكتبة بخصوص البداية فلكي تقوم باستخدام اعدادات متقدمة يجب عليك استدعاء المكتبة بنسختها الكاملة في السابق كنا نستدعيها بشكل اساسي الأن يجب ان نستدعي النسخة (Full) الفرق بسيط جداً فقط يتم إضافة full في عنوان نسخة المكتبة ويمكنك تحميل المكتبة او استدعائها من صفحة التحميل للمكتبة والتي دائماً احرص على استخدامها بدلاً من استدعاء الملف من هنا فهو للشرح فمثلاً نبدأ بسم الله بإستدعائها كالتالي.

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl">

<head>
<title>jQuery Tools Demo</title>
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
</head>

<body>

</body>

</html>[/html]

بعد ذالك داخل الوسمين <body> و </body> نضيف العناصر اللازمة وأول شيء رابط التحميل كالتالي :

[html]<a class="download-link" href="http://tech-wd.com/wd/wp-content/uploads/2010/01/tooltip2-html.zip"></a>[/html]

ببساطة رابط طبيعي وفيه رابط لملف.

الأن أنتهينا من إضافة الرابط سنقوم بتنسيق شكله لاحقاً فقط لنقم بإضافة عنصر صندوق التلميحة كالتالي:

[html]<div class="tooltip">
<p>هنا يمكنك إضافة أي كود HTML ببساطة</p>
<p><img src="images/zip.gif" />اسم الملف: <span>tooltip2-html.zip</span></p>
<p>حجم الملف: <span>1kb</span></p>
<p>عدد مرات التنزيل: <span>2342</span></p>
</div>[/html]

انتيهنا من عناصر الـ HTML ! رائع صحيح؟, الأن لنتجه إلى إضافة الكود الخاص بعرض التلميحة بالجافا سكريبت وذالك في داخل الوسمين <head> و </head> وبعد الملف الذي استدعيناه لمكتبة الـ jQuery Tools وذالك كالتالي:

[html]<script type="text/javascript">
$(document).ready(function() {
$(".download-link").tooltip({ effect: ‘slide’});
});
</script>
[/html]

انتهينا من الجافا سكريبت!

كل ما تبقى لنا الأن هي أكواد الـ CSS هي حسب التنسيق الذي تريده يكمن الجهد المطلوب فيها عموماً بكل سهولة نضيفها كالتالي:

[css]<style type="text/css">
/* تنسيق الرابط */
.download-link {
background:url(images/download.gif);
width:290px;
height:111px;
display:block;
margin:0 auto;
}
.download-link:hover {
background:url(images/download.gif) 0 113px;
}

/* تنسيق الصفحة */
#page {
width:502px;
margin:0 auto;
font-family:Tahoma;
font-size:10pt;
color:#878787;
line-height:20px;
}
a {
color:#236ea7;
text-decoration:none;
}

/* تنسيق صندوق التلميحات */
.tooltip {
display:none;
background:url(images/bg.gif) no-repeat;
width:295px;
height:153px;
padding:15px 23px;
margin-top:20px;
}
.tooltip p {
margin:6px 0;
}
.tooltip span {
color:#000000; font-weight:bold;
}
.tooltip img {
float:left;
}
</style>
[/css]

هكذا بحمد الله انتهينا من العمل ولمشاهدة وتحميل العمل من هنا:

مشاهدة | تحميل

أرفقت فيه ملف الفوتوشوب لتصميم الزر وصندوق التلميحة للفائدة, لأي استفسارات او اسأله يرجى طرحها هنا, مع التحية وبالتوفيق.

فهرس دروس سلسلة jQuery Tools

  • جزاك الله خيرا يا اخ عبد المالك ياريت لو نهتم شويه بموضوع سى اس اس لقله المصادر العربيه فيه

    • كلام جميل اخوي أحمد ان شاء الله يكون لنا دورة خاصة بالـ CSS وهي اللي فعلاً يحتاجها الكثير ودائماً اجدها نقطة الضعف وهي أساس أغلب الأعمال مثل هذا العمل فلو لم يتم استخدام الـ CSS بشكل صحيح لن تظهر بشكل جيد بارك الله فيك.

  • رغم ان هناك دورة خاصة بالـ XHTML و الـ CSS

    http://www.tech-wd.com/wd/edu/xhtml-css

    لكني لم اجدها معمقة بالـ CSS

    هنا مصدر تعليم اساسيات الـ CSS ممتاز

    http://ar.html.net/tutorials/css

    قد يكون بدل عمل دورة يتم عمل تلميحات الـ CSS

    شكراً لك مره أخرى أخي أحمد

  • جزاك الله خيرا اخى عبد المالك انا طبعا شوفت السايت دى بصراحه بس غالبا هيا اساسيات ولونها اساسيات فقيره
    المصدر اللى بصراحه عجبنى كمصدر عربى هيى مدونى سى اس اس بيت
    ومدونه فى المصنع للاخ كتوم
    انا نفسى نعمل موقع عربى يبقى زى نبوى للاخت نورا يحيى او سى اس اس تريك ياريت تناقشوا الفكره وانا جاهز للمساعده انا لسا مبتدى بس متابع جيد جدا للتطورات وخاصه المواقع الاجنبيه

  • كلام سليم وسي اس اس بيت من أروع المواقع الخاصة بالـ CSS وتليمحاتها واستفدت من صاحبها الأستاذ المبدع نعيم كثيراً جزاه الله خير.

    مدونة المصنع كانت في مدونة سابقة باسم كتوم لكنها توقفت عن التحديث منذ مده طويله للأسف ولكنه بالفعل متميز ايضاً بهذا المجال.

    بالنسبة لدروس تطوير الويب بإمكاننا طرحها هنا في عالم التقنية وسيكون بإذن الله لدروس تطوير الويب والسي اس اس نصيب جيد هنا بإذن الله ليتم وجود محتوى عربي يجب مشاركة الجميع في ذالك لكثرة عدد المدونات والمواقع اللازمة لإثراء المحتوى العربي كلاً بمجاله.

    ارجوا ايضاً ان تكون هذه السلسلة الخاصة بالجيكويري تولز مفيده لكثير من المطورين الجدد بإذن الله وانا احياناً ارجع لها كمرجع سريع وجاهز لي وارجوا ان يستفاد منها ايضاً وان شاء الله القادم افضل.

    وكذالك نتطلع بمواضيعك القيمة 🙂

    شكراً لك أخي أحمد.

  • al9ub7y

    يعطيك العافية اخ عبدالملك مجهود طيب تشكر عليه
    ولاكن هناك اخطاء بسيطة في المثال اعلى:
    اولا نسيت ان تضع كلاس الرابط class=”download-link”
    ثانيا كلاس الـ ديف class=”tooltip”
    مشكور مرة اخرى ونتمنى المزيد من دروس الـ jQuery بشكل عام

    • يعطيك العافية اخوي انا اذكر اني حاطه ما دري وين راحت مشكله احياناً اللي يعرض الأكواد يلعب فيها 🙁 , خير ان شاء الله الحين اعدلها مشكور.

  • مشكور أخي على الشرح.
    لو أريد أن أجعل هناك وسم خاص بي أضع فيه كتابة و إكواد الـ HTML و أجعله يظهر كلما كان Tooltip يعني ليس فقط لما أستدعيه. مثلا هناك صور فيها وصف و الوصف دا يظهر على شكل Tooltip كيف أفعل ذلك ؟

  • جزاك الله اخي الكريم
    تطبيق رائع سادمجه في سكريبت المدونة الجديدة التي سابرمجها بحول الله
    تحياتي لك و ننتضر المزيد من الدروس و التطبيقات يا غالي

  • السلام عليكم ورحمة الله وبركاتة اخى انا لدى موقع جديد وعوز اضيف الخاصيه ده ومش عارف اوى ممكن مساعده اعتبرنى اخى لا اعلم اصل انا مش عارف اوى

    وشكر

  • med

    عغفعغفعغفع

  • med

    البالبالبال

تعليقات عبر الفيسبوك