<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>

    <script src="js/mui.min.js"></script>

    <link href="css/mui.min.css" rel="stylesheet"/>

    <script type="text/javascript" charset="utf-8">

          mui.init();

    </script>

</head>

<body>

<header class="mui-bar mui-bar-nav">

    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

    <h1 class="mui-title">hello</h1>

</header>

<div class="mui-content">

    <!--有准确值得进度条-->

    <div style="padding: 20px;">

        <div id="demo1" class="mui-progressbar">

            <span></span>

        </div>

    </div>

    <div style="padding: 0px 20px;">

        <button type="button" onClick="setPro()">展示进度条</button>

    </div>

    <!--获取滑块值-->

    <div class="mui-input-row mui-input-range">

        <label>Range</label>

        <input type="range" min="0" max="100" id="rangel">

    </div>

    <div style="padding: 20px;">

        <input type="button" class="mui-btn" value="获取滑块值" onClick="getVal()">

    </div>

    <!--滑块开关 绿色的-->

    <div class="mui-switch">

        <div class="mui-switch-handle"></div>

    </div>

    <br>

    <div class="mui-switch mui-active">

        <div class="mui-switch-handle"></div>

    </div>

    <br>

    <!--蓝色的滑块-->

    <div class="mui-switch mui-active mui-switch-blue">

        <div class="mui-switch-handle"></div>

    </div>

    <br>

    <!--也可以在这个div标签里加上点击事件   onClick="get_active()"-->

    <div class="mui-switch mui-switch-blue" id="mySwitch">

        <div class="mui-switch-handle"></div>

    </div>

    <div style="padding: 0px 20px;">

        <button type="button" onClick="get_active()">获取滑块状态</button>

    </div>

</div>

</body>

<script type="text/javascript">

    /*有准确值得进度掉 */

    function setPro(){

        var obj = mui('#demo1');

        var bl = 0;

        setInterval(function(){

            obj.progressbar({progress:bl}).show();

            bl += 10;

        },1000)

    }

    /*获取滑块值*/

    function getVal(){

        var rangeobj = mui('#rangel');

        mui.toast(rangeobj[0].value);

    }

    /*获取滑块值*/

    function get_active(){

        var obj = document.getElementById('mySwitch');

        if(obj.classList.contains('mui-active')){

            mui.toast('on');

        }else{

            mui.toast('off');

        }

    }

    /*监听滑块的变化*/

/*    mui.plusReady(function(){}) //加上此方法必须在真机上运行才有效果*/

    document.getElementById('mySwitch').addEventListener('toggle',function(e){

            if(e.detail.isActive){

                mui.toast('on');

            }else{

                mui.toast('off');

            }

        })

</script>

</html>

mui 滑块开关 进度条 以及如何获取值的更多相关文章

  1. MFC_2.3 定时器、滑块、进度条控件

    定时器.滑块.进度条控件 1.拖控件 2.绑定变量.默认,然后取名字 3.初始化设置定时器 // 设置滑块和进度条的范围 m_TrackBar.SetRange(0, 1000); m_StaticP ...

  2. MFC3 基本对话框的使用（三） 滑块与进度条（sdnu）（C++大作业）

    一.完成界面 运行前: 运行后: 二.工具 (1)滑块 (2)进度条 (3)文本框 (4)文本示例 (5)按钮 三.添加变量 四.添加事件 右键单击主对话框空白部分,打开类向导,选择"消息& ...

  3. VC下载文件 + 显示进度条

    在codeproject里找了许久,发现这样一个VC下载文件并显示进度条的源码,于是添加了些中文注释: 1.下载线程函数: UINT DownloadFile(LPVOID pParam) { CWn ...

  4. Android开发 ---基本UI组件4：拖动事件、评分进度条、圆圈式进度条、进度条控制

    Android开发 ---基本UI组件4 1.activity_main.xml 描述: 定义了一个按钮 <?xml version="1.0" encoding=" ...

  5. Qt实现炫酷启动图-动态进度条

    目录 一.简述 二.动效进度条 1.光效进度条 2.延迟到达进度条 3.接口说明 三.启动图 1.实现思路 2.背景图切换 四.测试 1.构造启动图 2.背景图 3.其他信息 4.事件循环 五.源码 ...

  6. 简单实用的进度条加载组件loader.js

    本文提供一个简单的方法实现一个流程的进度条加载效果,以便在页面中可以通过它来更好地反馈耗时任务的完成进度.要实现这个功能,首先要考虑怎样实现一个静态的进度条效果,类似下面这样的: 这个倒是比较简单,两 ...

  7. JQuery UI进度条——Progressbar

    1.先引入jquery和jquery-ui的js,例子如下: <link href="JqueryUI/jquery-ui.css" rel="stylesheet ...

  8. css3实现不同进度条

    进度条类型1(渐变进度条) 效果1:图片实现进度条 思路,进度条是一张图片,用定位来控制不同时间图片相对进度条box的left值来控制位置,用animate实现动画效果 html <div cl ...

  9. 【PyQt5-Qt Designer】制作炫酷的启动界面+进度条

    QProgressBar 进度条+QSplashScreen 启动界面 知识点: 1.进度条 #将进度条的最大值.最小值设置为相同时,产生跑马灯效果 self.progressBar.setMinim ...

随机推荐

  1. Hadoop Ls命令添加显示条数限制參数

    前言 在hadoop的FsShell命令中,预计非常多人比較经常使用的就是hadoop fs -ls,-lsr,-cat等等这种与Linux系统中差点儿一致的文件系统相关的命令.可是细致想想,这里还是 ...

  2. 在Ubuntu18.04下配置hadoop集群

    服务器准备 启动hadoop最小集群的典型配置是3台服务器, 一台作为Master, NameNode, 两台作为Slave, DataNode. 操作系统使用的Ubuntu18.04 Server, ...

  3. C# string 是不可变的，指什么不可变

    String 表示文本,即一系列 Unicode 字符.字符串是 Unicode 字符的有序集合,用于表示文本.String 对象是 System.Char 对象的有序集合,用于表示字符串.Strin ...

  4. 关于Jenkins日志爆满的解决方法

    最近发现公司的jenkins因为日志量太大把磁盘占满,查看日志文件“/var/log/jenkins/jenkins.log”几分钟产生了几十G的日志 而且日志还在一直增长,内容如下 120: 313 ...

  5. centos7设置服务为开机自启动（以crond.serivce为例）

    本文转自:https://blog.51cto.com/mrxiong2017/2084790 一.设置crond.serivice服务为开机自启动 步骤1:查看crond.serivce服务的自启动 ...

  6. hive Spark SQL分析窗口函数

    Spark1.4发布,支持了窗口分析函数(window functions).在离线平台中,90%以上的离线分析任务都是使用Hive实现,其中必然会使用很多窗口分析函数,如果SparkSQL支持窗口分 ...

  7. 认知：关于Android 调试的坑

    要注意充电线和数据线的区别! 要注意充电线和数据线的区别! 要注意充电线和数据线的区别! 可以通过访问 :chrome://inspect/#devices  查看设备是否正常. 通常电脑也会有提示, ...

  8. 深入了解View(一）—— measure測量流程分析

    欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit改动而来,用它写博客.将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接 ...

  9. Protobuf3 序列化

    在message_lite.h中定义了SerializeToString ,SerializeToArray ,SerializeToCodedStream ,SerializeToZeroCopyS ...

  10. <%: Html.DisplayNameFor与 <%: Html.DisplayFor的区别

    DisplayNameForModel只有在model定义了DisplayName时有用,简单说,DisplayNameFor是针对model里的"字段"别名,DisplayNam ...