أثناء إنشاء نماذج تفاعلية وسهلة الاستخدام أو صفحات مدخل على الموقع، يقوم المطورون عادةً بتضمين أشرطة تقدم سريعة الاستجابة وجذابة وتسمح للمستخدم بمعرفة الحالة المكتملة للنموذج أو إنشاء ملف تعريف. تساعد هذه الأنواع من الوظائف بشكل كبير في تحسين تجربة المستخدم لموقع معين.
تناقش هذه المدونة الجوانب التالية:
- ما هو شريط التقدم سريع الاستجابة؟
- كيفية تصميم شريط تقدم سريع الاستجابة باستخدام HTML وCSS وJavaScript؟
ما هو شريط التقدم سريع الاستجابة؟
في شريط التقدم هذا، يتم تقسيم النموذج الكبير إلى خطوات متعددة. يقوم هذا الشريط بإعلام الزائرين بحالة النماذج المكتملة والمتبقية.
كيفية تصميم شريط تقدم سريع الاستجابة باستخدام HTML وCSS وJavaScript؟
يمكن تصميم شريط التقدم سريع الاستجابة بمساعدة HTML وCSS وJavaScript. للقيام بذلك، تحقق من الكود التالي. أولاً، قم بالتعمق في جزء HTML من الكود، كما يلي:
< h2 أسلوب = 'محاذاة النص: المركز؛' > شريط التقدم المستجيب h2 >
< شعبة بطاقة تعريف = 'تقدم' >
< شعبة بطاقة تعريف = 'التقدم 1' >< شعبة >
< ماي بطاقة تعريف = 'التقدم 2' >
< الذي - التي فصل = 'الخطوة النشطة' > 1 الذي - التي >
< الذي - التي فصل = 'خطوة' > 2 الذي - التي >
< الذي - التي فصل = 'خطوة' > 3 الذي - التي >
< الذي - التي فصل = 'خطوة' > نهاية الذي - التي >
ماي >
شعبة >
< زر بطاقة تعريف = 'التقدم' فصل = 'بي تي ان' عاجز > خلف زر >
< زر بطاقة تعريف = 'التقدم التالي' فصل = 'بي تي ان' > التالي زر >
في مقتطف الشفرة أعلاه، قم بتطبيق المنهجيات الواردة أدناه:
- قم بإنشاء عنوان وقم بتضمين اثنين ' <ديف> 'عناصر لتجميع شريط التقدم.
- كما تشمل '
- وأخيرًا، قم بإنشاء زرين للرجوع أو الانتقال إلى الخطوة التالية، على التوالي.
كود CSS
الآن، نظرة عامة على كتلة التعليمات البرمجية CSS التالية:
< أسلوب يكتب = 'النص / المغلق' >#تقدم {
الموقف: نسبي؛
الهامش السفلي: 30 بكسل؛
}
#التقدم1 {
الموقف: مطلق؛
الخلفية: أخضر؛
الارتفاع: 5 بكسل؛
عرض: 0 % ;
قمة: خمسون % ;
غادر: 0 ;
}
#التقدم2 {
هامِش: 0 ;
حشوة: 0 ;
نمط القائمة: لا شيء؛
عرض: ثني ;
ضبط المحتوى: مسافة بين؛
}
#progress2::قبل {
محتوى: '' ;
لون الخلفية: رمادي فاتح؛
الموقف: مطلق؛
قمة: خمسون % ;
غادر: 0 ;
الارتفاع: 5 بكسل؛
عرض: 100 % ;
مؤشر z: -1 ;
}
#progress2 .الخطوة {
الحدود: 3 بكسل رمادي فاتح خالص؛
نصف قطر الحدود: 100 % ;
العرض: 25 بكسل؛
الارتفاع: 25 بكسل؛
ارتفاع الخط: 25 بكسل؛
محاذاة النص: مركز؛
لون الخلفية: #ففف؛
عائلة الخط: بلا الرقيق؛
حجم الخط: 14 بكسل؛
الموقف: نسبي؛
مؤشر z: 1 ;
}
#progress2 .step.active {
لون الحدود: أخضر؛
لون الخلفية: أخضر؛
لون: #ففف؛
}
أسلوب >
في هذا الكود:
- اضبط الموضع النسبي لشريط التقدم والموضع المطلق للعناصر الفرعية الأساسية.
- قم أيضًا بتصميم شريط التقدم بحيث يشتمل على لون افتراضي قبل التبديل إلى الخطوة التالية وينتقل إلى لون مختلف عند المتابعة إلى الخطوة التالية.
- ويتم تحقيق ذلك من خلال التصميم، أي ' لون الخلفية 'إلخ كل من الخطوات الخاملة والفعالة داخل الدائرة.
كود جافا سكريبت
وأخيرًا، انتبه إلى كتلة التعليمات البرمجية المتوفرة أدناه:
< النصي يكتب = 'نص/جافا سكريبت' >يترك xBar = document.getElementById ( 'التقدم 1' ) ;
يترك xNext = document.getElementById ( 'التقدم التالي' ) ;
يترك xPrev = document.getElementById ( 'التقدم' ) ;
يترك الخطوات = document.querySelectorAll ( '.خطوة' ) ;
يترك نشط = 1 ;
xNext.addEventListener ( 'انقر' , ( ) = < {
نشط++;
لو ( نشيط < الطول ) {
نشط = الخطوات. الطول؛
}
ResponsiveProgress ( ) ;
} ) ;
xPrev.addEventListener ( 'انقر' , ( ) = < {
نشيط--؛
لو ( نشيط > 1 ) {
نشط = 1 ;
}
ResponsiveProgress ( ) ;
} ) ;
ثابت مستجيبالتقدم = ( ) = < {
steps.forEach ( ( الخطوة، أنا ) = < {
لو ( أنا > نشيط ) {
step.classList.add ( 'نشيط' ) ;
} آخر {
step.classList.remove ( 'نشيط' ) ;
}
} ) ;
xBar.style.width =
( ( نشيط - 1 ) / ( طول الخطوات - 1 ) ) * 100 + '%' ;
لو ( نشط === 1 ) {
xPrev.disabled = حقيقي ;
} آخر لو ( نشط === الخطوات.الطول ) {
xNext.disabled = حقيقي ;
} آخر {
xPrev.disabled = خطأ شنيع ;
xNext.disabled = خطأ شنيع ;
}
} ;
النصي >
في سطور التعليمات البرمجية هذه:
- أولاً، قم باستدعاء شريط التقدم والأزرار السابقة والتالية عبر ' معرفات ' باستخدام ' getElementById() ' طريقة.
- وبعد ذلك قم بتطبيق ' addEventListener() 'طريقة بحيث يتم تشغيلها' انقر '، يتم اجتياز الخطوات النشطة حتى تنتهي الخطوات عبر' طول ' ملكية.
- وبالمثل، اجتياز مرة أخرى من خلال الخطوات.
- وكذلك استدعاء ' التقدم المستجيب () ' الدالة التي تتكرر خلال كل خطوة من الخطوات وتبديل الفئة النشطة عبر عبارة 'if/else'.
- الآن، قم بتعيين عرض شريط التقدم كنسبة مئوية فيما يتعلق بالخطوات النشطة والإجمالية/جميع الخطوات.
- وأخيرًا، قم بتعطيل الزر المقابل إذا كانت الخطوة النشطة هي الأولى أو الأخيرة.
ملحوظة: في هذه الحالة، يتم تضمين الكود بالكامل في نفس ملف HTML مع العلامات المخصصة لـ ' CSS ' و ' جافا سكريبت 'رموز. ومع ذلك، يمكن أيضًا ربط الملفات المنفصلة.
انتاج |
خاتمة
يصبح شريط التقدم سريع الاستجابة ساري المفعول عندما يتم تقسيم نموذج كبير إلى خطوات متعددة ويمكن تصميمه باستخدام HTML وCSS وJavaScript. يمكن أيضًا تخصيص شريط التقدم هذا بشكل أكبر وفقًا للمتطلبات، أي إضافة الخطوات أو إزالتها، وما إلى ذلك. في هذه المقالة، قمنا بتوضيح تصميم الأشرطة سريعة الاستجابة باستخدام HTML وCSS وJavaScript.