<!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. [转] 分组排序取前N条记录以及生成自动数字序列，类似group by后 limit

    前言:        同事的业务场景是,按照cid.author分组,再按照id倒叙,取出前2条记录出来.        oracle里面可以通过row_number() OVER (PARTITIO ...

  2. Effective Java 第三版——64. 通过对象的接口引用对象

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

  3. Data Model for Message Receiver

    1. Physical Data Model 2. SQL Statements drop database MessageReceiver go /*======================== ...

  4. Android Studio系列-签名打包

    本篇博客纪录使用Android Studio对项目进行签名打包,跟Eclipse大同小异,读者朋友注意其中到差别. 第一步 创建签名文件 第二步 填写签名参数 第三步 选择构建类型 第四步 查看生成第 ...

  5. react学习笔记2之正确使用状态

    //状态不要直接修改,比如: // 错的,这样写不会重新渲染组件 this.state.comment = 'Hello'; //修改状态正确的方式 this.setState({comment:'H ...

  6. 12款 JavaScript 表格控件（DataGrid）

    JavaScript 表格控件可以操作大数据集的 HTML表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以很 ...

  7. 【神经网络】Dependency Parsing的两种解决方案

    一.Transition-based的依存解析方法 解析过程:首先设计一系列action, 其就是有方向带类型的边,接着从左向右依次解析句子中的每一个词,解析词的同时通过选择某一个action开始增量 ...

  8. 优化实现Mobile Diffuse动态直接光照shader

    项目中美术使用了Unity自带的Mobile/Diffuse这个shader制作了一部分场景素材,这个shader会依赖场景中的动态实时光源,比较耗费. 于是自己手动重写一份,简化shader的消耗, ...

  9. vscode圣诞帽

    今天打开vscode,偶然发现左下角的圣诞帽子 vscode版本:

  10. getCanonicalFile与getAbsoluteFile区别

    package test; import java.io.File; import java.io.IOException; public class TestFilePath { public st ...