شرح إضافة 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 لإبطاء أو تسريع الظهور .
شاهد الفيديو التالي للمزيد من الشرح العملي
