عرض مشاركة واحدة
  #1  
قديم 05-29-2021, 03:22 AM
الصورة الرمزية الادارة كريم
الادارة كريم 
مشرف سابق
 
تاريخ التسجيل: May 2021
الدولة: مصر
المشاركات: 397
معدل تقييم المستوى: 18
الادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to behold


4 شرح إضافة MixItUp وتغيير الأقسام بدون إعادة تحميل الصفحة

 

شرح إضافة MixItUp وتغيير الأقسام بدون إعادة تحميل الصفحة

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

إضافة رائعة جدا لا بد منها لكل مصمم مواقع ، قد تحتاج إلى عرض محتويات متعددة في نفس الصفحة أو في قسم من الصفحة مصنفة إلى أقسام وبدون إعادة تحميل الصفحة ، قد تكون مقتطفات من مواضيع مصنفة أو مجرد روابط أو صور ، إضافة MixItUp المعدة بالجافاسكريبت تساعدك على عرض هذا المحتوى بشكل جميل وبالتصنيف الذي تريده في نفس المكان وبدون إعادة تحميل الصفحة .

أنظر إلى الصورة التالية :


هذه الأيقونات قمت بتصنيفها كما ترى وهي تظهر جميعا لأنني ضغطت على All ، بفضل إضافة MixItUp عندما أضغط على Food مثلا ستظهر فقط ثلاثة كما في الصورة التالية :




بعد تحميل ملفات الإضافة من موقع Github من الرابط التالي :

رابط التحميل

نأخذ ملف الجافاسكريبت mixitup.min.js من مجلد dest ونقوم باستدعائه في أسفل ملف html قبل وسم إغلاق body وبعده مباشرة نستدعي ملف الجافاسكريبت الخاص بنا .


بعد ذلك ننشئ الأقسام التي سنضغط عليها لاستبدال المحتوى المعروض ، يمكن إنشاؤها باستخدام الوسم button أو a أو إنشاء قائمة ul لا فرق فقط يجب الإلتزام بقواعد الإضافة بحيث نضع لكل قسم خاصية data-filter تأخذ القيمة all في حالة عرض الكل أو إسم الكلاس التي سنضعها لاحقا للمحتوى مسبوقا بالنقطة ، لا حظ الصورة التالية :


بعد ذلك نضع div بكلاس container وداخله المحتويات مصنفة كل محتوى نعطيه كلاس mix بالإضافة إلى كلاس أخرى بنفس الإسم الذي وضعناه ل data-filter سابقا ، ونضع له أيضا خاصية data-order وتأخذ قيمة رقمية من 1 فما فوق للترتيب ، لاحظ الصورة التالية :


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


يمكنك وضع أكثر من كلاس لمحتوى تريد أن يظهر في أكثر من قسم كما يمكنك تغيير قيمة duration لإبطاء أو تسريع الظهور .

شاهد الفيديو التالي للمزيد من الشرح العملي



الموضوع الأصلي : شرح إضافة MixItUp وتغيير الأقسام بدون إعادة تحميل الصفحة || الكاتب : الادارة كريم || المصدر : منتدى مجمع التطوير

 

رد مع اقتباس