البرمجةالدروس

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

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

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

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

قبل التأشير

بعد التأشير

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

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

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

[html]


jQuery Tools Demo

[/html]

بعد ذالك داخل الوسمين

و نضيف العناصر اللازمة وأول شيء رابط التحميل كالتالي : [html][/html]

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

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

[html]

هنا يمكنك إضافة أي كود HTML ببساطة


اسم الملف: tooltip2-html.zip


حجم الملف: 1kb


عدد مرات التنزيل: 2342


[/html]

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

و وبعد الملف الذي استدعيناه لمكتبة الـ jQuery Tools وذالك كالتالي: [html]
[/html]

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

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

[css]
[/css]

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

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

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

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

‫14 تعليقات

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

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

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

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

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

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

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

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

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

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

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

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

    وشكر

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى