MUI组价五：开关、底部选项卡、9宫格和分页

来源：互联网发布：python调用谷歌浏览器编辑：程序博客网时间：2024/05/22 16:57

1、switch(开关)

mui提供了开关控件，点击滑动两种手势都可以对开关控件进行操作,UI如下：默认开关控件,带on/off文字提示，打开时为绿色背景，基本class类为.mui-switch、.mui-switch-handle，DOM结构如下：

<div class="mui-switch">  <div class="mui-switch-handle"></div></div>

若希望开关默认为打开状态，只需要在.mui-switch节点上增加.mui-active类即可，如下：

<!-- 开关打开状态，多了一个.mui-active类 --><div class="mui-switch mui-active">  <div class="mui-switch-handle"></div></div>

若希望隐藏on/off文字提示，变成简洁模式，需要在.mui-switch节点上增加.mui-switch-mini类，如下：

<!-- 简洁模式开关关闭状态 --><div class="mui-switch mui-switch-mini">     <div class="mui-switch-handle"></div></div><!-- 简洁模式开关打开状态 --><div class="mui-switch mui-switch-mini mui-active">  <div class="mui-switch-handle"></div></div>mui默认还提供了蓝色开关控件，只需在.mui-switch节点上增加.mui-switch-blue类即可，如下：<!-- 蓝色开关关闭状态 --><div class="mui-switch mui-switch-blue">  <div class="mui-switch-handle"></div></div><!-- 蓝色开关打开状态 --><div class="mui-switch mui-switch-blue mui-active">  <div class="mui-switch-handle"></div></div>

蓝色开关上增加.mui-switch-mini即可变成无文字的简洁模式

（1）、方法

若要获得当前开关状态，可通过判断当前开关控件是否包含.mui-active类来实现，若包含，则为打开状态，否则即为关闭状态；如下为代码示例：

var isActive = document.getElementById("mySwitch").classList.contains("mui-active");if(isActive){  console.log("打开状态");}else{  console.log("关闭状态");  }

若使用js打开、关闭开关控件，可使用switch插件的toggle()方法，如下为示例代码：

mui("#mySwitch").switch().toggle();

（2）、事件

开关控件在打开/关闭两种状态之间进行切换时，会触发toggle事件,通过事件的detail.isActive属性可以判断当前开关状态。可通过监听toggle事件，可以在开关切换时执行特定业务逻辑。如下为使用示例：

document.getElementById("mySwitch").addEventListener("toggle",function(event){  if(event.detail.isActive){    console.log("你启动了开关");  }else{    console.log("你关闭了开关");    }})

代码块激活字符: mswitch

<!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">    <h1 class="mui-title">radio（单选框）</h1></header><div class="mui-content mui-active"><div class="mui-input-row">    <label>Switch</label>    <div class="mui-switch mui-active">        <div class="mui-switch-handle"></div>    </div></div><div class="mui-input-row">    <label>Switch</label>    <div class="mui-switch mui-active mui-switch-blue">        <div class="mui-switch-handle"></div>    </div></div><div class="mui-switch mui-switch-mini mui-active">  <div class="mui-switch-handle"></div></div><br><div class="mui-switch mui-switch-mini mui-active mui-switch-blue">  <div class="mui-switch-handle"></div></div></div></body></html>

2、底部选项卡

触发字符：mtab

<nav class='mui-bar mui-bar-tab'><a class='mui-tab-item mui-active'><span class='mui-icon mui-icon-home'></span><span class='mui-tab-label'>${1:首页}</span></a><a class='mui-tab-item'><span class='mui-icon mui-icon-phone'></span><span class='mui-tab-label'>${2:电话}</span></a><a class='mui-tab-item'><span class='mui-icon mui-icon-email'></span><span class='mui-tab-label'>${3:邮件}</span></a><a class='mui-tab-item'><span class='mui-icon mui-icon-gear'></span><span class='mui-tab-label'>${4:设置}</span></a></nav>$0

示例：

