صندوق تلميحة بداخله أكواد HTML
ننتقل الأن إلى الخطوة الثانية من التعرف على Tooltips في الدرس السابق تعرفنا على عرض (نص) لأي عنصر باستخدام ابسط الطرق وكتابتها بأبسط طريقة, الأن في هذا الدرس سنتعرف بدلاً من عرض النص سنعرض (اكواد HTML) داخل الـ Tooltip أو صندوق التلميحة فبسم الله أولاً وأخيراً.
نتيجة الدرس ستكون كالصورة التالية ويمكنك مشاهدتها حية وفي نهاية الدرس يمكنك تحميل ملف تطبيق الدرس كما قمت بإرفاق ملف الفوتوشوب لتصميم الزر وصندوق التلميحة للفائدة.
قبل التأشير
بعد التأشير
اضغط هنا للمشاهدة الحية على التطبيق
طريقة عمل التلميحة السابقة كالتالي
كما تعرفنا سابقاً بطريقة البداية السهلة هي استدعاء ملف المكتبة في هذه المرة سيكون هناك تغيير بسيط وفائدة أخرى لهذه المكتبة بخصوص البداية فلكي تقوم باستخدام اعدادات متقدمة يجب عليك استدعاء المكتبة بنسختها الكاملة في السابق كنا نستدعيها بشكل اساسي الأن يجب ان نستدعي النسخة (Full) الفرق بسيط جداً فقط يتم إضافة full في عنوان نسخة المكتبة ويمكنك تحميل المكتبة او استدعائها من صفحة التحميل للمكتبة والتي دائماً احرص على استخدامها بدلاً من استدعاء الملف من هنا فهو للشرح فمثلاً نبدأ بسم الله بإستدعائها كالتالي.
<!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>
بعد ذالك داخل الوسمين <body> و </body> نضيف العناصر اللازمة وأول شيء رابط التحميل كالتالي :
<a class="download-link" href="http://tech-wd.com/wd/wp-content/uploads/2010/01/tooltip2-html.zip"></a>
ببساطة رابط طبيعي وفيه رابط لملف.
الأن أنتهينا من إضافة الرابط سنقوم بتنسيق شكله لاحقاً فقط لنقم بإضافة عنصر صندوق التلميحة كالتالي:
<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 ! رائع صحيح؟, الأن لنتجه إلى إضافة الكود الخاص بعرض التلميحة بالجافا سكريبت وذالك في داخل الوسمين <head> و </head> وبعد الملف الذي استدعيناه لمكتبة الـ jQuery Tools وذالك كالتالي:
<script type="text/javascript">
$(document).ready(function() {
$(".download-link").tooltip({ effect: 'slide'});
});
</script>
انتهينا من الجافا سكريبت!
كل ما تبقى لنا الأن هي أكواد الـ 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>
هكذا بحمد الله انتهينا من العمل ولمشاهدة وتحميل العمل من هنا:
أرفقت فيه ملف الفوتوشوب لتصميم الزر وصندوق التلميحة للفائدة, لأي استفسارات او اسأله يرجى طرحها هنا, مع التحية وبالتوفيق.
جزاك الله خيرا يا اخ عبد المالك ياريت لو نهتم شويه بموضوع سى اس اس لقله المصادر العربيه فيه
قيم التعليق:
0 
0
كلام جميل اخوي أحمد ان شاء الله يكون لنا دورة خاصة بالـ CSS وهي اللي فعلاً يحتاجها الكثير ودائماً اجدها نقطة الضعف وهي أساس أغلب الأعمال مثل هذا العمل فلو لم يتم استخدام الـ CSS بشكل صحيح لن تظهر بشكل جيد بارك الله فيك.
قيم التعليق:
0 
0
رغم ان هناك دورة خاصة بالـ XHTML و الـ CSS
http://www.tech-wd.com/wd/edu/xhtml-css
لكني لم اجدها معمقة بالـ CSS
هنا مصدر تعليم اساسيات الـ CSS ممتاز
http://ar.html.net/tutorials/css
قد يكون بدل عمل دورة يتم عمل تلميحات الـ CSS
شكراً لك مره أخرى أخي أحمد
قيم التعليق:
0 
0
جزاك الله خيرا اخى عبد المالك انا طبعا شوفت السايت دى بصراحه بس غالبا هيا اساسيات ولونها اساسيات فقيره
المصدر اللى بصراحه عجبنى كمصدر عربى هيى مدونى سى اس اس بيت
ومدونه فى المصنع للاخ كتوم
انا نفسى نعمل موقع عربى يبقى زى نبوى للاخت نورا يحيى او سى اس اس تريك ياريت تناقشوا الفكره وانا جاهز للمساعده انا لسا مبتدى بس متابع جيد جدا للتطورات وخاصه المواقع الاجنبيه
قيم التعليق:
0 
0
كلام سليم وسي اس اس بيت من أروع المواقع الخاصة بالـ CSS وتليمحاتها واستفدت من صاحبها الأستاذ المبدع نعيم كثيراً جزاه الله خير.
مدونة المصنع كانت في مدونة سابقة باسم كتوم لكنها توقفت عن التحديث منذ مده طويله للأسف ولكنه بالفعل متميز ايضاً بهذا المجال.
بالنسبة لدروس تطوير الويب بإمكاننا طرحها هنا في عالم التقنية وسيكون بإذن الله لدروس تطوير الويب والسي اس اس نصيب جيد هنا بإذن الله ليتم وجود محتوى عربي يجب مشاركة الجميع في ذالك لكثرة عدد المدونات والمواقع اللازمة لإثراء المحتوى العربي كلاً بمجاله.
ارجوا ايضاً ان تكون هذه السلسلة الخاصة بالجيكويري تولز مفيده لكثير من المطورين الجدد بإذن الله وانا احياناً ارجع لها كمرجع سريع وجاهز لي وارجوا ان يستفاد منها ايضاً وان شاء الله القادم افضل.
وكذالك نتطلع بمواضيعك القيمة
شكراً لك أخي أحمد.
قيم التعليق:
0 
0
تحدثت مع الأخ أحمد عبدالمنعم منذو فترة قريبة، وقد وعد بتحديث مدونته عما قريب إن شاء الله
المصنع: http://almsn3.blogspot.com/
قيم التعليق:
0 
0
يعطيك العافية اخ عبدالملك مجهود طيب تشكر عليه
ولاكن هناك اخطاء بسيطة في المثال اعلى:
اولا نسيت ان تضع كلاس الرابط class=”download-link”
ثانيا كلاس الـ ديف class=”tooltip”
مشكور مرة اخرى ونتمنى المزيد من دروس الـ jQuery بشكل عام
قيم التعليق:
0 
0
يعطيك العافية اخوي انا اذكر اني حاطه ما دري وين راحت مشكله احياناً اللي يعرض الأكواد يلعب فيها
, خير ان شاء الله الحين اعدلها مشكور.
قيم التعليق:
0 
0
مشكور أخي على الشرح.
لو أريد أن أجعل هناك وسم خاص بي أضع فيه كتابة و إكواد الـ HTML و أجعله يظهر كلما كان Tooltip يعني ليس فقط لما أستدعيه. مثلا هناك صور فيها وصف و الوصف دا يظهر على شكل Tooltip كيف أفعل ذلك ؟
قيم التعليق:
0 
0
جزاك الله اخي الكريم
تطبيق رائع سادمجه في سكريبت المدونة الجديدة التي سابرمجها بحول الله
تحياتي لك و ننتضر المزيد من الدروس و التطبيقات يا غالي
قيم التعليق:
0 
0
السلام عليكم ورحمة الله وبركاتة اخى انا لدى موقع جديد وعوز اضيف الخاصيه ده ومش عارف اوى ممكن مساعده اعتبرنى اخى لا اعلم اصل انا مش عارف اوى
وشكر
قيم التعليق:
1 
1