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

العودة   منتدى مجمع التطوير > المنتدى المتخصص > لغـات البرمجـة والمشـاريع الجـاهزة > برمجة الويب web development

الملاحظات

برمجة الويب web development يهتم ببرامج الويب php, Sql, Java ,asp.net ,xml ,html

آخر 10 مشاركات مواقع للحصول على باك لينكس عالية (الكاتـب : admin - آخر مشاركة : سنبول - مشاركات : 1 - المشاهدات : 1161 - الوقت: 10:19 PM - التاريخ: 09-23-2021)           »          التقليد المذموم (الكاتـب : admin - مشاركات : 0 - المشاهدات : 297 - الوقت: 06:44 PM - التاريخ: 09-06-2021)           »          الخداع (الكاتـب : admin - مشاركات : 0 - المشاهدات : 215 - الوقت: 06:43 PM - التاريخ: 09-06-2021)           »          إعلانات شركة Admaven (الكاتـب : سنبول - مشاركات : 0 - المشاهدات : 351 - الوقت: 04:20 PM - التاريخ: 08-26-2021)           »          جدار روحك يريد أن ينقض (الكاتـب : admin - مشاركات : 0 - المشاهدات : 384 - الوقت: 11:27 PM - التاريخ: 08-23-2021)           »          سعر الذهب في مصر وعالميا صباح اليوم الخميس 12 أغسطس 2021 (الكاتـب : admin - مشاركات : 0 - المشاهدات : 377 - الوقت: 02:58 PM - التاريخ: 08-12-2021)           »          تأملت والدنيا (الكاتـب : admin - مشاركات : 0 - المشاهدات : 433 - الوقت: 10:54 PM - التاريخ: 08-03-2021)           »          وكن راضيا (الكاتـب : admin - مشاركات : 0 - المشاهدات : 413 - الوقت: 10:54 PM - التاريخ: 08-03-2021)           »          طوبا لمن عاش في هذه الدنيا غريبا (الكاتـب : admin - مشاركات : 0 - المشاهدات : 426 - الوقت: 10:53 PM - التاريخ: 08-03-2021)           »          لا تشكُ للناسِ (الكاتـب : admin - مشاركات : 0 - المشاهدات : 435 - الوقت: 10:52 PM - التاريخ: 08-03-2021)

إضافة رد
 
أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 05-29-2021, 03:22 AM
الصورة الرمزية الادارة كريم
الادارة كريم 
مشرف سابق
 
تاريخ التسجيل: May 2021
الدولة: مصر
المشاركات: 397
معدل تقييم المستوى: 22
الادارة كريم 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 وتغيير الأقسام بدون إعادة تحميل الصفحة || الكاتب : الادارة كريم || المصدر : منتدى مجمع التطوير

 

رد مع اقتباس
قديم 05-29-2021, 10:10 PM   #2
admin
✯ ادارة المنتدى ✯
 
الصورة الرمزية admin
 
تاريخ التسجيل: Mar 2021
الدولة: مصر
المشاركات: 733
معدل تقييم المستوى: 10
admin is a splendid one to beholdadmin is a splendid one to beholdadmin is a splendid one to beholdadmin is a splendid one to beholdadmin is a splendid one to beholdadmin is a splendid one to behold


افتراضي

اضافة مهمة وتشكر
admin غير متواجد حالياً
 
رد مع اقتباس
قديم 06-06-2021, 02:48 AM   #3
الادارة كريم
مشرف سابق
 
الصورة الرمزية الادارة كريم
 
تاريخ التسجيل: May 2021
الدولة: مصر
المشاركات: 397
معدل تقييم المستوى: 22
الادارة كريم 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


افتراضي

مرورك الاروع

نورت
الادارة كريم غير متواجد حالياً
 
رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

 

موقع ومنتديات مجمع التطوير موقع يختص بالبرمجة والبرامج المساعدة  للتصاميم والأدوات المساعدة ,مع تقديم العون والمساعدة لكل مبرمج من خلال الأقسام المحددة , كما نعرض الأعمال الجاهزة والمفتوحة المصدر. ويهتم أيضا بالتصاميم والجرافيك وبرامجها وعرض التصاميم وملحقات التصاميم والأدوات المساعدة .كما نتمنى التوفيق لنا ولكم مع أجمل تحية مقدمة منا. 

  • الرئــيســية

  • الــمنــتـدى

  • مركز الرفع

  • التسـجـيل

  • قوانين المنتدى

  • التعـلـيمـات

  • الترقيات

check pagerank

 Flag Counter

كلمة الإدارة  منتدى مجمع التطوير غير مسئول عن أي طرح من الأعضاء فتلك الموضوعات تعبر عن رأى صاحبها ومن خلال وضع قوانين وتعليمات المشاركة بالمنتدى نسعى جاهدين لتطبيق تلك التعليمات. والمنتدى أيضا غير مسئول عن أي اتفاق مالي أو تجارى بين الأعضاء وبذلك تعد هذه الصيغة إخلاء مسئولية من جانب إدارة المنتدى وفقنا ووفقكم الله لما فيه الخير
 
الساعة الآن 02:02 PM


Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.
جميع الحقوق محفوظة لمجمع التطوير