<!DOCTYPE html><html> <head><meta charset="utf-8"><title>Hello MUI</title><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><!--标准mui.css--><link rel="stylesheet" href="../css/mui.min.css"><!--App自定义的css--><link rel="stylesheet" type="text/css" href="../css/app.css"/><style>.title{margin: 20px 15px 10px;color: #6d6d72;font-size: 15px;}.oa-contact-cell.mui-table .mui-table-cell {padding: 11px 0;vertical-align: middle;}.oa-contact-cell {position: relative;margin: -11px 0;}.oa-contact-avatar {width: 75px;}.oa-contact-avatar img {border-radius: 50%;}.oa-contact-content {width: 100%;}.oa-contact-name {margin-right: 20px;}.oa-contact-name, oa-contact-position {float: left;}</style></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">底部选项卡-div模式</h1></header><!--触发符：mtab--><nav class="mui-bar mui-bar-tab"><a class="mui-tab-item mui-active" href="#tabbar"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">首页</span></a><a class="mui-tab-item" href="#tabbar-with-chat"><span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span><span class="mui-tab-label">消息</span></a><a class="mui-tab-item" href="#tabbar-with-contact"><span class="mui-icon mui-icon-contact"></span><span class="mui-tab-label">通讯录</span></a><a class="mui-tab-item" href="#tabbar-with-map"><span class="mui-icon mui-icon-gear"></span><span class="mui-tab-label">设置</span></a></nav><div class="mui-content"><div id="tabbar" class="mui-control-content mui-active"><div class="title">这是div模式选项卡中的第1个子页面.</div><div class="title">何谓div模式的选项卡？其实就是通过DIV模拟一个独立页面，通过DIV的显示、隐藏模拟不同页面的切换，典型的SPA模式；</div><div class="title">这种模式适合简单业务系统，因为每个选项卡内容要写在一个DIV中，若逻辑复杂，会导致当前页面DOM结构繁杂，造成webview响应缓慢，甚至崩溃；因此若系统较复杂，需要下拉刷新等操作，推荐使用webview模式的选项卡；</div></div><div id="tabbar-with-chat" class="mui-control-content"><div class="title">这是div模式选项卡中的第2个子页面，该页面展示一个消息列表</div><ul class="mui-table-view mui-table-view-chevron"><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 1</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 2</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 3</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 4</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 5</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 6</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 7</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 8</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 9</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 10</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 11</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 12</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 13</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 14</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 15</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 16</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 17</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 18</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 19</a></li><li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 20</a></li></ul></div><div id="tabbar-with-contact" class="mui-control-content"><div class="title">这是div模式选项卡中的第3个子页面，该页面展示一个通讯录示例.</div><ul class="mui-table-view mui-table-view-striped mui-table-view-condensed"><li class="mui-table-view-cell"><div class="mui-slider-cell"><div class="oa-contact-cell mui-table"><div class="oa-contact-avatar mui-table-cell"><img src="../images/60x60.gif" /></div><div class="oa-contact-content mui-table-cell"><div class="mui-clearfix"><h4 class="oa-contact-name">叶文洁</h4><span class="oa-contact-position mui-h6">董事长</span></div><p class="oa-contact-email mui-h6">yewenjie@sina.com</p></div></div></div></li><li class="mui-table-view-cell"><div class="mui-slider-cell"><div class="oa-contact-cell mui-table"><div class="oa-contact-avatar mui-table-cell"><img src="../images/60x60.gif" /></div><div class="oa-contact-content mui-table-cell"><div class="mui-clearfix"><h4 class="oa-contact-name">艾AA</h4><span class="oa-contact-position mui-h6">总经理</span></div><p class="oa-contact-email mui-h6">aaa@163.com</p></div></div></div></li><li class="mui-table-view-cell"><div class="mui-slider-cell"><div class="oa-contact-cell mui-table"><div class="oa-contact-avatar mui-table-cell"><img src="../images/60x60.gif" /></div><div class="oa-contact-content mui-table-cell"><div class="mui-clearfix"><h4 class="oa-contact-name">罗辑</h4><span class="oa-contact-position mui-h6">员工</span></div><p class="oa-contact-email mui-h6">luoji@126.com</p></div></div></div></li><li class="mui-table-view-cell"><div class="mui-slider-cell"><div class="oa-contact-cell mui-table"><div class="oa-contact-avatar mui-table-cell"><img src="../images/60x60.gif" /></div><div class="oa-contact-content mui-table-cell"><div class="mui-clearfix"><h4 class="oa-contact-name">云天明</h4><span class="oa-contact-position mui-h6">员工</span></div><p class="oa-contact-email mui-h6">ytm@163.com</p></div></div></div></li><li class="mui-table-view-cell"><div class="mui-slider-cell"><div class="oa-contact-cell mui-table"><div class="oa-contact-avatar mui-table-cell"><img src="../images/60x60.gif" /></div><div class="oa-contact-content mui-table-cell"><div class="mui-clearfix"><h4 class="oa-contact-name">史强</h4><span class="oa-contact-position mui-h6">员工</span></div><p class="oa-contact-email mui-h6">shiqiang@gmail.com</p></div></div></div></li></ul></div><div id="tabbar-with-map" class="mui-control-content"><div class="title">这是div模式选项卡中的第4个子页面，该页面展示一个常见的设置示例.</div><ul class="mui-table-view"><li class="mui-table-view-cell"><a class="mui-navigate-right">新消息通知</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right">隐私</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right">通用</a></li></ul><ul class="mui-table-view" style="margin-top: 25px;"><li class="mui-table-view-cell"><a class="mui-navigate-right">关于mui</a></li></ul><ul class="mui-table-view" style="margin-top: 25px;"><li class="mui-table-view-cell"><a style="text-align: center;color: #FF3B30;">退出登录</a></li></ul></div></div></body><script src="../js/mui.min.js"></script><script>mui.init({swipeBack:true //启用右滑关闭功能});</script></html>

3、grid（9宫格）

mGrid(九宫格)触发字符：mgrid

代码块：

<ul class='mui-table-view mui-grid-view mui-grid-9'><li class='mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3'><a href='#'><span class='mui-icon mui-icon-home'></span><div class='mui-media-body'>${1:Home}</div></a></li><li class='mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3'><a href='#'><span class='mui-icon mui-icon-email'><span class='mui-badge mui-badge-red'>5</span></span><div class='mui-media-body'>${2:Email}</div></a></li><li class='mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3'><a href='#'><span class='mui-icon mui-icon-chatbubble'></span><div class='mui-media-body'>${3:Chat}</div></a></li><li class='mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3'><a href='#'><span class='mui-icon mui-icon-location'></span><div class='mui-media-body'>${4:Location}</div></a></li><li class='mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3'><a href='#'><span class='mui-icon mui-icon-search'></span><div class='mui-media-body'>${5:Search}</div></a></li><li class='mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3'><a href='#'><span class='mui-icon mui-icon-phone'></span><div class='mui-media-body'>${6:Phone}</div></a></li></ul>

示例：

<!DOCTYPE html><html> <head><meta charset="utf-8"><title>Hello MUI</title><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--标准mui.css--><link rel="stylesheet" href="../css/mui.min.css"><!--App自定义的css--><link rel="stylesheet" type="text/css" href="../css/app.css"/></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">9宫格默认样式</h1></header><div class="mui-content"><!--触发字符：mgrid-->        <ul class="mui-table-view mui-grid-view mui-grid-9">            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">                    <span class="mui-icon mui-icon-home"></span>                    <div class="mui-media-body">Home</div></a></li>            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">                    <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>                    <div class="mui-media-body">Email</div></a></li>            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">                    <span class="mui-icon mui-icon-chatbubble"></span>                    <div class="mui-media-body">Chat</div></a></li>            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">                    <span class="mui-icon mui-icon-location"></span>                    <div class="mui-media-body">location</div></a></li>            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">                    <span class="mui-icon mui-icon-search"></span>                    <div class="mui-media-body">Search</div></a></li>            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">                    <span class="mui-icon mui-icon-phone"></span>                    <div class="mui-media-body">Phone</div></a></li>            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">                    <span class="mui-icon mui-icon-gear"></span>                    <div class="mui-media-body">Setting</div></a></li>            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">                    <span class="mui-icon mui-icon-info"></span>                    <div class="mui-media-body">about</div></a></li>           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">                    <span class="mui-icon mui-icon-more"></span>                    <div class="mui-media-body">more</div></a></li>        </ul></div></body><script src="../js/mui.min.js"></script><script>mui.init({swipeBack:true //启用右滑关闭功能});</script></html>

3、分页

触发字符：mpagination

<ul class='mui-pagination'><li class='mui-disabled'><span> « </span></li><li class='mui-active'><a href='#'>${1:1}</a></li><li><a href='#'>${2:2}</a></li><li><a href='#'>»</a></li></ul>$0示例：<!DOCTYPE html><html> <head><meta charset="utf-8"><title>Hello MUI</title><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--标准mui.css--><link rel="stylesheet" href="../css/mui.min.css"><!--App自定义的css--><link rel="stylesheet" type="text/css" href="../css/app.css"/></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">pagination（分页）</h1></header><div class="mui-content"><h5 class="mui-content-padded">分页(默认尺寸)</h5><div class="mui-content-padded"><ul class="mui-pagination"><li class="mui-previous mui-disabled"><a href="#">«</a></li><li class="mui-active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li class="mui-next"><a href="#">»</a></li></ul></div><h5 class="mui-content-padded">分页(大尺寸)</h5><div class="mui-content-padded"><ul class="mui-pagination mui-pagination-lg"><li class="mui-previous"><a href="#">«</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li class="mui-active"><a href="#">5</a></li><li class="mui-next mui-disabled"><a href="#">»</a></li></ul></div><h5 class="mui-content-padded">分页(小尺寸)</h5><div class="mui-content-padded"><ul class="mui-pagination mui-pagination-sm"><li class="mui-previous"><a href="#">«</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li class="mui-active"><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li class="mui-next"><a href="#">»</a></li></ul></div><h5 class="mui-content-padded">翻页(默认)</h5><div class="mui-content-padded"><ul class="mui-pager"><li><a href="#">上一页</a></li><li><a href="#">下一页</a></li></ul></div><h5 class="mui-content-padded">翻页(对齐)</h5><div class="mui-content-padded"><ul class="mui-pager"><li class="mui-previous"><a href="#">上一页</a></li><li class="mui-next"><a href="#">下一页</a></li></ul></div><h5 class="mui-content-padded">翻页(禁用)</h5><div class="mui-content-padded"><ul class="mui-pager"><li class="mui-disabled"><span> 上一页 </span></li><li><a href="#">下一页</a></li></ul></div></div><script src="../js/mui.min.js"></script><script>mui.init({swipeBack:true //启用右滑关闭功能});(function($) {$('.mui-pagination').on('tap', 'a', function() {var li = this.parentNode;var classList = li.classList;if (!classList.contains('mui-active') && !classList.contains('mui-disabled')) {var active = li.parentNode.querySelector('.mui-active');if (classList.contains('mui-previous')) {//previousif (active) {var previous = active.previousElementSibling;console.log('previous', previous);if (previous && !previous.classList.contains('mui-previous')) {$.trigger(previous.querySelector('a'), 'tap');} else {classList.add('mui-disabled');}}} else if (classList.contains('mui-next')) {//nextif (active) {var next = active.nextElementSibling;if (next && !next.classList.contains('mui-next')) {$.trigger(next.querySelector('a'), 'tap');} else {classList.add('mui-disabled');}}} else {//pageactive.classList.remove('mui-active');classList.add('mui-active');var page = parseInt(this.innerText);var previousPageElement = li.parentNode.querySelector('.mui-previous');var nextPageElement = li.parentNode.querySelector('.mui-next');previousPageElement.classList.remove('mui-disabled');nextPageElement.classList.remove('mui-disabled');if (page <= 1) {previousPageElement.classList.add('mui-disabled');} else if (page >= 5) {nextPageElement.classList.add('mui-disabled');}}}});})(mui);</script></body></html>

0 0