منتدى ديار الجنوب
اخبار التقنية بين يديك - http://mphker.blogspot.com


منتديات تعليميه ترفيهيه
 
الرئيسيةس .و .جبحـثالتسجيلدخولالعاب مباشرة اون لاين

شاطر | 
 

 سلسة تعلم jquery بــ 16 درس فقط

اذهب الى الأسفل 
كاتب الموضوعرسالة
كريتوس
مشرف عام
مشرف عام
avatar

عدد المساهمات : 355
نقاط : 951
تاريخ التسجيل : 19/02/2010

مُساهمةموضوع: سلسة تعلم jquery بــ 16 درس فقط   الثلاثاء يوليو 19 2011, 22:36

تعلم كيفية استعمال مكتبة الجي كويري jQuery الخطوة الأولى
مع ظهور مكتبة jQuery كتب السيد Jörn Zaefferer مقالاً عنوانه ارقص مع جي كويري فيه شرح مفصل عن كيفية البدأ في استعمال هذه المكتبة و يتألف هذا المقال من أربع خطوات
ولقى هذا المقال شعبية كبيرة و تم اعتماده على الموقع الرسمي لمكتبة جي كويري كدليل للمبتدئ في استعمال هذة المكتبة الشهيرة و عنوانه Getting Started with jQuer لكني أفضل المقال الأصلي لأنه مقسم بشكل جيد لأربع خطوات مشروحة بشكل بسيط و تساعد المبتدئ في فهم هذه المكتبة و استعمالها
لذلك قررت أن أترجم هذا المقال للعربية
قبل أن نبدأ في ما يلي شرح مبسط لبعض المفردات التي سأستعملها في شرحي لمكتبة jQuery

Casscading Style Sheet
أو أوراق الأنماط التعاقبية أو المتتالية و هي تقنية تستخدم للتحكم في الكيفية التي يجب أن تظهر بها الو سوم Html في صفحة الويب

Xml
هي طريقة لتمثيل أي بيانات منظمة هذه الطريقة تصلح للتعامل مع كل أنظمة التشغيل لذلك أصبحت اللغة الأنسب للتعبير عن البيانات لأنها تتجاوز مشكلة عدم التوافق
EXtensible Markup Language لغة الترميز الموسعة التي يرمز لها بالاختصار XML تستخدم لوصف و تحزين و تنظيم البيانات
قواعدها سهلة جداً و تستطيع استعمال ما تريده من الو سوم و تسميتها بأي اسم تريده و من ثم تحدد كيفية ظهور المحتوى الذي بداخل الوسم عن طريق أوراق الأنماط التعاقبية , لكن المبرمجين يحاولوا قدر الإمكان استعمال وسوم html مع المحافظة على معانيها و ربط العناصر بشكل هرمي ( افهم من ذلك أن عناصر الصفحة تتبع بعضها البعض بتسلسل هرمي أي بعلاقة الأب و الابن و تذكر الوراثة في ملفات الستايل)

DOM
نموذج كائن المستند Document Object Model يربط هذا الكائن مستندات XML مع لغات البرمجة بما فيها الجافا سكريبت

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

server-side scripting
لغة برمجة تنفذ جهة المزود أي أن الكود على العكس من جافا سكريبت الذي ينفذ على جهاز المستخدم في هذه الحالة ( حالة التنفيذ جهة المزود) الكود سينفذ على خادم الويب الذي يرسل النتيجة على شكل Html للمستخدم البي إتش بي هي لغة تنفذ جهة المزود ( أي أنك لست بحاجة للبي إتش بي مركب على جهازك لعرض صفحات البي إتش بي)

