jQuery Mobile 表单滑动条

🌙
手机阅读
本文目录结构

jQuery Mobile 表单滑动条


滑动条允许您从一个范围的数字中选择一个值:

如需创建滑动条,请使用 <input type="range">:

<form method="post" action="demoform.php">
  <label for="points">进度:</label>
  <input type="range" name="points" id="points" value="50" min="0" max="100">
</form>

使用以下属性来规定限制:

  • max - 规定允许的最大值
  • min - 规定允许的最小值
  • step - 规定合法的数字间隔
  • value - 规定默认值

提示: 如果你想在按钮中显示进度的值可以添加 data-show-value=“true” 属性:

<input type="range" data-show-value="true">

提示: 如果你想在滑动按钮上显示进度(类似一个小弹窗)可以使用 data-popup-enabled=“true” 属性:

<input type="range" data-popup-enabled="true">

**提示:**如果您想要高亮突出显示滑动条的值,请添加 data-highlight=“true”:

<input type="range" data-highlight="true">

拨动开关

拨动开关通常用于 on/off 或 true/false 按钮:

我们可以使用 元素并指定 data-role 为 “flipswitch” 来创建开关:

<form method="post" action="demoform.php">
  <label for="switch">切换开关:</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>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了