欢迎光临
梦想从学习开始!

jQuery Mobile 表单滑动条 | 小熊教程

jQuery Mobile 表单滑动条

Tips:您正在学习的是jQuery Mobile 表单滑动条 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=9852 ,您可通过标签查询系列课程。祝您学习愉快!


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 按钮:

我们可以使用 <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>

快来实际操作一把吧。

默认情况下,开关切换的文本为 “On” 和 “Off”。你可以使用 data-on-text 和 data-off-text 属性来修改它:

实例

Tips:您正在学习的是jQuery Mobile 表单滑动条 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=9852 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快! <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>

快来实际操作一把吧。


实例

更多实例

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

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

赞(0) 打赏
未经允许不得转载:小熊分享邦 » jQuery Mobile 表单滑动条 | 小熊教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