في ما يلي ترجمة الخطوة الأولى:
مسار المقال الأصلي : [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
مع كل الشكر للسيد : Jörn Zaefferer

حمل ملف عدة البداية من هذا الرابط jQuery Starterkit وفك ضغطه على جهازك من الأفضل أن تفك ضغطه في دليل الويب لخادمك المحلي إذا كان متواجد على جهازك طبعاً تستطيع متابعة التمارين بدون خادم ويب لكن في الخطوة الرابعة يفضل أن يكون خادم الويب متواجد على جهازك
ستجد بداخل هذا المجلد :

الدليل lib الذي يحتوي على نسخة قديمة من مكتبة جي كويري تكفي لتنفيذ تمارين الشروح لكن عليك تحميل أخر نسخة من هذة المكتبة لتطوير برامجك القادمة
الدليل css يحتوي على ملفات الستايل لن نستعمله في التمارين
الملف starterkit.html و هو ملف صفحة الويب عليك أن تفتحه بواسطة متصفح الويب
الملف custom.js و هو الملف الذي سيساعدك على استعمال جي كويري بداخله ستلصق الكود بعد نسخه من ملف كل تمرين
باقي الملفات لا تهمنا في هذا الشرح
الآن و قد فتحت starterkit.html في متصفح الويب و فتحت custom.js في أي محرر نص أصبحت جاهز لتنفيذ تمارين الشرح

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

// Comment
$(document).ready(function() {
// DOM
});
هذه الجملة تعني بأنك تطلب من مكتب جي كويري بتنفيذ الكود بعد أن يكون متصفح الويب قد انتهى من تحميل الصفحة
في أول تمرين سنطلب من جي كويري أن تعرض لنا رسالة صغيرة عندما نضغط على أي رابط من الروابط الموجودة على الصفحة

// Comment
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
حمل ملف الكود
انسخه و الصقه في الملف custom.js احفظ عملك و حمل الصفة قي متصفح الويب من جديد
ملاحظة لتحميل الصفحة من جديد اضغط على الزر F5 على لوحة المفاتيح

ثم اضغط على أي رابط من الروابط الموجودة على الصفحة سترى بأن مكتبة جي كويري تنفذ الكود و تعرض لك رسالة Hello world
لنتمعن قليلاٌ في هذا الكود:

$("a")
في هذا الأمر نحن نطلب من جي كويري بتحديد كل الروابط الموجودة على الصفحة لاحظ بأننا استعملنا الوسم html للرابط و هذا ما يشكل ناحية هامة من مكتبة جي كويري و سهولة استعمالها
و ال $ هي أدات التحديد في مكتبة جيكواري

.click()
و هي ما يسمى بلأحداث أي أن هذا الأمر سيربط كل عنصر محدد بالحدث تذكر بأننا استعملنا $("a") لتحديد روابط الصفحة لكي نعرض رسالة عندما نضغط على أي رابط إذاً عندما يحدث الحدث click() جي كويري ستنفذ الأمر alert Hello world!
الأحداث مهمة جداً من خلالها تستطبع ربط الكثير من الأعمال في الأحداث
روابط مفيدة

قواعد اساسية في استعمال مكتبة جي كويري bases
أدوات التحديد تستعملها لكي تحدد العنصر الذي تريد التحكم بهSelectors
الأحداث الممكن استخدانها لتنفيذ عمليات محددةEvents
المرفق الحجم
starterkit.zip 44.04 كيلوبايت

تعلم كيفية استعمال مكتبة جي كويري jQuery الخطوة الثانية
عنوان المقال الأصلي : [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
مع الشكر للسيد : Jörn Zaefferer

استخدام المحددات والأحداث
عليك الاطلاع على الخطوة الأولى لكي تستطيع تطبيق تمارين الخطوة الثانية
لكي تتحكم في طريقة عرض أي عنصر من عناصر الصفحة عليك أن تحدده مكتبة جي كويري توفر لك نهجين لكي تحدد عناصر الصفحة الأول عن تريق منتقيات css و Xpath و الثانية تستعمل أساليب الكائن جي كويري
تستطيع استعمال النهجين معاً
في التمارين الاحقة سنستعمل بعض هذه المحددات (المنتقيات) و هذا سيساعدك على فهم هذه المبادئ
كما تعرف في تقنية css نستعمل الفئات class و المعرفات id لاختيار عناصر معينة و إعطائها خصائص معينة من خلال خواص css
الفرق بين الفئات class و المعرفات id بسيط جداً و هو أن المعرف وحيد و ممنوع تكراره في نفس الصفحة بينما الفئات تستطيع استعمالها أكثر من مرة
افتح starterkit في متصفح الويب و لاحظ القائمة المرتبة أي القائمة التي تحتوي على رقم على كل سطر
هذه القائمة لها معرف و اسمه id orderelist افتح صفحة starterkit.html في أي محرر نص و اطلع على هيكل الصفحة لتأكد من ذلك
عندما تريد انتقاء هذه القائمة في لغة جافا سكريبت ستكتب الكود التالي

document.getElementById("orderedlist")
مع جي كويري ستكتب الكود التالي:

// JavaScript Document
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
// end
حمل ملف الكود
انسخ الكود في ملف custom.js و احفظ عملك ثم حمل الصفحة من جديد ستجد أن لون خلفية القائمة أصبح أحمر ملف css الموجود في starterkit يوفر فئة تعطي الون الأحمر
لاحظ أن القائمة الثانية لم تتغير راجع الخطوة الأولى لتحميل starterkit الخطوة الأولى
الآن سنضيف فئة الون الأزرق لعناصر هذه القائمة

// JavaScript Document
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
// end
حمل ملف الكود
انسخ الكود في ملف custom.js و حفظت عملك ثم حمل الصفحة من جديد طبعاً عليك حذف الكود السابق

هذا الكود سيحدد كل الأولاد li للعنصر صاحب المعرف id orderedlist و يضيف لهم الفئة bleu
تمرين أخر :
في هذا التمرين سنقوم بعملية أكثر تعقيداً نريد إضافة و حذف ( الحدث hover عندما نمرر الفأرة على عنصر من العناصر) الفئة عندما يحلق مؤشر المستخدم فوق أخر عنصر من العناصر li

// JavaScript Document
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});
// end
حمل ملف الكود
يوجد أكثر من محدد css و XPath تستطيع كتابتهم بطريقة مشابه كما تجد أمثلة إضافية عن طريقة استعمالهم على هذه الصفحة Selectors

