<!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. Exchange Online Mailbox Restoration

    User Account is already deleted in AD.User Mailbox is already deleted in Exchange. 1. Connect to Exc ...

  2. PDF.js 分片下载的介绍2:分片下载demo

    上一个章节,简要说了以下分片下载的几个特性.今天主要用示例说明一下pdf.js分片下载. 服务器环境: php7.2 nginx 1.14 ubuntu 18.04测试浏览器:谷歌浏览器 70.0.3 ...

  3. Centos PHP+Apache执行exec()等Linux脚本权限设置的详细步骤

    1. 查看一下你的Apache的执行用户是谁: lsof -i:80         运行之后的结果为: 从图中我们可以清楚的看到,httpd(也就是Apache)的执行用户为:exec_shell( ...

  4. NOIP2012 普及组 寻宝

    题目描述 Description 传说很遥远的藏宝楼顶层藏着诱人的宝藏.小明历尽千辛万苦终于找到传说中的这个藏宝楼,藏宝楼的门口竖着一个木板,上面写有几个大字:寻宝说明书.说明书的内容如下: 藏宝楼共 ...

  5. assert BOOST_ASSERT的坑

    下面这行代码 BOOST_ASSERT(SUCCEEDED(m_pd3dDevice->CreateBuffer(&frame_ptr->m_const_buffers[i].m_ ...

  6. OpenCV自带dnn的Example研究（3）— object_detection

    这个博客系列,简单来说,今天我们就是要研究 https://docs.opencv.org/master/examples.html下的 6个文件,看看在最新的OpenCV中,它们是如何发挥作用的. ...

  7. Python装饰器用法

    在Python中,装饰器一般用来修饰函数,实现公共功能,达到代码复用的目的.在函数定义前加上@xxxx,然后函数就注入了某些行为,很神奇!然而,这只是语法糖而已. 场景 假设,有一些工作函数,用来对数 ...

  8. 【转载】Linux 命令行快捷键 - 移动光标

    Linux 命令行快捷键 - 移动光标 涉及在linux命令行下进行快速移动光标.命令编辑.编辑后执行历史命令.Bang(!)命令.控制命令等.让basher更有效率. 常用 ctrl+左右键:在单词 ...

  9. ios 适配iOS11&iPhoneX的一些坑

    前阵子项目开发忙成狗,就一直没做iOS11的适配,直到XcodeGM版发布后,我胸有成竹的在iPhoneX上跑起项目,整个人都凉透了...下面总结一下我遇到的坑,不是很全面,日后补充. 导航栏 导航栏 ...

  10. Js 跳出两级循环的方法

    做过一个复杂的验证方法,需要两层each验证之后反正报错的信息.因为双重循环的问题,纠结了很久. /** * 验证input 的值 是否输入 flg:验证成功 false:验证失败 */ functi ...