HTML应用开发基础篇 - MUI 框架（三）MUI 布局

46 阅读 0 评论 31 点赞

我是靠谱客的博主沉默小蝴蝶，最近开发中收集的这篇文章主要介绍HTML应用开发基础篇 - MUI 框架（三）MUI 布局，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、MUI 栅格系统

2、MUI 标题栏

3、MUI 选项卡

4、卡片视图

5、轮播组件

6、列表

1、MUI 栅格系统

1）、12 列响应栅格系统：父级容器上添加 .mui-row ，列上添加 .mui-col-[ sm | xs ] - [ 1-12 ]

简单说明一下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<script src="js/mui.min.js"></script>
<script type="text/javascript" src="js/mui.picker.min.js" ></script>
<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css"/>
</head>
<body>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">栅格系统</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<div class="mui-row">
<div class="mui-col-sm-3 mui-col-xs-4"><img src="imgs/cbd.jpg" width="100%"/></div>
<div class="mui-col-sm-3 mui-col-xs-4"><img src="imgs/muwu.jpg" width="100%"/></div>
<div class="mui-col-sm-3 mui-col-xs-4"><img src="imgs/shuijiao.jpg" width="100%"/></div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>

运行结果是：

实现一个小例子，效果图为：

代码如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.mytb{
background: white;
}
.mytbHeader{
border-bottom: 1px solid gray;
}
a .myIcon{
font-size: 40px;
}
.myrow:nth-of-type(2n+1){
background: lightblue;
}
.myrow:nth-of-type(2n){
background: yellow;
}
.mui-row .mui-col-xs-3:nth-of-type(1) a{
color: green;
}
.mui-row .mui-col-xs-3:nth-of-type(2) a{
color: blue;
}
.mui-row .mui-col-xs-3:nth-of-type(3) a{
color: orange;
}
.mui-row .mui-col-xs-3:nth-of-type(4) a{
color: black;
}
</style>
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<div class="mui-title">标题</div>
</header>
<div class="mui-content">
<div
class="mui-content-padded mytb">
<div class="mui-row mui-h4 mytbHeader" >
<div class="mui-col-xs-2 mui-text-center">编号</div>
<div class="mui-col-xs-4 mui-text-center">姓名</div>
<div class="mui-col-xs-6 mui-text-center">选课信息</div>
</div>
<div class="mui-row mui-h5 myrow">
<div class="mui-col-xs-2 mui-text-center">001</div>
<div class="mui-col-xs-4 mui-text-center">张三</div>
<div class="mui-col-xs-6 mui-text-center mui-ellipsis-2" style="-webkit-line-clamp:3" >H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发H5移动应用开发</div>
</div>
<div class="mui-row mui-h5 myrow">
<div class="mui-col-xs-2 mui-text-center">002</div>
<div class="mui-col-xs-4 mui-text-center">李四</div>
<div class="mui-col-xs-6 mui-text-center ">H5移动应用开发</div>
</div>
<div class="mui-row mui-h5 myrow">
<div class="mui-col-xs-2 mui-text-center">003</div>
<div class="mui-col-xs-4 mui-text-center">王五</div>
<div class="mui-col-xs-6 mui-text-center">H5移动应用开发</div>
</div>
</div>
<div class="mui-content-padded mytb">
<div class="mui-row">
<div class="mui-col-xs-3 mui-text-center">
<a href="#" ><span class="mui-icon mui-icon-weixin myIcon" ></span>
<h5>微信</h5></a>
</div>
<div class="mui-col-xs-3 mui-text-center">
<a href="#" ><span class="mui-icon mui-icon-qq myIcon" ></span>
<h5>QQ</h5></a>
</div>
<div class="mui-col-xs-3 mui-text-center">
<a href="#"><span class="mui-icon mui-icon-weibo myIcon" ></span>
<h5>微博</h5></a>
</div>
<div class="mui-col-xs-3 mui-text-center">
<a href="#" ><span class="mui-icon mui-icon-settings myIcon"></span>
<h5>设置</h5></a>
</div>
</div>
</div>
</body>
</html>

2）、九宫格：如

关键代码为：