باستعمالك أدوات التحديد و الأحداث تستطيع أن تحقق الكثير من الأشياء على صفحات موقعك لكن هناك الكثير من الاحتمالات الأخرى مثال :

// JavaScript Document
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});
// end
حمل ملف الكود
find() هذا الأمر يتيح لك البحث بين عناصر الصفحة نستعمله هما للبحث عن أولاد العنصر lu
$("#orderedlist).find("li") يتيح لك البحث بين أولاد العنصر ولد بعد ولد و هذا الأمر يعادل الأمر
$("#orderedlist li"). each()
معظم الطرق مثل إضافة فئة addClass() تستعمل each()
في هذا المثال استعملنا html() للحصول على النص الموجود بكل عنصر li و إضافة نص أخر إلى هذا النص و إدخاله من جديد في العنصر

مثال أخر يمكن أن تحتاجه لتفريغ خانات استمارة ما بعد استعمالها عن طريق AJAX

// JavaScript Document
$(document).ready(function() {
//استعمل هذا الكود لكي تمحي محتويات الاستمارة
$("#reset").click(function() {
$("#form")[0].reset();
});
});
// end
حمل ملف الكود
في هذا الكود حددنا العنصر الذي يحمل المعرف Form و استعملنا reset() على العنصر الأول
لنفترض أنك تريد أن تفرغ أكثر من استمارة عليك أن تستعمل الكود التالي :

// JavaScript Document
$(document).ready(function() {
// استعمل هذا الكود لكي تمحي محتويات أكثر من استمارة بنفس الوقت
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
// end
حمل ملف الكود
هذا الكود سوف يحدد كل الاستمارات الموجودة على الصفحة و يطبق الامر reset() على كل واحد منهم.
تمرين أخر
أمر أخر يمكن أن تحتاج له و هو أنك لا تريد تحديد عنصر معين جي كويري توفر لك filter() كما توفر not() الأول تستعمله لتحديد العناصر التي تنتمي لعبارة الفيلتر و الثاني بالعكس يحذف العناصر التي تنتمي لعبارة النفي تصور أنك تريد تحديد كل العناصر قائمة ما li بدون أولاد ul :

// JavaScript Document
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});
// end
حمل ملف الكود
الكود سيحدد العناصر li ثم يحذف كل عنصر له أولاد ul و هكذا كل العناصر li تظهر داخل إطار ما عدا العناصر التي لها أولاد
تمرين أخر
لو أردت تحديد كل المراسي التي تحمل الخاصة name
ستكتب التالي :

// JavaScript Document
$(document).ready(function() {
$("a[@name]").background("#eee");
});
// end
حمل ملف الكود
مما يلون كل المراسي التي تحمل الخاصة name
تمرين أخر
في أغلب الأحيان نحتاج لتحديد المراسي من خلال الخاصة href وبما أن كل متصفحات الويب لا تعتبر الخاصة href
بنفس الطريقة لهذا نستعمل المنتقي تحتوي لكي نحدد التوافق مع جزء من القيمة و نكتبه بالشكل التالي *= بدلاً من اشارة يساوي = مثال :

// JavaScript Document
$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
// تنفسذامر ما على الرابط المؤشرة إلى
// المسارات التي تحتوي علي /content/gallery
});
});
// end
حمل ملف الكود
هنا تحدد المسارات التي تحتوي على.

