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

参考整理自MUI官网 http://dev.dcloud.net.cn/mui/ui/

（1）numbox（数字输入框）

mui提供了数字输入框控件，可直接输入数字，也可以点击“+”、“-”按钮变换当前数值；默认numbox控件dom结构比较简单，如下：

<div class="mui-numbox">

<!-- "-"按钮，点击可减小当前数值 -->

<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>

<input class="mui-numbox-input" type="number" />

<!-- "+"按钮，点击可增大当前数值 -->

<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>

</div>

示例：设置取值范围为0~100，每次变化步长为10，则代码如下

<div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>

<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>

<input class="mui-numbox-input" type="number" />

<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>

</div>

代码块激活字符：mnumbox

 

（2）侧滑导航

mui提供了两种侧滑导航实现：webview模式和div模式，两种模式各有优劣，适用于不同的场景。

webview模式

主页面和菜单内容在不同的webview中，两个页面根据内容需求分别组织DOM结构，mui对其DOM结构无特殊要求，故其有如下优点：

• 菜单内容是单独的webview，故可被多个页面复用；
• 菜单内容在单独的webview中，菜单区域的滚动不影响主界面，故可使用原生滚动，滚动更为流畅；

另一方面，webview模式也有其缺点：

• 不支持拖动手势（跟手拖动）；
• 主页面、菜单不同webview实现，因此若需交互（如：点击菜单触发主页面内容变化），需使用自定义事件实现跨webview通讯；

div模式

主页面和菜单内容在同一个webview下，嵌套在特定结构的div中，通过div的移动动画模拟菜单移动；故该模式有如下优点：

• 支持拖动手势（跟手拖动）；
• 主页面、菜单在一个页面中，可通过JS轻松实现两者交互（如：点击菜单触发主页面内容变化），没有跨webview通讯的烦恼；

另一方面，div模式也有其缺点：

• 不支持菜单内容在多页面的复用，需每个页面都生成对应的菜单节点；
• 主界面和菜单内容的滚动互不影响，因此会使用div区域滚动，在低端Android手机且滚动内容较多时，可能会稍显卡顿；

div模式支持不同的动画效果，每种动画效果需遵从不同的DOM构造；下面我们以右滑菜单为例（左滑菜单仅需将菜单父节点上的mui-off-canvas-left换成mui-off-canvas-right即可），说明每种动画对应的DOM结构。

动画1：主界面移动、菜单不动

<!-- 侧滑导航根容器 -->

<div class="mui-off-canvas-wrap mui-draggable">

<!-- 菜单容器 -->

<aside class="mui-off-canvas-left">

<div class="mui-scroll-wrapper">

<div class="mui-scroll">

<!-- 菜单具体展示内容 -->

...

</div>

</div>

</aside>

<!-- 主页面容器 -->

<div class="mui-inner-wrap">

<!-- 主页面标题 -->

<header class="mui-bar mui-bar-nav">

<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>

<h1 class="mui-title">标题</h1>

</header>

<div class="mui-content mui-scroll-wrapper">

<div class="mui-scroll">

<!-- 主界面具体展示内容 -->

...

</div>

</div>

</div>

</div>

动画2：缩放式侧滑（类手机QQ）

该种动画要求的DOM结构和动画1的DOM结构基本相同，唯一差别就是需在侧滑导航根容器class上增加一个mui-scalable类

动画3：主界面不动、菜单移动

该种动画要求的DOM结构和动画1的DOM结构基本相同，唯一差别就是需在侧滑导航根容器class上增加一个mui-slide-in类

动画4：主界面、菜单同时移动

该种动画要求的DOM结构较特殊，需将菜单容器放在主页面容器之下

<!-- 侧滑导航根容器 -->

<div class="mui-off-canvas-wrap mui-draggable">

<!-- 主页面容器 -->

<div class="mui-inner-wrap">

<!-- 菜单容器 -->

<aside class="mui-off-canvas-left">

<div class="mui-scroll-wrapper">

<div class="mui-scroll">

<!-- 菜单具体展示内容 -->

...

</div>

</div>

</aside>

<!-- 主页面标题 -->

<header class="mui-bar mui-bar-nav">

<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>

<h1 class="mui-title">标题</h1>

</header>

<!-- 主页面内容容器 -->

<div class="mui-content mui-scroll-wrapper">

<div class="mui-scroll">

<!-- 主界面具体展示内容 -->

...

</div>

</div>

</div>

</div>

 

JS API

mui支持多种方式操作div模式的侧滑菜单：

• 1、在界面上拖动操作（drag）；
• 2、点击含有mui-action-menu类的控件；
• 3、Android手机按menu键；
• 4、通过JS API触发，

