【MUI框架】学习笔记整理 Day 1

MUI 框架之 【原生UI】

（1）accordion（折叠面板）

由二级列表演化而来

<ul class="mui-table-view">
2　　 <li class="mui-table-view-cell mui-collapse">
　　　　<a class="mui-navigate-right" href="#"></a>
　　　　　　<div class="mui-collapse-content">
　　　　　　　　<p>不拉不拉</p>
　　　　　　</div>
　　　</li>
</ul>

代码块激活字符：maccordion

（2）actionsheet（操作表)

从底部弹出，显示选择项的操作按钮

<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
　　　　<!-- 可选择菜单 --> 
　　<ul class="mui-table-view"> 
　　　　<li class="mui-table-view-cell"> 
　　　　　　<a href="#">菜单1</a> 
　　　　</li> 
　　　　<li class="mui-table-view-cell"> 
　　　　　　<a href="#">菜单2</a> </li>
　　</ul> 
　　　　<!-- 取消菜单 --> 
　　<ul class="mui-table-view">
 　　　　<li class="mui-table-view-cell"> 
　　　　　　<a href="#sheet1"><b>取消</b></a>
 　　　　</li> 
　　</ul>
</div>

【经典案例】：

<div id="gender" class="mui-popover mui-popover-action mui-popover-bottom">
　　 <ul class="mui-table-view">
 　　　　<li class="mui-table-view-cell">
 　　　　　　<a href="#">男</a>
 　　　　</li>
 　　　　<li class="mui-table-view-cell">
 　　　　　　<a href="#">女</a>
 　　　　</li>
 　　　　<li class="mui-table-view-cell">
 　　　　　　<a href="#">保 密</a>
 　　　　</li>
 　　</ul>
 　　<ul class="mui-table-view">
　　　　 <li class="mui-table-view-cell">
 　　　　　　<a href="#gender"><b>取 消</b></a>
 　　　　</li>
 　　</ul>
</div>

若要使用js代码动态显示、隐藏actionsheet，同样在popover插件的构造方法中传入"toggle"参数即可，如下： mui('#sheet1').popover('toggle');

代码块激活字符：mactionsheet

（3）badge（数字角标）

用于数量提示。比如消息条数。

角标的核心类是.mui-badge，默认为实心灰色背景；同时，mui还内置了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标，如下：

<span class="mui-badge">1</span>
<span class="mui-badge mui-badge-primary">12</span>
<span class="mui-badge mui-badge-success">123</span> 
<span class="mui-badge mui-badge-warning">3</span>
<span class="mui-badge mui-badge-danger">45</span>
<span class="mui-badge mui-badge-purple">456</span>

若无需底色，则增加.mui-badge-inverted类即可，如下：

<span class="mui-badge mui-badge-inverted">1</span>
<span class="mui-badge mui-badge-primary mui-badge-inverted">2</span>
<span class="mui-badge mui-badge-success mui-badge-inverted">3</span>
<span class="mui-badge mui-badge-warning mui-badge-inverted">4</span>
<span class="mui-badge mui-badge-danger mui-badge-inverted">5</span>
<span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>

代码块激活字符：mbadge

（4）button（按钮）

<button type="button" class="mui-btn">默认</button>
<button type="button" class="mui-btn mui-btn-primary">蓝色</button>
<button type="button" class="mui-btn mui-btn-success">绿色</button>
<button type="button" class="mui-btn mui-btn-warning">黄色</button>
<button type="button" class="mui-btn mui-btn-danger">红色</button>
<button type="button" class="mui-btn mui-btn-royal">紫色</button>

若希望无底色、有边框的按钮，仅需增加.mui-btn-outlined类即可，代码如下：

<button type="button" class="mui-btn mui-btn-outlined">默认</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝色</button>
<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">绿色</button>
<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黄色</button>
<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">红色</button>
<button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫色</button>

代码块激活字符：mbutton

（5）cardview（卡片视图）

卡片视图常用于展现一段完整独立的信息。

使用mui-card类即可生成一个卡片容器，卡片视图主要有页眉、内容区、页脚三部分组成，结构如下：

<div class="mui-card">
<!--页眉，放置标题-->
<div class="mui-card-header">页眉</div>
<!--内容区-->
<div class="mui-card-content">内容区</div>
<!--页脚，放置补充信息或支持的操作-->
<div class="mui-card-footer">页脚</div>
</div>

