MUI经典组件.docx

假设当前图片轮播中有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，代码示例如下：

--支持循环，需要重复图片节点-->

--支持循环，需要重复图片节点-->

JSMethod

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

//获得slider插件对象

vargallery=mui（'.mui-slider'）;

gallery.slider（{

interval:

5000//自动轮播周期，若为0则不自动播放，默认为0；

}）;

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

若要跳转到第x张图片，则可以使用图片轮播插件的gotoItem方法，例如：

//获得slider插件对象

vargallery=mui（'.mui-slider'）;

gallery.slider（）.gotoItem（index）;//跳转到第index张图片，index从0开始；

注意：

mui框架会默认初始化当前页面的图片轮播组件；若轮播组件内容为js动态生成时（比如通过ajax动态获取的营销信息），则需要在动态DOM生成后，手动调用图片轮播的初始化方法；代码如下：

//获得slider插件对象

vargallery=mui（'.mui-slider'）;

gallery.slider（{

interval:

5000//自动轮播周期，若为0则不自动播放，默认为0；

}）;

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类即可，如下为示例代码

Item1

Item2

Item3

点击列表，对应列表项显示灰色高亮，若想自定义高亮颜色，只需要重写.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几个类，如下为示例代码

;">

幸福

能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？

;">

木屋

想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.

;">

CBD

烤炉模式的城，到黄昏，如同打翻的调色盘一般.

Item1

Item2

Item3

mui支持将数字角标、按钮、开关等控件放在列表中；mui默认将数字角标放在列表右侧显示，代码如下：

Item1

11

Item2

22

Item3

33

7,numbox（数字输入框）

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

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

-

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

+

可通过data-*自定义属性设置数字输入框的参数，如下：

numbox自定义参数

data-numbox-min

输入框允许使用的最小值，默认无限制

data-numbox-max

输入框允许使用的最大值，默认无限制

data-numbox-step

每次点击“+”、“-”按钮变化的步长，默认步长为1

示例：

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

-

+

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：

主界面移动、菜单不动

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

--菜单容器-->

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

...

--主页面容器-->

--主页面标题-->

标题

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

...

动画2：

主界面不动、菜单移动

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

动画3：

主界面、菜单同时移动

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

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

--主页面容器-->

--菜单容器-->

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

...

--主页面标题-->

标题

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

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

...

mui支持多种方式显示div模式的侧滑菜单：

1、在主界面向右拖动（drag）；2、点击含有mui-action-menu类的控件；3、Android手机按menu键；4、通过JSAPI触发，如下：

mui（'.mui-off-canvas-wrap'）.offCanvas（'show'）;

同样，mui支持多种方式关闭div模式的侧滑菜单：

1、在手机屏幕上任意位置向左拖动（drag）；2、点击主界面内任意位置；3、Android手机按menu键；4、Android手机按back键；5、通过JSAPI触发，如下：

mui（'.mui-off-canvas-wrap'）.offCanvas（'close'）;

9,弹出菜单

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

Item1

Item2

Item3

Item4

Item5

要显示、隐藏如上菜单，mui推荐使用锚点方式，例如：

打开弹出菜单

点击如上定义的按钮，即可显示弹出菜单，再次点击弹出菜单之外的其他区域，均可关闭弹出菜单；这种使用方式最为简洁。

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

mui（'.bottomPopo

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

MUI 经典 组件

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。