MUI经典组件.docx
《MUI经典组件.docx》由会员分享,可在线阅读,更多相关《MUI经典组件.docx(15页珍藏版)》请在冰豆网上搜索。
MUI经典组件
下面是MUI中以后可能能用得着的组件,做一简单整理
1,accordion(折叠面板)
折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下:
Item1
--第1个面板中的内容-->
Item2
--第2个面板中的内容-->
Item3
--第3个面板中的内容-->
2,actionsheet(操作表)
actionsheet一般从底部弹出,显示一系列可供用户选择的操作按钮;actionsheet是从popover控件基础上演变而来,实际上就是一个固定从底部弹出的popover,故DOM结构和popove类似,只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类;
--可选择菜单-->
菜单1
菜单2
--取消菜单-->
取消
和popover一样,推荐使用锚点方式显示、隐藏actionsheet;若要使用js代码动态显示、隐藏actionsheet,同样在popover插件的构造方法中传入"toggle"参数即可,如下:
//传入toggle参数,用户无需关心当前是显示还是隐藏状态,mui会自动识别处理;
mui('#sheet1').popover('toggle');
3,gallery(图片轮播)
图片轮播继承自slide插件,因此其DOM结构、事件均和slide插件相同;
DOM结构
默认不支持循环播放,DOM结构如下:
假设当前图片轮播中有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方法,例如:
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几个类,如下为示例代码
;">幸福能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?
;">
幸福
能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?
;">木屋想要这样一间小木屋,夏天挫冰吃瓜,冬天围炉取暖.
木屋
想要这样一间小木屋,夏天挫冰吃瓜,冬天围炉取暖.
;">CBD烤炉模式的城,到黄昏,如同打翻的调色盘一般.
CBD
烤炉模式的城,到黄昏,如同打翻的调色盘一般.
mui支持将数字角标、按钮、开关等控件放在列表中;mui默认将数字角标放在列表右侧显示,代码如下:
11
22
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中,如下即为一个弹出菜单内容:
Item4
Item5
要显示、隐藏如上菜单,mui推荐使用锚点方式,例如:
打开弹出菜单
点击如上定义的按钮,即可显示弹出菜单,再次点击弹出菜单之外的其他区域,均可关闭弹出菜单;这种使用方式最为简洁。
若希望通过js的方式控制弹出菜单,则通过如下一个方法即可:
mui('.bottomPopo
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1