卡片页眉及内容区，均支持放置图片； 页眉放置图片的话，需要在.mui-card-header节点上增加.mui-card-media类，然后设置一张图片做背景图即可，代码如下：

<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../images/cbd.jpg)"></div>

若希望在页眉放置更丰富的信息，比如头像、主标题、副标题，则需使用.mui-media-body类，示例代码如下：

<div class="mui-card-header mui-card-media">
　　<img src="../images/logo.png" />
　　<div class="mui-media-body">
　　　　小M
　　　　<p>发表于 2016-06-30 15:30</p>
　　</div>
</div>

（6）checkbox（复选框）

checkbox常用于多选的情况，比如批量删除。

<div class="mui-input-row mui-checkbox">
　　<label>checkbox示例</label>
　　<input name="checkbox1" value="Item 1" type="checkbox" checked>
</div>

默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：

<div class="mui-input-row mui-checkbox mui-left">
　　<label>checkbox左侧显示示例</label>
　　<input name="checkbox1" value="Item 1" type="checkbox">
</div>

代码块激活字符：mckeckbox

（7）dialog（对话框）

 

 

代码块激活字符：mdalert mdconfirm mdprompt mdtoast mdclosepopup mdclosepopups

（8）图片轮播

<div class="mui-slider">
　　<div class="mui-slider-group">
　　　　<div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
　　　　<div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
　　　　<div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
　　　　<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
　　</div>
</div>

假设当前图片轮播中有1、2、3、4四张图片，从第1张图片起，依次向左滑动切换图片，当切换到第4张图片时，继续向左滑动，接下来会有两种效果：

• 支持循环：左滑，直接切换到第1张图片；
• 不支持循环：左滑，无反应，继续显示第4张图片，用户若要显示第1张图片，必须连续向右滑动切换到第1张图片；

当显示第1张图片时，继续右滑是否显示第4张图片，是同样问题；这个问题的实现需要通过.mui-slider-loop类及DOM节点来控制；

若要支持循环，则需要在.mui-slider-group节点上增加.mui-slider-loop类，同时需要重复增加2张图片，图片顺序变为：4、1、2、3、4、1，代码示例如下：

<div class="mui-slider">
　　<div class="mui-slider-group mui-slider-loop">
　　<!--支持循环，需要重复图片节点-->
　　　　<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>
 5　　　　 <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
　　　　<div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
　　　　<div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
　　　　<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
　　<!--支持循环，需要重复图片节点-->
　　　　<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
　　</div>
</div>

JS Method

mui框架内置了图片轮播插件，通过该插件封装的JS API，用户可以设定是否自动轮播及轮播周期，如下为代码示例：

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});

因此若希望图片轮播不要自动播放，而是用户手动滑动才切换，只需要通过如上方法，将interval参数设为0即可。

代码块激活字符：mslider

（9）grid（栅格）

MUI 提供了非常简单实用的12列响应式栅格系统。使用时只需在外围容器上添加.mui-row，在列上添加 .mui-col-[sm|xs]-[1-12]，即可

代码块激活字符：mrow mcolsm mcolxs

（10）icon（图标）

mui默认提供了手机App开发常用的字体图标，如下：

 

使用时，只需要在span节点上分别增加.mui-icon、.mui-icon-name两个类即可（name为图标名称，例如：weixin、weibo等），如下代码即可显示一个微信图标：

<span class="mui-icon mui-icon-weixin"></span>

代码块激活字符：micon

（11）input（表单）

所有包裹在.mui-input-row 类中的 input、textarea等元素都被默认设置宽度属性为 100%; 将 label元素和上述控件包裹在.mui-input-group中可以获得最好的排列。

<form class="mui-input-group">
　　<div class="mui-input-row">
　　　　<label>用户名</label>
　　　　<input type="text" class="mui-input-clear" placeholder="请输入用户名">
　　</div>
　　<div class="mui-input-row">
　　　　<label>密码</label>
　　　　<input type="password" class="mui-input-password" placeholder="请输入密码">
　　</div>
　　<div class="mui-button-row">
　　　　<button type="button" class="mui-btn mui-btn-primary" >确认</button>
　　　　<button type="button" class="mui-btn mui-btn-danger" >取消</button>
　　</div>
</form>

