الضوابط مسج المحمول المنزلق
والمنزلق يسمح لك لتحديد قيمة من مجموعة من الأرقام:
لإنشاء شريط التمرير، استخدم <input type="range"> :
مثال
<form method="post" action="demoform.asp">
<label for="points">Points:</label>
< input type="range" name="points" id="points" value="50" min="0"
max="100">
</form>
انها محاولة لنفسك » استخدام السمات التالية لتحديد القيود:
- max - تحدد القيمة القصوى المسموح بها
- min - تحدد قيمة الحد الأدنى المسموح به
- step - تحديد فترات عدد القانونية
- value تحدد القيمة الافتراضية -
نصيحة: إذا كنت تريد أن تظهر القيمة على زر التمرير، إضافة data-show-value="true" :
نصيحة: إذا كنت تريد أن قيمة ليطفو على السطح على الشاشة مثل تلميح (كما كنت الانزلاق)، إضافة data-popup-enabled="true" :
نصيحة: إذا كنت ترغب في تسليط الضوء على المسار تصل إلى قيمة شريط التمرير، إضافة data-highlight="true" :
الوجه التبديل تبديل
وغالبا ما يستخدم مفتاح الوجه لتشغيل / إيقاف أو أزرار صواب / خطأ:
لإنشاء مفتاح الوجه، استخدم <input type="checkbox"> وتحديد data-role من "flipswitch" :
مثال
<form method="post" action="demoform.asp">
<label for="switch">Flip toggle switch checkbox:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form> انها محاولة لنفسك » افتراضيا، نص على التبديل الوجه هو "On" و "Off" . استخدام data-on-text و data-off-text سمات لتغيير هذا:
مثال
<input type="checkbox" data-role="flipswitch" name="switch" id="switch"
data-on-text="True" data-off-text="False" >
انها محاولة لنفسك » نصيحة: استخدم "checked" تنسب الى مجموعة واحدة من الخيارات ليتم الاختيار المسبق:
مثال
<input type="checkbox" data-role="flipswitch" name="switch" id="switch"
checked >
انها محاولة لنفسك » المزيد من الأمثلة
المنزلق مجموعة
كيفية جعل شريط التمرير مع اثنين من مقابض، مما يسمح للمستخدمين لتحديد الحد الأدنى والحد الأقصى للقيمة في نطاق.
أسلوب تبديل الوجه
كيفية جعل التحول الوجه على نطاق أوسع.