如下：

可以有两种调用方式

mui('.mui-off-canvas-wrap').offCanvas('show');

或

mui('.mui-off-canvas-wrap').offCanvas().show();

 

事件监听

可以通过以下方式监听侧滑菜单显示隐藏

document.querySelector('.mui-off-canvas-wrap').addEventListener('shown',function (event) {

//...

})

也可以通过isShown()方法判断是否为显示状态

mui('.mui-off-canvas-wrap').offCanvas().isShown();

代码块激活字符：moffcanvas

 

（3）弹出菜单

mui框架内置了弹出菜单插件，弹出菜单显示内容不限，但必须包裹在一个含.mui-popover类的div中，如下即为一个弹出菜单内容：

<div id="popover" class="mui-popover">

<ul class="mui-table-view">

<li class="mui-table-view-cell"><a href="#">Item1</a></li>

<li class="mui-table-view-cell"><a href="#">Item2</a></li>

<li class="mui-table-view-cell"><a href="#">Item3</a></li>

<li class="mui-table-view-cell"><a href="#">Item4</a></li>

<li class="mui-table-view-cell"><a href="#">Item5</a></li>

</ul>

</div>

若希望通过js的方式控制弹出菜单，则通过如下一个方法即可：

mui('.bottomPopover').popover(status[,anchor]);

mui('.bottomPopover').popover('toggle');//show hide toggle

//传入toggle参数，用户也无需关心当前是显示还是隐藏状态，mui会自动识别处理；

mui('.mui-popover').popover('toggle',document.getElementById("openPopover"));

代码块激活字符：mpopover

 

（4）picker（选择器）

mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现

*poppicker组件依赖mui.picker.js/.css mui.poppicker.js/.css请务必在mui.js/css后中引用,也可统一引用 压缩版本:mui.picker.min.js

popPicker

适用于弹出单级或多级选择器

通过new mui.PopPicker()初始化popPicker组件

var picker = new mui.PopPicker();

给picker对象添加数据

picker.setData([{value:'zz',text:'智子'}]);

显示picker

picker.show( SelectedItemsCallback )

PopPicker 是支持多层级联的，通过setSelectedIndex()和setSelectedValue()两个方法,设定指定层级的选中项

var picker = new mui.PopPicker();

picker.setData([{

value: "first",

text: "第一项"

}, {

value: "second",

text: "第二项"

}, {

value: "third",

text: "第三项"

}, {

value: "fourth",

text: "第四项"

}, {

value: "fifth",

text: "第五项"

}])

//picker.pickers[0].setSelectedIndex(4, 2000);

picker.pickers[0].setSelectedValue('fourth', 2000);

picker.show(function(SelectedItem) {

console.log(SelectedItem);

})

设置多级默认值可依次获取每一层级Picker对象并设置默认值,如下:

var picker = new mui.PopPicker({

layer: 2

});

picker.setData([{

value: '110000',

text: '北京市',

children: [{

value: "110101",

text: "东城区"

}]

}, {

value: '120000',

text: '天津市',

children: [{

value: "120101",

text: "和平区"

}, {

value: "120102",

text: "河东区"

}, {

value: "120104",

text: "南开区"

}

]

}])

picker.pickers[0].setSelectedIndex(1);

picker.pickers[1].setSelectedIndex(1);

picker.show(function(SelectedItem) {

console.log(SelectedItem);

})

 

dtpicker

dtpicker组件适用于弹出日期选择器

通过new mui.DtPicker()初始化DtPicker组件

var dtPicker = new mui.DtPicker(options);

显示picker

dtPicker.show( SelectedItemsCallback )

实例

var dtPicker = new mui.DtPicker();

dtPicker.show(function (selectItems) {

console.log(selectItems.y);//{text: "2016",value: 2016}

console.log(selectItems.m);//{text: "05",value: "05"}

})

代码块激活字符：mpoppicker mdtpicker

 

（5）progressbar（滚动条）

有准确值的进度条

• 有准确值的进度条会显示当前进度正处于整体进度的占比位置，用户可以更直观的预期完成时间；
• 使用进度条控件，需要一个进度条控件容器，mui会自动识别该容器下是否有进度条控件，若没有，则自动创建。

进度条控件DOM结构：

<div id="demo1" class="mui-progressbar">

<span></span>

</div>

初始化:

mui(container).progressbar({progress:20}).show();

progressbar初始化逻辑：

检查当前容器(container控件)自身是否包含.mui-progressbar类：

