<!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. CSS实现16:9等比例盒子

    问题:图片的宽度100%,高度要始终自适应为16:9. 解决方案: 1.通过js程序算出绝对高度再进行设置.这是解决问题最容易想到的方法. 2.但是,我们的原则是能用css实现的功能尽量用css,这有 ...

  2. Android 安全开发之 ZIP 文件目录遍历

    1.ZIP文件目录遍历简介 因为ZIP压缩包文件中允许存在"../"的字符串,攻击者可以利用多个"../"在解压时改变ZIP包中某个文件的存放位置,覆盖掉应用原 ...

  3. VirtualBox虚拟机磁盘瘦身

    操作系统 : windows7_x64 VirtualBox 版本 : 4.3.28 原理: 使用0填充虚拟系统磁盘,然后删除填充文件,再使用VBoxManage进行压缩. Linux系统磁盘瘦身 一 ...

  4. CAS 单点登录【1】入门

    1. CAS 的引入的前提和好处 很早期的公司,一家公司可能只有一个应用,慢慢的应用开始变多,如员工报销系统.审核系统.学习系统...... 每个应用都要进行注册登录,退出的时候又要一个个退出,用户操 ...

  5. IoC之AutoFac（二）——解析服务

    阅读目录 一 Resolve方法 二 TryResolve和ResolveOptional方法 三 解析服务时传参 3.1 可用参数类型 3.2 带反射组件的参数 3.3 具有Lambda表达式组件的 ...

  6. VS code配置go语言开发环境之自定义快捷键及其对应操作

    VS code 配置 自定义快捷键 及其对应操作   由于 vs code 的官方 go 插件不支持像 goland 一样运行当前 go 文件, 只能项目 或者 package 级别地运行, 因此有必 ...

  7. Atitit 如何在水泥森林打猎 找到合适的公司

    Atitit 如何在水泥森林打猎  找到合适的公司 1. 我们工作的本质就是打猎,万年前在草原森林里面打猎,现在在水泥森林里面打猎 2 1.1. 我们的本质职位只有一个,那就是猎人 2 1.2. 所有 ...

  8. 5个最好用AngularJS构建应用程序框架

    如果你打算建立自己的Web应用与AngularJS,那么现在是时候开始了.如果这个想法吓到你了,删除所有的恐慌,从你的头脑中有一些框架,AngularJS提供方便的支持.有一些预先的框架,使用框架可以 ...

  9. LaTeX数学模式&上下标&代码块

    效果就是如上图所示了.学习了使用数学模式插入公式和使用上标和公式的编号.这里的目录没有展开,在编译一次目录会展开,代码块会被挤到下一页上面去. \documentclass[UTF8]{ctexart ...

  10. MFC工程 重命名方法

    C++ MFC工程 修改前的知识准备: 1.解决方案相关文件 AAA.sln文件和AAA.suo文件为MFC自动生成的解决方案文件,它包含当前解决方案中的工程信息,存储解决方案的设置. 2.工程相关文 ...