<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>
</ul>

2、MUI 标题栏

1）、普通标题栏：

父层容器： Header 容器添加 class = " mui-bar mui-var-nav " ，标题名称：class = " mui-title "。

2）、左侧导航图标

添加子容器 ( a | span ) ：class = " mui-action-back mui-icon mui-icon-left-nav mui-pull-left " 。

3）、右侧按钮图标

添加子容器（ a | span ）：加载图标或设置显示文字；添加右靠边： mui-pull-right

4）、透明标题栏（沉浸式设置）

Header容器中 " mui-bar-nav " 修改为 " mui-bar-transparent " 。

具体见个示例：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.mytitle{
font-size: 25px;
}
/*沉浸式设置方法*/
.mui-bar-transparent{
padding-top: 20px;
height:60px;
}
</style>
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<!--<header class="mui-bar mui-bar-nav">-->
<header class="mui-bar mui-bar-transparent">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-h3">首页</a>
<span class="mui-icon mui-icon-personadd-filled mui-pull-right" id="s1"></span>
<span class="mui-icon mui-icon-trash mui-pull-right"></span>
<h1 class="mui-title mytitle">标题</h1>
</header>
<div class="mui-content">
<div>
<img src="imgs/shuijiao.jpg" width="100%"/>
一只小猫<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
<script type="text/javascript">
document.getElementById("s1").addEventListener("tap",function(){
alert("OK");
});
//
沉浸式设置方法
mui.plusReady(function(){
plus.navigator.setStatusBarStyle("dark");
});
</script>
</body>
</html>

效果图如下（向下滑动见沉浸式效果）：

3、MUI 选项卡

父层容器： mui-bar mui-bar-tab ；子容器：mui-tab-item （mui-active：表示当前按钮被选中）。

内容 div 模式处理方法：子容器： a 标签，设置 href = " #d1 " ，div 显示内容 id 设置为 d1 ，class 设置为 mui-control-content，mui-active 控制激活。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">MUI选项卡</h1>
</header>
<div class="mui-content">
<div class="mui-control-content mui-active" id="d1">
<img src="imgs/shuijiao.jpg" width="100%"/>
</div>
<div class="mui-control-content" id="d2">
<div class="mui-input-row">
<label>Input</label>
<input type="text" placeholder="普通输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" placeholder="普通输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" placeholder="普通输入框">
</div>
</div>
<div class="mui-control-content " id="d3">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
</ul>
</div>
</div>
<nav class="mui-bar mui-bar-tab">
<a href="#d1" class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a href="#d2" class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a href="#d3" class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
</body>
</html>

效果图（下方几个不同按钮有不同情景）为：

4、卡片视图

常用于展现一段完整独立的信息，比如一篇文章的预览图、作者信息、点赞数量等。使用：

父层容器： mui-card ；

内层容器：页眉：mui-card-header ；添加标题作者等信息：mui-card-media、mui-media-body ；内容区：mui-card-content ；页脚：mui-card-footer ，(a|span) mui-card-link 。

如下示例：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">卡片视图</h1>
</header>
<div class="mui-content">
<div class="mui-card">
<div class="mui-card-header mui-card-media">
<img src="imgs/HBuilder.png" alt="" />
<div class="mui-media-body">
<h4>评论</h4>
<p>15:42</p>
</div>
</div>
<div class="mui-card-content">
<img src="imgs/imgbwcx.png" width="100%"/>
<div class="mui-card-content-inner"><p>不忘初心、牢记使命，是贯彻党的十九大精神的重要举措。党的十九大是在全面建成小康社会决胜阶段、中国特色社会主义进入新时代的关键时期召开的一次十分重要的大会。党的十九大报告，高举旗帜、高瞻远瞩、继往开来，是我们党迈进新时代、开启新征程、谱写新篇章的政治宣言和行动指南。开展“不忘初心、牢记使命”主题教育，铭记“为中国人民谋幸福，为中华民族谋复兴”的“初心”和“使命”，是学习贯彻党的十九大精神的重要举措，是激励我们共产党人不断前进的根本动力。</p></div>
</div>
<div class="mui-card-footer">
<span >详细内容</span>
<span class="mui-icon mui-icon-arrowright mui-card-link"></span>
</div>
</div>
</div>
</div>
</body>
</html>

