MUI经典组件Word文档格式.docx
《MUI经典组件Word文档格式.docx》由会员分享,可在线阅读,更多相关《MUI经典组件Word文档格式.docx(15页珍藏版)》请在冰豆网上搜索。
![MUI经典组件Word文档格式.docx](https://file1.bdocx.com/fileroot1/2023-2/3/d7d0f727-e3de-4a48-82b4-8c23a61f91bf/d7d0f727-e3de-4a48-82b4-8c23a61f91bf1.gif)
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