MUI学习04-开关按钮

HTML代码如下：

复制代码<div class="mui-switch"> <div class="mui-switch-handle"></div> </div>

1
2
3
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>

引入JS：<script src="../js/mui.min.js"></script>

引入CSS：<link rel="stylesheet" href="../css/mui.min.css">

主要CSS修改说明：

复制代码.mui-switch{width:4.6em;height: 1.6em;} .mui-switch .mui-switch-handle{width:1.3em;height: 1.3em;line-height: 1.6em; } .mui-switch:before{ font-size: 9pt; position: absolute; top: -0.2em; right: 0.7em; content: 'Off'; text-transform: uppercase; color: #999; }

1
2
3
4
5
6
7
8
9
10
11
.mui-switch{width:4.6em;height: 1.6em;}
.mui-switch .mui-switch-handle{width:1.3em;height: 1.3em;line-height: 1.6em; }
.mui-switch:before{
font-size: 9pt;
position: absolute;
top: -0.2em;
right: 0.7em;
content: 'Off';
text-transform: uppercase;
color: #999;
}

效果：