>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 26177 个阅读者 刷新本主题
 * 贴子主题:  jQuery Mobile 表单滑动条 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-11 18:46:25     消息  查看  搜索  好友  邮件  复制  引用

  

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

    我们可以使用 <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 属性来修改它:                    

范例

<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>

程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-28 19:08:38 重新编辑]
  Java面向对象编程-->第一个Java程序
  JavaWeb开发-->自定义JSP标签(Ⅱ)
  JSP与Hibernate开发-->Java应用分层架构及软件模型
  Java网络编程-->基于UDP的数据报和套接字
  精通Spring-->Vue指令
  Vue3开发-->CSS过渡和动画
  VSCode 开发Vue必备插件
  vue的CSS过渡和动画范例
  HTML5中的 Web Worker的使用
  Vue CLI内网安装(禁止运行vue指令解决方案)
  jQuery与AJAX的整合简介
  jQuery 遍历DOM 树中的同胞元素
  HTML DOM Script 对象
  JavaScript的HTML DOM Column 对象
  Javascript DOM封装方法汇总
  CSS 听觉参考手册
  CSS3 文本效果
  CSS 表单的用法
  CSS 盒子模型
  DTD - XML 构建模块
  用JavaScript制作弹出页面
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。