تمرين أخر
حتى الأن استعملنا المحدات لتحديد الأولاد و المرشح لغربلة المعلومات هناك حالات أخرى نحتاج فيها لتحديد العناصر السابقة أو التالية ما يسمى siblings أي الأخوة من نفس الأصل
تخيل صفحة الأسئلة الأكثر طرحاً حيث كل الأجوبة تكون مخفية في البداية و تعرض فقط عند الضغط على السؤال الأول
الكود جي كوري للتنفيذ هو:

// JavaScript Document
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});
// end
حمل ملف الكود
هنا نستخدم السلاسل لتصغير حجم الكود و تحسين الأداء, في هذا المثال العنصر #faq تم تحديده مرة واحدة فقط, و استعمال end() يلغي أول دالة find() هذة الطريقة توفر لنا البحث مع الدالة find() الثانية للبحث في العنصر #faq بدل من البحث بين الأولاد.
ملاحظ :
لو لم نضع end() سيستمر البحث بين بقية الأولاد dd فقط دون و لن يتم على كافة الأسئلة في الصفحة,
داخل معالج النقر the click handler مررنا إلأى الطريقة click() الدالة $(this).next() لكي نجد الأخ التالي إنطلاقاً من


الحالي, مما يتيح لنا بتحد الجواب على السؤال المنقور بسرعة
أكثر من تحديد الأطفال من نفس الأصل (الأشقاء) ، يمكنك أيضا تحديد العناصر الأم المعروف باسم "أسلاف" في مفردات Xpath
ربما كنت تريد أن تسلط الضوء على الفقرة الأم للرابط الذي يحلق فقوه المؤشر
جرب هذا الكود

// JavaScript Document
$(document).ready(function() {
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
});
// end
حمل ملف الكود
بالنسبة لجميع عناصرالمراسي عندما يحلق عليها المؤشر، يتم العثور على العنصر الوالد ويضاف إليه الفئة "تسليط الضوء على" ثم يتم وإزالتها عند يتوقف المؤشر من التحليق فوق المنطقة.

قبل الاستمرار : لنعودة خطوة إلى الوراء: jQuery تفضل الكود الفصير وبالتالي أسهل للقراءة والمحافظة عليها.
مثلاً لنأخذ عذا الأمر

// JavaScript Document
$(document).ready(callback)
// end
ما يلي هو اختصار الكتابة

