jQuery Mobile 教程
1. jQuery Mobile 教程 2. jQuery Mobile 简介 3. jQuery Mobile 安装 4. jQuery Mobile 页面 5. jQuery Mobile 过渡 6. jQuery Mobile 按钮 7. jQuery Mobile 按钮图标 8. jQuery Mobile 工具栏 9. jQuery Mobile 导航栏 10. jQuery Mobile 可折叠块 11. jQuery Mobile 网格 12. jQuery Mobile 列表视图 13. jQuery Mobile 列表内容 14. jQuery Mobile 表单 15. jQuery Mobile 表单输入 16. jQuery Mobile 表单选择 17. jQuery Mobile 表单滑动条 18. jQuery Mobile 主题 19. jQuery Mobile 事件 20. jQuery Mobile 触摸事件 21. jQuery Mobile 滚屏事件 22. jQuery Mobile 方向改变事件 23. jQuery Mobile 实例 24. jQuery Mobile Data 属性 25. jQuery Mobile 图标 26. jQuery Mobile页面事件 27. jQuery Mobile CSS 类

jQuery Mobile 表单滑动条

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>

55面试教程网 »

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

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

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

实例

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

55面试教程网 »

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

实例

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

55面试教程网 »

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

实例

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

55面试教程网 »

拨动开关

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


我们可以使用 <input type="checkbox"> 元素并指定 data-role 为 "flipswitch" 来创建开关:

实例

<form method="post" action="demoform.php">
  <label for="switch">切换开关:</label>
    <input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form>

55面试教程网 »

默认情况下,开关切换的文本为 "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">

55面试教程网 »

提示:开关复选框可以使用 "checked" 属性来设置默认的选项:

实例

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" checked>

55面试教程网 »

更多实例

区间滑块
制作一个区间值的滑块。

滑块样式
为滑块开关设置样式。