首页 > 其他 > 详细

mui的switch开关的应用

时间:2019-02-22 13:44:55      阅读:351      评论:0      收藏:0      [点我收藏+]
HTML:   
<!--mui的switch开关-->
            <div class="mui-content-padded">
                <h5>switch开关mui-active开启状态</h5>
                <div class="mui-switch mui-active">
                    <div class="mui-switch-handle"></div>
                </div>
            </div>
            
             <div class="mui-content-padded">
                <h5>mui-switch-blue:设置颜色</h5>
                <div class="mui-switch mui-switch-blue">
                    <div class="mui-switch-handle"></div>
                </div>
            </div>
            
            <div class="mui-content-padded">
                <h5>mui-switch-mini:无文字提示开关</h5>
                <div class="mui-switch mui-switch-blue mui-switch-mini">
                    <div class="mui-switch-handle"></div>
                </div>
            </div>
            
             <div class="mui-content-padded">
                <h5>男女性别开关</h5>
                <div class="mui-switch mui-switch-blue" id="gender">
                    <div class="mui-switch-handle"></div>
                    
                </div>
                
                <div class="mui-content-padded">
                    <p class="mui-text-center" id="msg">这里是文字提示</p>
                </div>
            </div>
            <!--点击按钮获取信息-->
            <div class="mui-content-padded">
                <button id="btn-get-gender" class="mui-btn mui-btn-blue">获取性别</button>
            </div>

JS:
监听事件函数:
document.getElementById(‘btn-get-gender‘).addEventListener(‘tap‘,function(){
            //classList.contains(‘mui-active‘):判断类名是否包含active,如果包含表示处于打开状态(ture)
                var gender=document.getElementById(‘gender‘).classList.contains(‘mui-active‘)
                console.log(gender)//ture/false
                
                if(gender==true){
                    document.getElementById("msg").innerHTML=‘女‘
                }else{
                    document.getElementById("msg").innerHTML=‘男‘
                }
            })
 
技术分享图片
 
技术分享图片
 
技术分享图片
 
技术分享图片
 

mui的switch开关的应用

原文:https://www.cnblogs.com/Dark-fire-liehuo/p/10417859.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!