MUI经典组件Word文档格式.docx
《MUI经典组件Word文档格式.docx》由会员分享，可在线阅读，更多相关《MUI经典组件Word文档格式.docx（15页珍藏版）》请在冰豆网上搜索。
Item3<
--第3个面板中的内容-->
/ul>
2,actionsheet（操作表）
actionsheet一般从底部弹出，显示一系列可供用户选择的操作按钮；
actionsheet是从popover控件基础上演变而来，实际上就是一个固定从底部弹出的popover，故DOM结构和popove类似，只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类；
divid="
sheet1"
class="
mui-popovermui-popover-bottommui-popover-action"
--可选择菜单-->
mui-table-view-cell"
ahref="
菜单1<
菜单2<
--取消菜单-->
#sheet1"
<
b>
取消<
/b>
和popover一样，推荐使用锚点方式显示、隐藏actionsheet；
若要使用js代码动态显示、隐藏actionsheet，同样在popover插件的构造方法中传入"
toggle"
参数即可，如下：
//传入toggle参数，用户无需关心当前是显示还是隐藏状态，mui会自动识别处理；
mui（'
#sheet1'
）.popover（'
toggle'
）;
3,gallery（图片轮播）
图片轮播继承自slide插件，因此其DOM结构、事件均和slide插件相同；
DOM结构
默认不支持循环播放，DOM结构如下：
mui-slider"
mui-slider-group"
mui-slider-item"
imgsrc="
1.jpg"
/>
2.jpg"
3.jpg"
假设当前图片轮播中有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，代码示例如下：
mui-slider-groupmui-slider-loop"
--支持循环，需要重复图片节点-->
mui-slider-itemmui-slider-item-duplicate"
4.jpg"
JSMethod
mui框架内置了图片轮播插件，通过该插件封装的JSAPI，用户可以设定是否自动轮播及轮播周期，如下为代码示例：
//获得slider插件对象
vargallery=mui（'
.mui-slider'
gallery.slider（{
interval:
5000//自动轮播周期，若为0则不自动播放，默认为0；
}）;
因此若希望图片轮播不要自动播放，而是用户手动滑动才切换，只需要通过如上方法，将interval参数设为0即可。
若要跳转到第x张图片，则可以使用图片轮播插件的gotoItem方法，例如：
gallery.slider（）.gotoItem（index）;
//跳转到第index张图片，index从0开始；
注意：
mui框架会默认初始化当前页面的图片轮播组件；
若轮播组件内容为js动态生成时（比如通过ajax动态获取的营销信息），则需要在动态DOM生成后，手动调用图片轮播的初始化方法；
代码如下：
4,输入增强
mui目前提供的输入增强包括：
快速删除和语音输入两项功能。
要删除输入框中的内容，使用输入法键盘上的删除按键，
只能逐个删除字符，mui提供了快速删除能力，只需要在对应input控件上添加.mui-input-clear类，
当input控件中有内容时，右侧会有一个删除图标，点击会清空当前input的内容；
另外，为了方便快速输入，mui集成了HTML5+的语音输入，只需要在对应input控件上添加.mui-input-speech类，就会在该控件右侧显示一个语音输入的图标，点击会启用科大讯飞语音输入界面。
5，list（列表）
列表是常用的UI控件，mui封装的列表组件比较简单，只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可，如下为示例代码
点击列表，对应列表项显示灰色高亮，若想自定义高亮颜色，只需要重写.mui-table-view-cell.mui-active即可，如下：
/*点击变蓝色高亮*/
.mui-table-view-cell.mui-active{
background-color:
#0062CC;
}
若右侧需要增加导航箭头，变成导航链接，则只需在li节点下增加a子节点，并为该a节点增加.mui-navigate-right类即可，如下：
6,medialist（图文列表）
图文列表继承自列表组件，主要添加了.mui-media、.mui-media-object、.mui-media-body几个类，如下为示例代码
mui-table-view-cellmui-media"
javascript:
;
"
imgclass="
mui-media-objectmui-pull-left"
src="
../images/shuijiao.jpg"
mui-media-body"
幸福
<
pclass='
mui-ellipsis'
能和心爱的人一起睡觉，是件幸福的事情；
可是，打呼噜怎么办？
/p>
../images/muwu.jpg"
木屋
想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.<
../images/cbd.jpg"
CBD
烤炉模式的城，到黄昏，如同打翻的调色盘一般.<
mui支持将数字角标、按钮、开关等控件放在列表中；
mui默认将数字角标放在列表右侧显示，代码如下：
Item1
spanclass="
mui-badgemui-badge-primary"
11<
/span>
Item2
mui-badgemui-badge-success"
22<
Item3
mui-badge"
33<
7,numbox（数字输入框）
mui提供了数字输入框控件，可直接输入数字，也可以点击“+”、“-”按钮变换当前数值；
默认numbox控件dom结构比较简单，如下：
mui-numbox"
--"
-"
按钮，点击可减小当前数值-->
buttonclass="
mui-btnmui-numbox-btn-minus"
type="
button"
-<
/button>
inputclass="
mui-numbox-input"
number"
+"
按钮，点击可增大当前数值-->
mui-btnmui-numbox-btn-plus"
+<
可通过data-*自定义属性设置数字输入框的参数，如下：
numbox自定义参数
data-numbox-min
输入框允许使用的最小值，默认无限制
data-numbox-max
输入框允许使用的最大值，默认无限制
data-numbox-step
每次点击“+”、“-”按钮变化的步长，默认步长为1
示例：
设置取值范围为0~100，每次变化步长为10，则代码如下
data-numbox-step='
10'
data-numbox-min='
0'
data-numbox-max='
100'
8,侧滑导航
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：
主界面移动、菜单不动
--侧滑导航根容器-->
mui-off-canvas-wrapmui-draggable"
--菜单容器-->
asideclass="
mui-off-canvas-left"
mui-scroll-wrapper"
mui-scroll"
--菜单具体展示内容-->
...
/aside>
--主页面容器-->
mui-inner-wrap"
--主页面标题-->
headerclass="
mui-barmui-bar-nav"
mui-iconmui-action-menumui-icon-barsmui-pull-left"
h1class="
mui-title"
标题<
/h1>
/header>
mui-contentmui-scroll-wrapper"
--主界面具体展示内容-->
动画2：
主界面不动、菜单移动
该种动画要求的DOM结构和动画1的DOM结构基本相同，唯一差别就是需在侧滑导航根容器class上增加一个mui-slide-in类
动画3：
主界面、菜单同时移动
该种动画要求的DOM结构较特殊，需将菜单容器放在主页面容器之下
--主页面内容容器-->
mui支持多种方式显示div模式的侧滑菜单：
1、在主界面向右拖动（drag）；
2、点击含有mui-action-menu类的控件；
3、Android手机按menu键；
4、通过JSAPI触发，如下：
.mui-off-canvas-wrap'
）.offCanvas（'
show'
同样，mui支持多种方式关闭div模式的侧滑菜单：
1、在手机屏幕上任意位置向左拖动（drag）；
2、点击主界面内任意位置；
4、Android手机按back键；
5、通过JSAPI触发，如下：
close'
9,弹出菜单
mui框架内置了弹出菜单插件，弹出菜单显示内容不限，但必须包裹在一个含.mui-popover类的div中，如下即为一个弹出菜单内容：
popover"
mui-popover"
Item1<
Item2<
Item3<
Item4<
Item5<
要显示、隐藏如上菜单，mui推荐使用锚点方式，例如：
#popover"
id="
openPopover"
mui-btnmui-btn-primarymui-btn-block"
打开弹出菜单<
点击如上定义的按钮，即可显示弹出菜单，再次点击弹出菜单之外的其他区域，均可关闭弹出菜单；
这种使用方式最为简洁。
若希望通过js的方式控制弹出菜单，则通过如下一个方法即可：
.bottomPopo
升级会员 