نطاق الإدخال هو عنصر تحكم يسمح للمستخدم بتحديد قيمة في فترة زمنية معينة. إنه أحد أهم عناصر نموذج صفحة الويب.
ومع ذلك ، فإن تمثيله المرئي لا يتطابق دائما مع تصميم الموقع وقد يبدو مملا ومعياريا.
من أجل ظهور نطاق الإدخال لتتناسب مع تصميم الموقع ، فإنه يمكن أن تكون على غرار باستخدام كس.
في هذه المقالة ، سننظر في عدة طرق لتصميم نطاق الإدخال باستخدام كس. سنلقي نظرة على الخصائص والتقنيات الأساسية التي ستساعدك على إنشاء منزلقات جميلة وبديهية لاختيار القيم.
في المثال الأول ، سنوضح كيفية تغيير مظهر شريط تمرير نطاق الإدخال القياسي. استخدمنا خصائص كس مثل لون الخلفية ، دائرة نصف قطرها الحدود ، ومربع الظل لإنشاء خلفية التدرج ، زوايا مدورة ، وتأثير الظل.
أضفنا أيضا عناصر زائفة:: قبل و:: بعد إنشاء شريط تمرير ومؤشر للقيمة الحالية.
لا تنس أن تصميم نطاق الإدخال قد يكون غير قياسي وغير مدعوم في بعض المتصفحات. لذلك ، قبل استخدام تصميم نطاق الإدخال في مشروعك ، يوصى بالتحقق من توافقه.
- قيمة شفرة المصدر للحصول على نطاق إدخال منمق
- كيفية نمط نطاق الإدخال في كس
- تطبيق الأنماط على نطاق الإدخال
- استخدام العناصر الزائفة لتصميم نطاق الإدخال
- نصائح تصميم نطاق الإدخال
- اختيار النوع المناسب من تصميم نطاق الإدخال
- استخدام التدرجات وصور الخلفية لتصميم نطاق الإدخال
- سؤال وجواب
- كيف يمكنني تغيير لون شريط التمرير في نطاق الإدخال?
- هل من الممكن تغيير التصميم من مختلف الدول نطاق الإدخال?
- كيف يمكنني تغيير ارتفاع الشريط أمام شريط التمرير?
- كيف يمكنني إضافة الظل إلى شريط التمرير في نطاق الإدخال?
- كيف يمكنني تغيير عرض الشريط أمام شريط التمرير?
- هل من الممكن إضافة الرسوم المتحركة عند تغيير قيمة نطاق الإدخال?
قيمة شفرة المصدر للحصول على نطاق إدخال منمق
لإنشاء نطاق إدخال منمق ، تحتاج إلى استخدام مزيج من هتمل ، كس ، وجافا سكريبت. دعونا نبدأ مع رمز هتمل الذي يحدد هيكل والضوابط.
مثال على كود هتمل:
50
ينشئ هذا الرمز نطاق إدخال بنطاق من القيم من 0 إلى 100 وقيمة أولية تبلغ 50. يتم استخدام فئة" شريط تمرير النطاق " كحاوية لعناصر التصميم وتحديد المواقع.
بعد ذلك ، يمكننا استخدام كس لخلق الشكل المطلوب والأسلوب. على سبيل المثال ، يمكننا إضافة لون الخلفية ، وتغيير الارتفاع والعرض ، وتعيين لون شريط التمرير والمسار.
مثال على أنماط كس:
.المدى المتزلج {
موضع: نسبي;
العرض: 300 بكسل;
الارتفاع: 10 بكسل;
لون الخلفية: # دد;
نصف قطر الحدود: 5 بكسل;
}
.المدى المنزلق .المنزلق {
موضع: مطلق;
أعلى: -5 بكسل;
ض-الفهرس: 1;
العرض: 100%;
الارتفاع: 10 بكسل;
- بكت-المظهر: لا شيء;
لون الخلفية: شفاف;
}
.المدى المنزلق .المتزلج::-بكت-المتزلج-الإبهام {
- بكت-المظهر: لا شيء;
العرض: 20 بكسل;
الارتفاع: 20 بكسل;
دائرة نصف قطرها الحدود: 50%;
لون الخلفية: # 3498 ديسيبل;
المؤشر: المؤشر;
}
.المدى المنزلق .المنزلق::-موز-المدى-الإبهام {
العرض: 20 بكسل;
الارتفاع: 20 بكسل;
دائرة نصف قطرها الحدود: 50%;
لون الخلفية: # 3498 ديسيبل;
المؤشر: المؤشر;
}
في هذا المثال ، قمنا بتعيين عرض وارتفاع شريط التمرير ، وتعيين لون الخلفية ، وتقريب الحواف وتعيين الشفافية. لقد قمنا أيضا بتخصيص نمط شريط التمرير ، بما في ذلك حجمه وشكله ولونه وخصائصه الأخرى.
أخيرا ، يمكننا إضافة شفرة جافا سكريبت صغيرة لعرض القيمة الحالية لشريط التمرير وتحديث عنصر الإخراج ديناميكيا.
فار المتزلج = وثيقة.جيتليمنتبيد ("ميرانج");
الناتج فار = وثيقة.جيتليمنتبيد ("المتزلج القيمة");
الإخراج.إينرتمل = المتزلج.القيمة;
المنزلق.أونينبوت = وظيفة () {
الإخراج.إينرتمل = هذا.القيمة;
}
يحصل هذا الرمز على عنصر نطاق الإدخال وعنصر الإخراج ، ثم يربطهما بحيث عندما تتغير قيمة شريط التمرير ، فإنه يخرج القيمة الحالية. نطاق الإدخال المنمق جاهز للاستخدام!
باستخدام الكود أعلاه ، يمكنك إنشاء وتصميم نطاق الإدخال الخاص بك لصفحة الويب وتكييفه مع احتياجاتك. استخدم كس وجافا سكريبت لإنشاء نموذج مخصص تفاعلي وجذاب.
كيفية نمط نطاق الإدخال في كس
- height: 20px;
- بكت-المظهر: لا شيء;
العرض: 200 بكسل;
- الارتفاع: 10 بكسل;
- / * وضع الصورة كخلفية المنزلق */
- الخلفية-صورة: رابط ('المنزلق-الإبهام.بابوا نيو غينيا');
حجم الخلفية: 20 بكسل 20 بكسل;
الخلفية-كرر: لا-كرر;
| / * وضع الصورة كخلفية للمسار المنزلق */ | ||
|---|---|---|
| ::- بكت-المتزلج-رونابل-المسار { | | |
| الخلفية صورة: رابط ('المتزلج المسار.بابوا نيو غينيا'); | | |
| حجم الخلفية: 100٪ 100%; | | |
| الخلفية-كرر: لا-كرر; | | |
| } | | |
| } | | |
| ||
| استخدام المكتبة | الطريقة الثالثة لنمط نطاق الإدخال في كس هو استخدام المكتبات الجاهزة مثل نويسليدر أو مسج واجهة المستخدم المنزلق. أنها توفر إمكانيات واسعة لتصميم وتخصيص نطاق الإدخال. | اختر الطريقة المناسبة لتصميم نطاق الإدخال في كس ، اعتمادا على متطلباتك وقدراتك. جرب أنماطا مختلفة لإنشاء مظهر فريد وجذاب لنطاق الإدخال الخاص بك. |
تطبيق الأنماط على نطاق الإدخال
يتيح لك تصميم عنصر نطاق الإدخال تغيير مظهره وإنشاء واجهات مستخدم مثيرة للاهتمام وتفاعلية. للقيام بذلك ، يمكنك استخدام خصائص كس والعناصر الزائفة.
الانتقال-التغيير السلس للخصائص عند التفاعل مع شريط التمرير.
لتحسين إمكانية الوصول إلى استخدام نطاق الإدخال ، يمكنك إضافة تلميح نصي يعرض القيمة الحالية:
- });
- Пример
- الإدخال [النوع="النطاق"] { العرض: 100٪؛}
الارتفاع
10 بكسل
الإدخال [النوع="النطاق"] { الارتفاع: 10 بكسل؛}
لون الخلفية
# سك
الإدخال [نوع= "المدى"] { لون الخلفية: # سك؛}
الحدود
- دائرة نصف قطرها الحدود
- مربع الظل
0 0 5 بكسل رغبا (0 ، 0 ، 0 ، 0.3)
الإدخال [نوع= "المدى"] { مربع الظل: 0 0 5 بكسل رغبا(0, 0, 0, 0.3); }
المؤشر
المؤشر
الإدخال [النوع="المدى"] { المؤشر: المؤشر؛}
الانتقال
0.2 ثانية
الإدخال [النوع= "النطاق"] { الانتقال: 0.2 ثانية؛}
- في الأمثلة المقدمة ، يتم استخدام الخصائص الأساسية فقط ، ويمكن دمجها واستكمالها مع الآخرين لتحقيق التأثير المطلوب.
- استخدام العناصر الزائفة لتصميم نطاق الإدخال
- لنمط عنصر نطاق الإدخال في كس ، يمكنك استخدام الزائفة
- - عناصر:: - بكت-المتزلج-رونابل-المسار
- ,
::- بكت-المنزلق-الإبهام
و
::- موز-المدى-المسار
- ,
- ::- موز-المدى-الإبهام
- . يمكنك استخدامها لتغيير مظهر شريط التمرير والمسار.
مثال على تصميم شريط التمرير:
| اضبط حجم شريط التمرير باستخدام الخصائص | العرض | و |
|---|---|---|
| الارتفاع | . | تغيير لون شريط التمرير باستخدام الخاصية |
| لون الخلفية | . | Установите форму ползунка с помощью свойства |
| border-radius | . |
|
background-color: #ff0000;
border-radius: 50%;
}
height
.
.
input[type="range"]::-webkit-slider-runnable-track {
قد يختلف دعم العناصر الزائفة في المتصفحات المختلفة ، لذلك من المهم التحقق من تصميم عنصر نطاق الإدخال على أجهزة مختلفة وفي متصفحات مختلفة.
نصائح تصميم نطاق الإدخال
نطاق الإدخال هو عنصر نموذج يسمح لك بتحديد قيمة من نطاق معين. يمكن أن يكون تصميم هذا العنصر مفيدا لتحسين المظهر وتجربة المستخدم. فيما يلي بعض النصائح حول كيفية تصميم نطاق الإدخال:
تغيير مظهر شريط التمرير: يمكن تصميم شريط تمرير نطاق الإدخال باستخدام العناصر الزائفة::-ويبكيت-المتزلج-الإبهام و::-موز-المدى-الإبهام لمتصفحات ويبكيت وأبو بريص ، على التوالي. يمكنك تغيير اللون والحجم والشكل وإضافة صورة خلفية من شريط التمرير لمطابقة التصميم الخاص بك بشكل أفضل.
إضافة صورة خلفية: لإنشاء مظهر أكثر جاذبية ، يمكنك استخدام صورة خلفية نطاق الإدخال. على سبيل المثال ، يمكنك إضافة خلفية متدرجة أو صورة تعرض القيمة الحالية للنطاق المحدد.
تغيير لون المقياس: بشكل افتراضي ، يكون لمقياس نطاق الإدخال لون يعتمد على نظام التشغيل والمتصفح. يمكنك تغيير لون المقياس باستخدام العناصر الزائفة:: - بكت-المتزلج-رونابل-المسار و ::-موز المدى المسار لبكيت وزغة المتصفحات ، على التوالي.
إضافة تسميات: لتبسيط إدراك قيمة النطاق المحدد ، يمكنك إضافة تسميات. يمكن وضع الملصقات على مقياس نطاق الإدخال أو أسفل شريط التمرير. يمكنك استخدام علامات التسمية أو إنشاء عناصر منفصلة لكل تسمية.
تغيير المظهر عند التركيز والتحويم: لتسهيل تفاعل المستخدمين مع نطاق الإدخال ، يمكنك تغيير مظهره عند التركيز والتحويم. على سبيل المثال ، يمكنك تغيير لون شريط التمرير أو إضافة رسم متحرك عندما تتغير القيمة.
هذه ليست سوى بعض ميزات التصميم في نطاق الإدخال. من المهم أن تتذكر أن دعم تصميم نطاق الإدخال قد يختلف من متصفح لآخر ، لذلك يوصى باختبار أسلوبك على منصات ومتصفحات مختلفة.
اختيار النوع المناسب من تصميم نطاق الإدخال
يمكن استخدام طرق مختلفة لتصميم عنصر نطاق الإدخال ، اعتمادا على المتطلبات وتفضيلات التصميم. دعونا نلقي نظرة على عدد قليل منهم:
المظهر الأصلي: إذا كنت ترغب في الحفاظ على المظهر الطبيعي لعنصر ما ، يمكنك ببساطة استخدام تصميمه القياسي بدون أنماط إضافية.
تخصيص بسيط: لتناسب العنصر أكثر انسجاما في التصميم ، يمكنك تطبيق بعض أنماط كس ، على سبيل المثال ، تغيير لون وعرض وارتفاع شريط التمرير ، إضافة نسيج الخلفية أو نمط.
تقليد المنزلق: لإنشاء خيارات تصميم أكثر تعقيدا وتفاعلية ، يمكنك استخدام مكونات هتمل 5 أو رسومات سفغ أو مكتبات جافا سكريبت التي تسمح لك بإنشاء منزلقات بأشكال ورسوم متحركة وتأثيرات مختلفة.
من المهم أن تتذكر أن اختيار النوع المناسب من تصميم نطاق الإدخال يعتمد على أهداف التصميم والمفهوم المرئي للمشروع والسلوك المتوقع للعنصر على الأجهزة المختلفة.
الأسلوب