بناء مستجيبة لتصاميم شبكة فرز مع هذا البرنامج النصي

شبكات مخصصة هي بعض من أصعب الميزات التي يتم إنشاؤها من الصفر. يمكنك أن تجد الكثير من الإضافات شبكة البناء لكنهم لكل منها القيود والمتطلبات الخاصة بهم.

ال النصي Muuri هو بديل قوي لمن يحتاج عناصر الشبكة القابلة للفرز والاستجابة مع دعم اللمس.

انها مبنية على Velocity.js للرسوم المتحركة, جنبا إلى جنب مع مكتبة Hammer.js للتعامل مع الهاتف المحمول. Muuri لا تتطلب مسج, لذلك هو واحد من الإضافات جافا سكريبت الفانيليا القليلة لواجهات الشبكة.

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

يمكنك اختيار أي العناصر لعرضها, بناءً على الفصول (بمعنى التصفية) ، جنبًا إلى جنب مع كيف تريد أن تملأ المساحات الفارغة.

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

فكر في ملفات التعريف الاجتماعية مع تخطيطات widgetized وكيف سيعملون؟ أو فكر في قوائم مهام مخصصة تعمل كتطبيقات ويب تقدمية على جافا سكريبت. في الواقع ، هناك عرض رائع لهذا على صفحة Muuri يعرض عينة من قائمة المهام وكيف يمكن أن يعمل ك PWA على الهاتف المحمول.

لتبدأ ، أنت فقط تشمل جميع تبعيات جافا سكريبت ، جنبا إلى جنب مع البرامج النصية Muuri. يمكنك سحبها من خلال npm أو الحصول على نسخة من GitHub repo.

ثم أنت إنشاء عنصر شبكة الحاوية و الهدف الذي مع مثيل جديد لل Muuri () طريقة. الأمر بسيط للغاية وسهل الاستخدام بشكل خاص عن طريق نسخ مقتطفات الكود من ريبو جيثب.

مع الدعم الكامل لجميع المتصفحات الحديثة (IE9 +) وواجهة تعمل باللمس, هذا البرنامج المساعد هو واحد من أفضل ميزات شبكة السحب والإفلات.

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