المنزلق مؤسسة
مؤسسة المنزلق يسمح للمستخدم لتحديد مجموعة من القيم عن طريق سحب:
المنزلق باستخدام <div class="range-slider" data-slider> " المنزلق البيانات> إنشاء. في <div> في الداخل، إضافة إلى اثنين من <span> العنصر: <span class="range-slider-handle"> إنشاء المنزلق مستطيلة (خلفية زرقاء)، <span class="range-slider-active-segment"> في شريط التمرير الرمادي بعد منطقة التمرير.
ملاحظة: شريط التمرير يتطلب جافا سكريبت. لذلك تحتاج إلى تهيئة oundation شبيبة:
أمثلة
<الطبقة سبان = "المدى المنزلق مقبض"> </ SPAN>
<الطبقة سبان = "المدى المنزلق -active-شريحة"> </ SPAN>
</ div>
<! - تهيئة مؤسسة شبيبة ->
<script>
$ (الوثيقة) .ready (وظيفة () {
$ (الوثيقة) .foundation ()؛
})
</ script>
محاولة »
شرائح وتعطيل المنزلق
استخدام .radius و .round الطبقات لإضافة تدوير زوايا التمرير. استخدام .disabled فئة لتعطيل شريط التمرير:
أمثلة
<فئة الدرجة = "المدى المنزلق دائرة نصف قطرها" بيانات المنزلق> ... </ div>
<فئة الدرجة = "المدى المنزلق جولة" المنزلق البيانات> ... </ div>
<فئة الدرجة = "المدى المنزلق تعطيل" المنزلق البيانات> ... </ div>
محاولة »
التمرير العمودي
استخدام .vertical-range الطبقات و data-options="vertical: true;" ،" لخلق التمرير العمودي:
أمثلة
<الطبقة سبان = "المدى المنزلق مقبض"> </ SPAN>
<الطبقة سبان = "المدى المنزلق -active-شريحة"> </ SPAN>
</ div>
محاولة »
قيمة المنزلق
افتراضيا، شريط التمرير في منتصف (قيمة "50"). يمكنك إضافة data-options="initial: num " " لتعديل القيمة الافتراضية للممتلكات:
أمثلة
<الطبقة سبان = "المدى المنزلق مقبض"> </ SPAN>
<الطبقة سبان = "المدى المنزلق -active-شريحة"> </ SPAN>
</ div>
محاولة »
قيمة التمرير عرض
إذا نحن بحاجة إلى سحب قيمة المنزلق عندما عرض في الوقت الحقيقي، ويمكن الحصول عليها عن طريق <div> إضافة data-options="display_selector:# id " معرف يطابق السمة هوية وقيمة العنصر المنزلق، والأمثلة على ذلك:
أمثلة
في <span id = "mySlider"> </ SPAN>
<فئة الدرجة = "المدى المنزلق " المنزلق البيانات خيارات البيانات = "display_selector: #mySlider؛">
<الطبقة سبان = "المدى المنزلق مقبض"> </ SPAN>
<الطبقة سبان = "المدى المنزلق -active-شريحة"> </ SPAN>
</ div>
محاولة »
مزيج من خيارات البيانات
يستخدم المثال التالي display_selector و initial خيارات البيانات:
أمثلة
<فئة الدرجة = "المدى المنزلق " المنزلق البيانات خيارات البيانات = "display_selector: #mySlider، الأولي: 20؛">
<الطبقة سبان = "المدى المنزلق مقبض"> </ SPAN>
<الطبقة سبان = "المدى المنزلق -active-شريحة"> </ SPAN>
</ div>
محاولة »
الخطوة؟ طويل
افتراضيا، يتم نقل المنزلق للحد من الزيادة في عدد "1." يمكنك إضافة data-options="step: num ;" ،" سمة لتعديل قيمة الخطوة؟ ومن المقرر سبيل المثال إلى 25:
أمثلة
<فئة الدرجة = "المدى المنزلق " المنزلق البيانات خيارات البيانات = "display_selector: #mySlider، خطوة: 25؛">
<الطبقة سبان = "المدى المنزلق مقبض"> </ SPAN>
<الطبقة سبان = "المدى المنزلق -active-شريحة"> </ SPAN>
</ div>
محاولة »
فترة مخصصة
افتراضيا، قيمة في نطاق من "0" إلى "100." يمكنك إضافة خيارات بيانات start و end لضبط القيم الفاصلة. الأمثلة التالية تعيين قيمة الفاصل من "1" إلى "20":
أمثلة
<فئة الدرجة = "المدى المنزلق " المنزلق البيانات خيارات البيانات = "display_selector: #mySlider، بدء: 1؛ النهاية: 20؛">
<الطبقة سبان = "المدى المنزلق مقبض"> </ SPAN>
<الطبقة سبان = "المدى المنزلق -active-شريحة"> </ SPAN>
</ div>
محاولة »
باستخدام الشبكة
استخدام التالية لاستخدام شريط التمرير في الشبكة:
أمثلة
<div الطبقة = "الصغيرة 10 الأعمدة">
<فئة الدرجة = "المدى المنزلق " المنزلق البيانات خيارات البيانات = "display_selector: #mySlider؛">
<الطبقة سبان = "المدى المنزلق مقبض"> </ SPAN>
<الطبقة سبان = "المدى المنزلق -active-شريحة"> </ SPAN>
</ div>
</ div>
<div الطبقة = "الصغيرة 2 الأعمدة">
<! - العنصر عرض (تلميح : استخدام CSS لوضع تماما عليه) ->
في <span id = "mySlider" على غرار = "العرض: كتلة؛ هامش قمة: 14px؛"> </ SPAN>
</ div>
</ div>
محاولة »
استخدام المدخلات
يستخدم المثال التالي <input> استبدال <span> لعرض قيمة المنزلق:
أمثلة
<div الطبقة = "الصغيرة 10 الأعمدة">
<فئة الدرجة = "المدى المنزلق " المنزلق البيانات خيارات البيانات = "display_selector: #mySlider، الأولي: 72؛">
<الطبقة سبان = "المدى المنزلق مقبض"> </ SPAN>
<الطبقة سبان = "المدى المنزلق -active-شريحة"> </ SPAN>
</ div>
</ div>
<div الطبقة = "الصغيرة 2 الأعمدة">
<! - العنصر عرض (تلميح : استخدام CSS لوضع تماما عليه) ->
<نوع الإدخال = "رقم" معرف = "mySlider" على غرار = "هامش قمة: 7px؛" قيمة = "72">
</ div>
</ div>
محاولة »