效果图如下：

5、轮播组件

轮播组件是mui提供的一个核心组件，可应用于图片轮播、可拖动式图文表格、可拖动式选项卡等。使用：

顶层父容器： mui-slider ；二层父容器：mui-silder-group ；指示器：mui-slider-indicator ；子容器：mui-slider-item ；说明文字：mui-slider-title ；监听事件：slide事件：当拖动切换显示内容时触发；e.detail.slideNumber 获得当前显示项的索引值。

图片轮播：添加循环：mui-slider-loop ；条目容器：mui-slider-item ；循环时，需要增加2张重复图片（第一张和最后一张），并添加： mui-slider-item-duplicate 。轮播页面指示器：父层容器：mui-slider-indicator ，靠右对齐：mui-text-right ；子容器（指示器）: 图形指示器：mui-indicator:数量与item数量相同；数字指示器：mui-number ，内部添加: <span>当前数值</span> /item总数；轮播内容标题：mui-slider-title ；自动轮播：mui(选择器).silder({interval: 5000}) ；自动轮播周期单位毫秒，若为0则不自动播放，默认为0。

下面是一个综合示例：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.myindicator{
bottom:0px;
}
.myindicator .mui-number span{
color:white;
}
</style>
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">轮播图组件</h1>
</header>
<div class="mui-content">
<div id="slider1" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item">
<a href="#">
<img src="imgs/t3.png">
</a>
<p class="mui-slider-title">双11</p>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="imgs/t1.png">
</a>
<p class="mui-slider-title">美食</p>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="imgs/t2.png">
</a>
<p class="mui-slider-title">1元抢购</p>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="imgs/t3.png">
</a>
<p class="mui-slider-title">双11</p>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item">
<a href="#">
<img src="imgs/t1.png">
</a>
<p class="mui-slider-title">美食</p>
</div>
</div>
<div class="mui-slider-indicator myindicator mui-text-right">
<!--<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
-->
<div class="mui-number">
<span>1</span> <span>/3</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
mui("#slider1").slider({
interval:2000
});
</script>
</body>
</html>

效果演示：

6、列表

列表是 mui 封装的常用UI控件。其基本结构： ul-li ，ul :mui-table-view ，li : mui-table-view-cell 。名称容器： a | span 。列表扩展：右侧图标列表，添加表单，折叠面板，图文列表，底部操作表，弹出菜单。

折叠面板必须要有 a : mui-navigate-right ，li 添加 mui-collapse ，与a同级添加div：class=“mui-collapse-content 。

示例如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">列表1</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1<span class="mui-icon mui-icon-weixin mui-pull-right"></span>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
<button type="button" class="mui-btn mui-btn-blue">按钮</button>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
<span class="mui-badge mui-badge-blue">1</span>
</a>
</li>
<li class="mui-table-view-cell">
<a >
Item 3
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
ssdds
<div class="mui-numbox" data-numbox-step='1' data-numbox-min='0' data-numbox-max='10'>
<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
<input class="mui-input-numbox" type="number" />
<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div>
</a>
</li>
</ul>
<h5>折叠面板</h5>
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right">
操作1
</a>
<ul class="mui-table-view mui-collapse-content">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
</ul>
</li>
<li class="mui-table-view-cell
mui-collapse">
<a class="mui-navigate-right">
Item 2
</a>
<div class="mui-collapse-content">
<img src="imgs/shuijiao.jpg" width="100%"/>
</div>
</li>
</ul>
</div>
</body>
</html>

效果图为：

图文列表：

li: mui-media ；a 标签：img : mui-media-object（mui-pull-left | mui-pull-right ），附加显示内容：mui-pull-left|mui-pull-right，内容 div: mui-media-body overflow:hidden 。注意：a标签内的元素仅内容div 不设置float,其余均设置float,并且顺序必须将内容 div 放在最后。