// JavaScript Document
$(function() {
// الكود المتوجب تنفيذه بعد تحميل الصفحة
});
// end
حمل ملف الكود
لو طبقنا هذا الكود على المثالنا السابق Hello world ! لكتبناه بالطريقة التالية :

// JavaScript Document
$(function() {
$("a").click(function() {
alert("Hello world!");
});
});
// end
حمل ملف الكود
مراجع مهمة :

وثائق API jQuery
وثائق للابحار حسب الفئات جي كويري البصرية
jQuery تعابير : CSS
JQuery تعابير : XPath
تعابير jQuery : إضافات
أحداث محددة jQuery
اجتياز الدوم jQuery
تعلم جي كويري jQuery مع اجاكس AJAX الخطوة الثالثة
مسار المقال الأصلي : [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
مع الشكر للسيد : Jörn Zaefferer
في هذة الخطوة سنكتب سكربت أجاكس AJAX يتيح للمستخدم أن يقيم مستوى المقال ويتيح له تحرير المعدل و إدخال علامة لتقيم هذا المقال

AJAX أجاكس
قبل أن نبدأ بتطبيقات الأجاكس لنحاول شرح معنى هذه الكلمة بشكل سريع و مبسط :
أجاكس اختصار كلمات Asynchronous Javascript And Xml هي طريقة تطوير مواقع الويب باستعمال XHTML و CSS لعرض المعلومات من جهة و استعمال DOM و JavaScript للتفاعل مع خيارات المستخدم و المعلومات المعروضة بشكل ديناميكي من جهة أخرى و استعمال Xml واموامر الأجاكس لتبادل المعلومات و البيانات مع خادم الويب بطريقة asynchrone ترجمة هذه الكلمة صعبة لكنها تتعلق بالوقت asynchrone تعني تبادل معلومات بين حاسوبين لا يستعملوا نفس التوقيت, تخيل أنك طرحت سؤال و قررت أن تتجاهل الجواب في حال تأخره أكثر من ثلاث ثوان
و يستعمل عكس هذه الكلمة في لغة البرمجة فيقال عن طريقة بأنها synchrone لاحظ حذف حرف A عندما تنتظر جواب على السؤال قبل أن تعطي جوابها.
في هذا التمرين :
سنحتاج للكود بي اتش بي rat.php على خادم الويب هذا الكود سيقوم بقراءة عدد العلامات و على أساس عدد العلامات سيعطي المتوسط لهذا التقييم
افتح الملف rat.php و اطلع على محتواه $rating هو متغير عدد العلامات
ملاحظة: في هذا التمرين عليك أن تفك ضغط الملف strterkit في الملف www لخادم الويب في حال استعمالك wamp
في هذا المثال سنستعمل الأجاكس لذلك سنولد الوسمات اللازمة بواسطة جيكويري jQyery و ندخلها في ديف و معرف هذة اليف هو rating

$(document).ready(function() {
// نولد الوسمات
var ratingMarkup = ["قيم الموضوع: "];
for(var i=1; i <= 5; i++) {
ratingMarkup[ratingMarkup.length] = "[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ";
}
// نضيف الوسمات للحاوية
// ونستعمل معالج النقر click
$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
e.preventDefault();
// ارسال الأمر
$.post("rate.php", {rating: $(this).html()}, function(xml) {
// ترتيب النتيجة
var result = [
"شكراً لمشاركتك, المتوسط العام هو ",
$("average", xml).text(),
", nombre de votes: ",
$("count", xml).text()
];
// عرض النتيجة
$("#rating").html(result.join(''));
} );
});
});
حمل ملف الكود
هذا الكود سيولد خمس عناصر مرسساة ancres و يضيفهم إلى الحاوية التي تحمل المعرف ID rating بعد ذلك نضيف إلى كل مرساة في هذة الحاوية معالج النقر كليك a click handler
عندما يضغط المستخدم على مرساة ancres سيرسل طلب بواسطة الطريقة بوست POST إلى السكربت rating
السكربت يرسل النتيجة بشكل اكس ام ال و بعدها تضاف إلى الحاوية التي تحمل المعرف rating ID
تستطيع أن تجد المزيد من المعلومات عن أوامر الأجاكس على هذه الصفحة
كما تستطيع مراجعة بند الأجاكس على موقع Visual jQuery
مشكلة تواجه مبرمجي الأجاكس عند تحميل محتوى جديد بواسظة أجاكس و هي عند إضافة معالجات الحدث الذين يتوجب تطبيقهم على المحتوى المحمل من جديد لتفادي تكرار الكود الحل هو تدب دالة
مثال:

