الطريقة الأولى

و هي طريقة عادية جدا جدا ، بما أن المكتبة تدعم css1 الى css3 فإنه يمكننا استعمال أكواد css من أي جيل داخل اوامر المكتبة لتعمل بكل كفاءة ، إلا أنها لن تعمل على IE6
وهي كالتالي :

$('a[href$=".doc"]'). // مثال لملفات ذات امتداد وورد
	css({
	// هنا ساعمل تنسيق css داخل ملف js بعد استدعائي للمكتبة
	paddingRight: '18px', // أو left على احتياجك
	background: 'transparent url("word-doc.gif") no-repeat center right'
});

الطريقة الثانية

يمكننا الاستفادة من امر $.each() يمكنك أن تتعمق فيه من هنا ،

الهدف من استعمال هذا الامر ، وهو انشاء حلقة تكرار تعمل بشكل ديناميكي و نرتب لها امتدادات معينة و هي تختار كل واحد ما يلائمه ، أول شيء سننئأ عنصرا جديدا :

var fileTypes = {
  doc: 'doc.gif',
  xls: 'xls.gif',
  pdf: 'pdf.gif',
  rar: 'rar.gif',
  zip: 'zip.gif',
  exe: 'exe.gif',
  wmv: 'wmv.gif',
  rm: 'rm.gif',
  swf: 'swf.gif'
};

وزعنا في انواع الامتدادت و كل امتدادت امامه صورته التي سنخصصها له ، و الآن سعمل الحلقة بالأمر $each() :

$.each(fileTypes, function(extension,image) {
  $('a[href$="' + extension + '"]').
    css({
      paddingLeft: '18px',
      background: 'transparent url("' + image + '") no-repeat center left'
    });
});

لو تمعنت في الفرق بين هذه الطريقة و الأولى ، ستلاحظ ان هذه أذكى حيث تتم الفلترة بين الامتدادت بطريقة ديناميكية من غير أن نتدخل في كل امتداد ، و هذا أسهل و أسرع في الوقت ،
عوض كتابة الامتداد كل مرة يدويا أعطيته القيمة extension و كلما أخذ قيمة معينة من extension سياخذ الصورة التي تقابلها في العنصر الذي أنشأنا في الأول fileTypes ، و يعوضها في المكان الذي اعطيناه اسم image في سطر تنسيق css ، وهذه نتيجة الكود بأكمله :

var fileTypes = {
  doc: 'doc.gif',
  xls: 'xls.gif',
  pdf: 'pdf.gif',
  rar: 'rar.gif',
  zip: 'zip.gif',
  exe: 'exe.gif',
  wmv: 'wmv.gif',
  rm: 'rm.gif',
  swf: 'swf.gif'
};
$.each(fileTypes, function(extension,image) {
  $('a[href$="' + extension + '"]').
    css({
      paddingLeft: '18px',
      background: 'transparent url("' + image + '") no-repeat center left'
    });
});

ملاحظات

• الطريقة التي تدعم IE6 في هذا الدرس هي الطريقة الثانية
• طريقة css نافعة لأصحاب المشاريع الصغيرة ( مدونات ، مواقع صغيرة ، .. حيث يكون عدد الامتدادت صغير و محدود ) ، أما في المشاريع الكبيرة و الضخمة فإنه الأوفق و الأسلم و الأسرع لك، هي طريقة javascript ستوفر عليك وقتا و جهدا ، و هي لائقة للمشاريع الاحترافية

آمل أن تكون استفدت من هذا التطبيق ، على أمل الالتقاء في تطبيق أو درس آخر إن شاء الله تعالى .
و السلام عليكم ورحمة الله

مثال : Demo

لرؤية المثال مباشرة ، اضغط هنا

فائدة الدرس :

• جعل المشاريع اكثر واقعية و تجاوبا مع معطيات الموقع
• تنبيه الزائر الى نوع الروابط و اخباره قبل الضغط عليها

طريقة العمل

لاحظ الكود التالي :

a[href^="http://"] {
	background:transparent url(images/external.png) center right no-repeat;
	padding-right: 10px;
}
a[href^="download/"] {
	background:transparent url(images/down.png) center right no-repeat;
	padding-right: 20px;
}
a[href$='.pdf'] {
	background:transparent url(images/pdf.gif) center right no-repeat;
	padding-right: 20px
}
a[href$='.doc'] {
	background:transparent url(images/word.png) center right no-repeat;
	padding-right: 20px		
}
a[href$='.rar'] {
	background:transparent url(images/rar.png) center right no-repeat;
	padding-right: 20px		
}
a[href^='mailto'] {
	background:transparent url(images/mailto.png) center right no-repeat;
	padding-right: 20px			
}

نلاحظ أوامر جديدة أو – غريبة بعض الشيء ، هنا نحاول ان نفرق بين أنواع الروابط في css و نعطي لكل نوع قيمة خاصة به ، لنر الصورة التالية :

فيمكننا ان نحدد نوع الرابط الذي سنعطيه قيمة معينة في style :

• إما بالكلمة التي يبتدئ بها الرابط فنكتب ^
• أو بامتداد الملف يعني .doc أو .pdf و هكذا .. فنكتب $

كما يمكنني التحكم بكل عناصر html ، مثلا الروابط التي أفتحها في صفحة جددية هكذا :

<a href="http://fez-soft.net" target="_blank">Fez-Soft</a>

يمكنني أن أعمل لها style خاص بها :

a[target='_blank'] {
هنا الخصائص ...
}

و كذلك الروابط الخاصة بموقع معين مثلا ،

a[href^="http://fez-soft.net"] {
هنا الخصائص ...
}

أو بمجلد خاص على الموقع – كمجلد التحميل download :

a[href^="download/"] {
هنا الخصائص ...
}

فكل الروابط الخاصة بالتحميل من هذا المجلد يكون لها تنسيق خاص بها تدل على التحميل

و كذلك الامتدادات ، يمكننا تحديدها باستعمال $ ، مثال :

a[href$='.doc'] {
 ... هنا الخصائص	
}

و الأمثلة تطول ..
وهكذا فإنني أربح الوقت و الجهد و عدم التكرار ، و يكون كل نوع من روابطي مميز و بين للزائر و المتسخدم

ملاحظة

هذه غير مدعومة أبدا من المتصفح IE6 و لا عجب في ذلك ، فإن من لا يزال يستعمل هذا المتصفح لا يستاهل أن تتعب من أجل راحته ،
في الجزء الثاني من الدرس ، سنرى طريقة الجافا سكربت ، في محاولة عمل تطبيق يسهل علينا المأمورية و يؤدي نفس الغرض

بالتوفيق للكل