密码框显示隐藏密码：

给input元素添加.mui-input-password类即可使用。

<form class="mui-input-group">
2　　 <div class="mui-input-row">
　　　　<label>密码框</label>
4　　　　 <input type="password" class="mui-input-password" placeholder="请输入密码">
　　</div>
</form>

示例：

验证表单是否为空

<div class="mui-input-group">
　　<div class="mui-input-row">
　　　　<label>用户名：</label>
　　　　<input type="text" class="mui-input-clear" placeholder="请输入用户名">
　　</div>
　　<div class="mui-input-row">
　　　　<label>密码：</label>
 8　　　　 <input type="password" class="mui-input-clear mui-input-password" placeholder="请输入密码">
　　</div>
</div>

提交时校验三个字段均不能为空，若为空则提醒并终止业务逻辑运行，使用each()方法循环校验，如下：

mui("#input_example input").each(function() {
//若当前input为空，则alert提醒
if(!this.value || this.value.trim() == "") {
var label = this.previousElementSibling;
mui.alert(label.innerText + "不允许为空");
check = false;
return false;
}
}); //校验通过，继续执行业务逻辑
if(check){
mui.alert('验证通过!')
}

代码块激活字符：minput

（12）list（列表）

列表是常用的UI控件，mui封装的列表组件比较简单，只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可，如下为示例代码

<ul class="mui-table-view">
　　<li class="mui-table-view-cell">Item 1</li>
　　<li class="mui-table-view-cell">Item 2</li>
　　<li class="mui-table-view-cell">Item 3</li>
</ul>

 

右侧添加导航箭头

 

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

右侧添加数字角标

<ul class="mui-table-view">
　　<li class="mui-table-view-cell">Item 1
　　　　<span class="mui-badge mui-badge-primary">11</span>
　　</li>
　　<li class="mui-table-view-cell">Item 2
　　　　<span class="mui-badge mui-badge-success">22</span>
　　</li>
　　<li class="mui-table-view-cell">Item 3
　　　　<span class="mui-badge">33</span>
　　</li>
</ul>

media list （图文列表）

图文列表继承自列表组件，主要添加了.mui-media、.mui-media-object、.mui-media-body、.mui-pull-left/right几个类，如下为示例代码

<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="../images/shuijiao.jpg">
　　　　　<div class="mui-media-body">
　　　　　　幸福
　　　　　　<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
　　　　</div>
　　　　</a>
　　</li>
　　<li class="mui-table-view-cell mui-media">
　　　　<a href="javascript:;">
　　　　<img class="mui-media-object mui-pull-left" src="../images/muwu.jpg">
　　　　<div class="mui-media-body">
　　　　　　木屋
　　　　　　<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
　　　　</div>
　　　　</a>
　　</li>
　　<li class="mui-table-view-cell mui-media">
　　　　<a href="javascript:;">
　　　　<img class="mui-media-object mui-pull-left" src="../images/cbd.jpg">
23　　　　 <div class="mui-media-body">
　　　　　　CBD
　　　　　　<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
　　　　</div>
　　　　</a>
　　</li>
29 </ul>

代码块激活字符：mlist

 

（13）遮罩蒙版

在popover、侧滑菜单等界面，经常会用到蒙版遮罩；比如popover弹出后，除popover控件外的其它区域都会遮罩一层蒙版，用户点击蒙版不会触发蒙版下方的逻辑，而会关闭popover同时关闭蒙版；再比如侧滑菜单界面，菜单划出后，除侧滑菜单之外的其它区域都会遮罩一层蒙版，用户点击蒙版会关闭侧滑菜单同时关闭蒙版。

遮罩蒙版常用的操作包括：创建、显示、关闭，如下代码：

var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调；
mask.show();//显示遮罩
mask.close();//关闭遮罩

注意：关闭遮罩仅会关闭，不会销毁；关闭之后可以再次调用mask.show();打开遮罩；

mui默认的蒙版遮罩使用.mui-backdrop类定义（如下代码），若需自定义遮罩效果，只需覆盖定义.mui-backdrop即可；

.mui-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 998;
}

代码块激活字符：mmask

 

OK，今天的学习总结就是这些了，持续更新中……