示例：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">图文列表</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="imgs/cbd.jpg">
<!--和主体显示混排的信息-->
<div class="mui-pull-right">
<p>10:20</p>
<span class="mui-icon mui-icon-bars "></span>
</div>
<!--显示主体部分-->
<div class="mui-media-body">
<span>幸福</span>
<p class="mui-ellipsis-2" style="-webkit-line-clamp: 6;">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
<!--显示主体后面显示的信息-->
<p class="mui-pull-left" style="margin-left:50px">11-22</p>
<span class="mui-icon mui-icon-chat mui-pull-right"></span>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="imgs/cbd.jpg">
<!--和主体显示混排的信息-->
<div class="mui-pull-right">
<p>10:20</p>
<span class="mui-icon mui-icon-bars "></span>
</div>
<!--显示主体部分-->
<div class="mui-media-body">
<span>幸福</span>
<p class="mui-ellipsis-2" style="-webkit-line-clamp: 6;">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
<!--显示主体后面显示的信息-->
<p class="mui-pull-left" style="margin-left:50px">11-22</p>
<span class="mui-icon mui-icon-chat mui-pull-right"></span>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="imgs/cbd.jpg">
<!--和主体显示混排的信息-->
<div class="mui-pull-right">
<p>10:20</p>
<span class="mui-icon mui-icon-bars "></span>
</div>
<!--显示主体部分-->
<div class="mui-media-body">
<span>幸福</span>
<p class="mui-ellipsis-2" style="-webkit-line-clamp: 6;">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
<!--显示主体后面显示的信息-->
<p class="mui-pull-left" style="margin-left:50px">11-22</p>
<span class="mui-icon mui-icon-chat mui-pull-right"></span>
</a>
</li>
</ul>
</div>
</body>
</html>

效果图如下：

滑动列表：

结构使用 ul-li 布局，可滑动列表项：添加mui-slider-handle ；滑动菜单项目：外层添加 mui-slider-right|mui-slider-left mui-disabled；内层按钮添加：mui-btn mui-btn-red 。

示例如下：

 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">滑动列表菜单</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="mui-slider-left mui-disabled">
<span class="mui-btn mui-btn-red">删除</span>
</div>
<a class="mui-slider-handle">
滑动操作1
</a>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-right mui-disabled">
<span class="mui-btn mui-btn-green">菜单1</span>
<span class="mui-btn mui-btn-blue">菜单2</span>
<span class="mui-btn mui-btn-red" id="btn1">删除</span>
</div>
<a class="mui-slider-handle">
滑动操作2
</a>
</li>
</ul>
<script type="text/javascript">
document.getElementById("btn1").addEventListener("tap",function(){
mui.confirm("是否删除？","警告",["是","否","取消"],function(){
});
});
</script>
</div>
</body>
</html>

效果图为：

弹出菜单 / 底部操作表：

弹出菜单外层容器：mui-popover ；内层容器：ul-li 等。与触发元素绑定：a 元素的 href = " #popmenu " ，菜果 id值：popmenu 。获取选取项：mui('# popmenu').popover('toggle')；mui会自动识别处理隐藏还是弹出。

底部操作表外层容器：mui-popover，加上 mui-popover-action mui-popover-bottom ；内层容器: 两个ul-li ，ul-li : 所有可操作选项，ul-li: 取消，指定 a 的 href = "#id"；获取选取项：与弹出菜单类似。

示例：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-bars mui-pull-right" href="#p1"></a> <!--链接属性激活菜单-->
<h1 class="mui-title">列表相关操作</h1>
</header>
<div class="mui-content">
<!--弹出式菜单-->
<button type="button" class="mui-btn mui-btn-blue" id="btn1">按钮</button>
<div class="mui-popover" id="p1">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
菜单1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" id="li2">
菜单2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
菜单3
</a>
</li>
</ul>
</div>
<!--操作表式菜单-->
<div class="mui-popover mui-popover-action mui-popover-bottom" id="p2">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a >
保存到系统相册
</a>
</li>
<li class="mui-table-view-cell">
<a >
保存到系统相册
</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a >
取消
</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
document.getElementById("btn1").addEventListener("tap",function(){
mui("#p2").popover("toggle");
});
</script>
</body>
</html>

效果图为：