• 当前容器包含.mui-progressbar类，则以当前容器为目标控件，直接显示进度；
• 否则，检查当前容器的直接孩子节点是否包含.mui-progressbar类，若存在，则以遍历到的第一个含有.mui-progressbar类的孩子节点为目标控件，显示进度；
• 若当前容器的直接孩子节点，均不含.mui-progressbar类,则自动创建进度条控件；

更改显示进度条:

mui(container).progressbar().setProgress(50);

关闭进度条:

mui(container).progressbar().hide();

 

无限循环进度条:

进度条控件DOM结构（多了.mui-progressbar-infinite）：

<div id="demo1" class="mui-progressbar mui-progressbar-infinite">

<span></span>

</div>

代码块激活字符：mprogressbar

 

（6）transparentBar（透明标题栏）

透明标题栏组件比较简单，只需要在header组件上添加.mui-bar-transparent类即可，如下为示例代码

<header class="mui-bar mui-bar-nav mui-bar-transparent">

<h1 class="mui-title">标题</h1>

</header>

代码块激活字符：mtransparent

 

（7）radio（单选框）

DOM结构

<div class="mui-input-row mui-radio">

<label>radio</label>

<input name="radio1" type="radio">

</div>

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

<div class="mui-input-row mui-radio mui-left">

<label>radio</label>

<input name="radio1" type="radio">

</div>

mui基于列表控件，提供了列表式单选实现；在列表根节点上增加.mui-table-view-radio类即可，若要默认选中某项，只需要在对应li节点上增加.mui-selected类即可，dom结构如下：

<ul class="mui-table-view mui-table-view-radio">

<li class="mui-table-view-cell">

<a class="mui-navigate-right">Item 1</a>

</li>

<li class="mui-table-view-cell mui-selected">

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

列表式单选在切换选中项时会触发selected事件，在事件参数（e.detail.el）中可以获得当前选中的dom节点，如下代码打印当前选中项的innerHTML：

var list = document.querySelector('.mui-table-view.mui-table-view-radio');

list.addEventListener('selected',function(e){

console.log("当前选中的为："+e.detail.el.innerText);

});

代码块激活字符：mradio

 

（8）range（滑块）

滑块常用于区间数字选择

DOM结构

<div class="mui-input-row mui-input-range">

<label>Range</label>

<input type="range" min="0" max="100">

</div>

代码块激活字符：mrange

 

（9）scroll（区域滚动）

mui额外提供了区域滚动组件，使用时需要遵循如下DOM结构

<div class="mui-scroll-wrapper">

<div class="mui-scroll">

<!--这里放置真实显示的DOM内容-->

</div>

</div>

示例：快速回滚到该区域顶部，代码如下：

mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滚动到顶

代码块激活字符：mscroll mscroolsegmented

 

（10）slide（轮播组件）

轮播组件是mui提供的一个核心组件，在该核心组件基础上，衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件，这些组件有较多共同点。首先，Dom构造基本相同，如下：

<div class="mui-slider">

<div class="mui-slider-group">

<!--第一个内容区容器-->

<div class="mui-slider-item">

<!-- 具体内容 -->

</div>

<!--第二个内容区-->

<div class="mui-slider-item">

<!-- 具体内容 -->

</div>

</div>

</div>

如下为一个可拖动式选项卡示例，为提高页面加载速度，页面加载时，仅显示第一个选项卡的内容，第二、第三选项卡内容为空。

当切换到第二、第三个选项卡时，再动态获取相应内容进行显示：

var item2Show = false,item3Show = false;//子选项卡是否显示标志

document.querySelector('.mui-slider').addEventListener('slide', function(event) {

if (event.detail.slideNumber === 1&&!item2Show) {

//切换到第二个选项卡

//根据具体业务，动态获得第二个选项卡内容；

var content = ....

//显示内容

document.getElementById("item2").innerHTML = content;

//改变标志位，下次直接显示

item2Show = true;

} else if (event.detail.slideNumber === 2&&!item3Show) {

//切换到第三个选项卡

//根据具体业务，动态获得第三个选项卡内容；

var content = ....

//显示内容

document.getElementById("item3").innerHTML = content;

//改变标志位，下次直接显示

item3Show = true;

}

});

代码块激活字符：mslider

 

（11）switch（开关）

默认开关控件,带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即可变成无文字的简洁模式

若要获得当前开关状态，可通过判断当前开关控件是否包含.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();

 

事件

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

document.getElementById("mySwitch").addEventListener("toggle",function(event){

if(event.detail.isActive){

console.log("你启动了开关");

}else{

console.log("你关闭了开关");

}

})

代码块激活字符：mswitch

 

PS：

Sorry，攒了好久才更，拖延症重度患者啊！！！

下期预告：【MUI框架】之窗口管理