10 الحرة جافا سكريبت نافذة الوسائط الإضافات

يمكنك إيجاد الكثير من مشروط CSS النقي ولكن هذه لا تقدم نفس عنصر التحكم مثل JavaScript. باستخدام مشروط JavaScript ، يمكنك إضافة رسوم متحركة مخصصة ومدخلات واجهة المستخدم وتحسين تجربة المستخدم حقًا.

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

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

1. الوخز

واحدة من بلدي النصية مشروط الحرة المفضلة هي Tingle.js. انها بنيت على الفانيليا جافا سكريبت مع عدم وجود التبعيات, لذلك لا تحتاج إلى أي مكتبات مسج أو Zepto.

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

تم تصميم Tingle.js ليكون يمكن الوصول إليها بالكامل واستجابة, لذلك يعمل على الأجهزة المحمولة ويدعم المتصفحات القديمة أيضًا.

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

2. الفانيليا مشروط

إليك مشروط وجدته مؤخرًا وهو مجموعة كاملة أبسط من معظم. الفانيليا مودال يقف وفيا لاسمها مع النصي الفانيليا النقي تشغيل مشروط ، جنبا إلى جنب مع التحولات المغلق.

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

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

3. عاديمودال

إذا كنت ترغب في برنامج نصي بسيط حقا أوصي plainModal. أنه بنيت على مسج, ولكنها واحدة من أصغر البرامج النصية مشروط المتاحة.

نعم هو كذلك عدم استخدام أي ملفات صور أو ملفات CSS خارجية. برنامج نصي واحد فقط JS هو كل ما تحتاجه.

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

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

4. مشروط

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

مع Modaal, يمكنك الحصول على تلك التجربة المثالية التي يجتاز اختبار WCAG 2.0 مع تصنيف قوي للوصول AA. يمكنك رؤية مثال رائع على الصفحة الرئيسية ، إلى جانب بعض وثائق الكود.

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

5. سكوتش JS مشروط

ينشر فريق التطوير في Scotch.io برامج تعليمية وأدلة للمبرمجين. عملهم لا يصدق ويظهر حقا في هذا البرنامج النصي JavaScript مشروط ، استضافته على سكوتش جيثب.

تم تطوير الوسائط من قبل كين ويلر وهذا السيناريو حتى لديه البرنامج التعليمي الكامل إذا كنت تريد أن تتعلم كيف يعمل. ومع ذلك ، يجب أن يكون الكود المجاني كافياً لمعظم المطورين لأن هذا هو خفيفة الوزن فائقة وسهلة الإعداد. لا التبعيات ، وحتى التجريبي عينة على CodePen.

6. Bootbox.js

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

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

مربعات حوار JavaScript النموذجية مرعبة ، تمامًا مثل مربعات التنبيه. السيناريو Bootbox يقدم بديل قوي لأي شخص يعمل في النظام البيئي BS3 / BS4.

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

7. iziModal.js

اذا أنت بحاجة الى حل أكثر تخصيصا قليلا الدفع iziModal.js. هذه الأداة هي استجابة كاملة ومصممة ل العمل في جميع المتصفحات الحديثة تماما.

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

فقط لاحظ هذا البرنامج المساعد يعمل على مسج, لذلك هي واحدة من عدد قليل هنا لديه التبعية. ولكن ، إذا كنت ترغب في استخدام أنماط iziModal ، فيمكنك دفع ثمن مثل هذه النوافذ الأنيقة من popover.

8. مسج مشروط

ال مسج البرنامج المساعد مشروط ربما هو أبسط نص مشروط على مسج ستجده من أي وقت مضى.

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

في المجموع ، هذا البرنامج المساعد تدابير أقل من 1KB و يعمل في كل متصفح ممكن يمكنك تخيله. يجب على مطوري jQuery الحفاظ على هذا البرنامج المساعد محفوظًا للوصول السريع إلى برنامج نصي مشروط بسيط دون الرتوش الإضافية.

9. PicoModal

العودة نحو جافا سكريبت الفانيليا ، لدينا مكتبة PicoModal. ربما تكون هذه واحدة من أصغر البرامج النصية التي ستجدها وهي مصممة ل تشغيل تماما على العمود الفقري جافا سكريبت.

هذا يدعم جميع المتصفحات الحديثة, بما في ذلك متصفحات الجوّال لنظامي Android و Mobile Safari لنظام التشغيل iOS. وهو يدعم حتى متصفحات IE الأقدم ، التي يرجع تاريخها إلى IE7!

مطور PicoModal إنشاء برنامج نصي JSfiddle صغير لشرح كيف يعمل. هذا مثال صغير جدًا وهو غير مرتبطة بحدث النقر أو أي شيء آخر, لكنها ليست صعبة النصي في عدد قليل من أزرار التبديل لتشغيل هذه النافذة مشروط بشكل صحيح.

10. Avgrund

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

لن يقدّر الجميع هذه الرسوم المتحركة ، لذلك لا أستطيع أن أقول أن هذا البرنامج النصي سوف يناسب كل موقع ويب. ولكن ، مشروط الفانيليا النقي ومن السهل جدا الإعداد, مع مجرد CSS وفيل جافا سكريبتالبريد.

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

الكلمات الأخيرة

بغض النظر عن ما تبحث عنه ، سأراهن أن هناك شيء في هذه القائمة يناسب احتياجاتك. ولكن ، إذا كنت لا تزال غير راضٍ تصفح GitHub للبحث عن البرامج النصية ذات الصلة وانظر ماذا يمكنك أن تجد.