<!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. cd4与cd8比值的意义

    正常情况下CD4/CD8比值介于1.5—2.5之间,如CD4是每微升血750个,CD8是每微升血460个,这样两者的比值就是1.63. 虽然95%的正常人CD4/CD8的比值都在1以上,但是也有一些正 ...

  2. Js实现Table动态添加一行的小例子

    <form id="form1" runat="server"> <div> <table id=" style=&qu ...

  3. 每天一个linux命令(9):touch

    1.命令简介 touch命令将每个文件的访问时间和修改时间改为当前时间. 2.用法 touch [选项]... 文件... 3.选项 -a 只更改访问时间 -c, --no-create 不创建任何文 ...

  4. 转载：MVC升级以后出现"当前上下文中不存在ViewBag"的问题解决

    MVC升级以后出现"当前上下文中不存在ViewBag"的问题解决 把自己的项目从MVC4升级到了MVC5,结果问题一大堆,View的设计环境出现了"当前上下文中不存在Vi ...

  5. 30天自制操作系统 - 来一个hello world

    helloos.nas 源码: ; hello-os ; TAB= ; 以下这段是标准的FAT12格式软盘专用代码 DB 0xeb, 0x4e, 0x90 DB "HELLOIPL" ...

  6. C#语法——泛型的多种应用 C#语法——await与async的正确打开方式 C#线程安全使用（五） C#语法——元组类型 好好耕耘 redis和memcached的区别

    C#语法——泛型的多种应用   本篇文章主要介绍泛型的应用. 泛型是.NET Framework 2.0 版类库就已经提供的语法,主要用于提高代码的可重用性.类型安全性和效率. 泛型的定义 下面定义了 ...

  7. VS2017打开VS2010项目报 “找不到*.xaml”错误

    VS2017打开VS2010项目报 “找不到*.xaml”错误.详细如下: 未处理System.IO.IOExceptionMessage: “System.IO.IOException”类型的未经处 ...

  8. Effective Java 第三版——88. 防御性地编写READOBJECT方法

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  9. Linux将yum源设置为阿里云的镜像源

    第一步:备份原有镜像源 mv /etc/yum.repo.d/Centos-Base.repo /etc/yum.repo.d/Centos-Base.repo.bak 第二步:下载阿里云的镜像源 w ...

  10. 安全工具-Arachni

    Arachni是一个多功能.模块化.高性能的Ruby框架,旨在帮助渗透测试人员和管理员评估web应用程序的安全性.同时Arachni开源免费,可安装在windows.linux以及mac系统上,并且可 ...