«
»

حلول CSS بنكهة Jquery

Sunday 3 January 2010

هناك الكثير من المشاكل التي تعترض مطور الويب، بعضها يحتاج لحلول مكلفة، الفكرة التالية توضح كيف يمكن استعمال Jquery لاضافة او تغيير بعض الخصائص في CSS، عندما يتم جلب البيانات من جدول MySQL ويكون التحكم في خصائص أول أو آخر Row مكلفا من ناحية الوقت والجهد، سأعطي مثالا سريعا لأوضح عما أتحدث عنه:

لنفترض أنه لدي صفحات Pages كالموجودة في Wordpress وأرغب بإظهار عناوين الصفحات بتنسيق معين ب CSS كأن أفصل بين كل عنوان وآخر ب Border وآخر عنوان في القائمة سيكون بدون إطار

صورة توضح ما أرغب به:

إن كان Code عبارة عن XHTML فقط، سأضيف Class لآخر  رابط كالتالي:

<li class="last">link 4</li>

CSS

ul li.last {border:none}

بينما إن كانت البيانات عبارة عن حلقة While يتم الاستعلام عنها من جدول MySQL ف Jquery توفر حلا (IE لا يدعم pseudo element ولن تظهر التأثيرات معه، يمكن اللجوء إلى بعض Fix):
ببساطة بعد استدعاء ملف jquery (الذي سأستدعيه غالبا لشيء آخر أكثر أهمية)، أضيف ما يلي:

$('ul li:last').css('border','none');

كذلك يمكن هذه الطريقة للحصول على حقول ملونة عند عرض بيانات Tabular كما في الصورة:

JS

$('table tr:odd').css('background','#fff');
$('table tr:even').css('background','#B0D9EC');

الملفات مرفقة

يمكن استعمال CSS() مع Jquery في أكثر من موضع.

2 تعليقات

  1. عمر الدليمي says:
    January 3, 2010 at 2:27 pm

    شكراً،
    لكن أحب أن أعقب، أن IE يدعم دالة css في jQuery، أو بالأصح أن jQuery تدعمه. حسب النسخة 1.3.2 وبدون مشاكل.

  2. cssbit says:
    January 3, 2010 at 3:33 pm

    عمر الدليمي:
    عذرا، قصدت أن IE لا يدعم pseudo-element ك: even, odd, last-child, first-child وبعض الخصائص في CSS 2.1 والتي وضفت مع Jquery
    صححت الخطأ

التعليقات مغلقة.