// استعمال الاختصارات
$(function() {
var addClickHandlers = function() {
$("a.clickMeToLoadContent").click(function() {
$("#target").load(this.href, addClickHandlers);
});
};
addClickHandlers();
});
حمل ملف الكود
في هذه الحالة, الدالة addClickHandlers تطبق بعد أن يتم تحميل الدوم DOM أي بعد انتهاء تحميل الصفحة و في كل مرة ينقر فيها المستخدم على لرابط ينتمي للفئة clickMeToLoadContent طبق هذه الطريقة لتفادي التضارب مع المتغيرات أو الدوال العامة
مع تطبيقات الأجاكس البسيطة المستخدمة في هذا المثال نستطيع انجاز الكثير من تطبيقات الويب 2
لكنن ينقصنا ينقصنا المؤثرات الخاصةspecial effects
روابط مفيدة

jQuery Module AJAX
API jQuery فيها شرح و أمثلة عن طريقة append
Thickbox إضافة لمكتبة جي كويري لتحسين أداء lightbox
المؤثرات الخاصة بواسظة jQuery
تستطيع تحقيق الكثير من المؤثرات الخاصة بواسطة jQuery و خاصة بواسطة show و hide
مثال:

$(document).ready(function() {
$("a").toggle(function() {
$(".stuff").hide('slow');
}, function() {
$(".stuff").show('fast');
});
});
حمل ملف الكود
كما تستطيع مزج المؤثرات مع animate
مثال ديبوراما مع اختفاء بطيء للصور

$(document).ready(function() {
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide',
}, 'slow');
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
}, 'slow');
});
});
حمل ملف الكود
كما تستطيع استعمال مجموعة Interface elements الموقع يوفر لك الكثير من الأمثلة و الكود الجاهز للاستعمال و هناك الكثير من الإضافات الأخرى سنتكلم عن استعمالها في الخطوة الرابعة

jQuery Module FX
إضافة Interface
استعمال tablesorter
ضافة tablesorter تتيح لك ترتيب الجداول و هي من تطبيقات أجاكس
يتوجب ضمها و بعد ذلك تحدد الجدول المراد ترتيبه لكي تجرب هذه الإضافة عليك إضافتها في ملف starterkit.html مباشرتاً بعد السطر الذي يضم مكتبة jQuery


بعد ضمها تستعملها بالشكل التالي

$(document).ready(function() {
$("#large").tableSorter();
});
حمل ملف الكود
حاول أن تنقر على رأس الجدول و لاحظ كيف يتم اترايب بشكل تصاعدي
كما تستطيع تلوين الجدول كالحمار الوحشي
مثال:

$(document).ready(function() {
$("#large").tableSorter({
//اسم الفئة التي توفرها الإضافة لتحقيق المطلوب
stripingRowClass: ['odd','even'],
// تلوين الجدول عند تنفيذ الإضافة
stripRowsOnStartUp: true
});
});
حمل ملف الكود
للمزيد من المعلومات راجع


TableSorter plug-in for jQuery
كل الإضافات تستعمل بهذه الطريقة أولاً ضم الغضافة ثم استعمال طريقها
روابط مفيدة

إضافات jQuery
إضافة Tablesorter

منقوووووووووووول للامانه
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
سلسة تعلم jquery بــ 16 درس فقط
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى ديار الجنوب  :: منتدى لغات البرمجة :: منتدى لغات java , ajax . jquery-
انتقل الى: