الصفحة الرئيسية
برمجة

درس 2: طريقة إضافة استايل لسمة title في الـHTML


السلام عليكم و رحمة الله و بركاته
اليوم في درسنا الثاني
سوف نتعلم كيفية إضافة استايل
لوصف الصور,الروابط..
أو ما يسمى بالـAttribute
'Title'
نبدأ على بركة الله,



أولا: تسطيب مكتبة الـJQuery




اذهب هنا
هناك خيارين

- تحميله على حاسوبك:

قم بالضغط على
Download the compressed, production jQuery x.x
(بدل x يوجد رقم الإصدار دائما اختر آخر إصدار)
ثم أضف قبل وسم <head/> الكود التالي:


1
<script src="Link"></script>


مع استبدال ما بالأحمر بمكان تواجد الملف,
قم بهذه العملية إذا كنت ستسعمله في حاسوبك و بدون انترنت.



أخذه من أحد السيرفرات (CDN):




ذلك بإضافة هذا الكود قبل وسم <head/> :


1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


مع تغيير ما بالأحمر برقم آخر إصدار
هذه العملية تجلب الملف أسرع, لكنها تتطلب انترنت



ثانيا: تسطيب أداة qTip




هذه الأداة هي التي ستمكننا من جعل الوصف بمظهر رائع
و قد جربتها و استعملتها شخصيا و هي رائعة
اذهب هنا
هناك خيارين أيضا,لكن الفرق هناك ملفين
ملف JS (جافا سكربت) و ملف CSS (ستايل)
الآن للتحميل اضغك باليمين ثم اختر تحميل (Save as..) على
jquery.qtip.min.js
و
jquery.qtip.min.css
ثم أضف قبل وسم <head/> و بعد الكود السابق:


 1
2
<script src="jquery.qtip.min.js"></script>
<link rel="stylesheet" href="jquery.qtip.min.css" type="text/css" />


مع استبدال ما بالأحمر بمكان ملف JS
و بالبرتقالي بمكان ملف CSS
أو بدل اختيار التحميل انسخ الرابط ثم ضعهم في نفس الأمكنة السابقة
 (الأحمر لملف JS و البرتقالي لملف CSS)



ثالثا: التطبيق على الأوصاف




الآن قمنا بتسطيب جميع الملفات اللازمة, الآن حان دور تطبيق الشكل الجديد,
هناك عدة اختيارات سنرى بعضها فقط بكثرتها, و يمكنك الإستعانة بالموقع
لمعرفة الإختيارات المتوفرة اضغط هنا
 الآن قم بإضافى الكود التالي قبل وسم <head/> و بعد جميع الأكواد السابقة:


1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
$('[title!=""]').qtip({
position: {
my: 'top center', 
at: 'bottom center'
},
style: {
classes: 'qtip-tipsy qtip-rounded'
}

});

});


بالأحمر نختار مكان ظهور الوصف (وسط فوق,تحت)
لتغيير المكان:
اذهب هنا لكي تسهل عليك الأمور




كما ترى هذه هي الأداة التي ستساعدك, قم باختيار المكان الذي يناسبك ثم عدل على ما بالأحمر هكذا:
 1
2
my: 'top center', 
at: 'bottom center'


كما نرى في الصورة لدينا في my (داخل المربع الأحمر الأول)
نقوم بنقل ما بها بالترتيب,فمثلا في الصورة لدي Bottom ثم Center
 نقوم باستبدالهما في الكود بنفس الترتيب ليصبح الكود هكذا:
1
2
my: 'bottom center', 
at: 'bottom center'


و الآن نمر إلى الخيار الثاني at (داخل المربع الأحمر الثاني)
نقوم بنفس العملية أيضا ليصبح الكود هكذا:


1
2
my: 'bottom center', 
at: 'top center'


الآن نمر إلى اللون البرتقالي المخصص لشكل الوصف و :
 لتطبيق أحد هذه الأشكال قم باستبداب ما بداخل اللون البرتقالي بـ

qtip-tipsy
qtip-youtube
qtip-bootstrap
qtip-tipped
qtip-jtools
qtip-cluetip

لإضافة خاصية أخرى ما عليك سوى إضافى التالي بعد الكود مثال:
qtip-tipsy xxxx

لجعل الحواف مستدير استبدل xxxx بــ:
qtip-rounded

و لإضافة ظل استبدلهم بـ:
qtip-shadow

 للمزيد أذكرك بالإستعانة بالموقع من هنا

هذه الخطوات تعمل أيضا على
Blogger
انتهى الدرس إخواني, إذا واجهتم أي مشكل ضعوه في تعليق
أو راسلونا في صفحتنا على الفايسبوك
إذا أعجبك الموضوع لا تنسو الضغط على "أعجبني" و نشر الموضوع
بين أصدقائكم, بالتوفيق.