您的位置：首页 > 产品设计 > UI/UE

MUI组件二：复选框、对话框、图片轮播、图标和输入框

2016-07-12 17:33 363 查看

1、checkbox（复选框）

checkbox常用于多选的情况，比如批量删除、添加群聊等；

DOM结构

<div class="mui-input-row mui-checkbox">
<label>checkbox示例</label>
<input name="checkbox1" value="Item 1" type="checkbox" checked>
</div>
默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：
<div class="mui-input-row mui-checkbox mui-left">
<label>checkbox左侧显示示例</label>
<input name="checkbox1" value="Item 1" type="checkbox">
</div>


若要禁用checkbox，只需在checkbox上增加disabled属性即可；

代码块激活字符: mckeckbox

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">checkbox（复选框）</h1>
</header>
<div class="mui-content mui-active">
<div class="mui-input-row mui-checkbox ">
<label>Checkbox</label>
<input name="Checkbox" type="checkbox" checked>
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>checkbox</label>
<input name="checkbox1" type="checkbox" checked >
</div>
<div class="mui-input-row mui-checkbox mui-disabled">
<label>disabled checkbox</label>
<input name="checkbox" type="checkbox" disabled="disabled">
</div>
</div>
</body>
</html>



2、dialog（对话框）

创建并显示对话框，弹出的对话框为非阻塞模式，用户点击对话框上的按钮后关闭( h5模式的对话框也可通过closepopup关闭 )，并通过callback函数返回用户点击按钮的索引值或输入框中的值。

mui会根据ua判断,弹出原生对话框还是h5绘制的对话框,在基座中默认会弹出原生对话框,可以配置type属性,使得弹出h5模式对话框

两者区别:1.原生对话框可以跨webview,2.h5对话框样式统一而且可以修改对话框属性或样式。mui v3.0 版本的dialog控件支持换行（\n）显示

（1）、.alert( message, title, title, btnValue, callback, [, type] )

message：Type: String，提示对话框上显示的内容

title：Type: String，提示对话框上显示的标题

btnValue：Type: String，提示对话框上按钮显示的内容

callback：Type: Function，提示对话框上关闭后的回调函数

type：Value: 'div'，是否使用h5绘制的对话框



（2）、.confirm( message, title, title, btnValue, callback, [, type] )

message：Type: String，提示对话框上显示的内容

title：Type: String，提示对话框上显示的标题

btnValue：Type: Array，提示对话框上按钮显示的内容

callback：Type: Function，提示对话框上关闭后的回调函数

type：Value: 'div'，是否使用h5绘制的对话框



（3）、.prompt( message, placeholder, title, title, btnValue, callback, [, type] )

message：Type: String，提示对话框上显示的内容

placeholder：Type: String，编辑框显示的提示文字

title：Type: String，提示对话框上显示的标题

btnValue：Type: Array，提示对话框上按钮显示的内容

callback：Type: Function，提示对话框上关闭后的回调函数

type：Value: 'div'，是否使用h5绘制的对话框

如果有定制对话框样式的需求(只能修改h5模式对话框)可以在mui.css中修改.mui-popup类下的样式。如果需要修改DOM结构可以按照以下方式处理.

//修改弹出框默认input类型为password
mui.prompt('text','deftext','title',['true','false'],null,'div')
document.querySelector('.mui-popup-input input').type='password'



（4）、.toast( message )

message ：Type: String，自动消失提示框



（5）、.closePopup()(只能关闭h5模式的对话框)关闭最后一次弹出的对话框

（6）、.closePopups()(只能关闭h5模式的对话框)关闭所有对话框

代码块激活字符: mdalert mdconfirm
mdprompt mdtoast mdclosepopup
mdclosepopups

3、gallery（图片轮播）

图片轮播继承自slide插件，因此其DOM结构、事件均和slide插件相同；

（1）、DOM结构

默认不支持循环播放，DOM结构如下：

<div class="mui-slider">
<div class="mui-slider-group">
<div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
</div>
</div>


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

<div class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!--支持循环，需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
<!--支持循环，需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
</div>
</div>


（2）、JS Method

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

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});


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

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

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider().gotoItem(index);//跳转到第index张图片，index从0开始；


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

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});


代码块激活字符: msl

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">gallery（图片轮播）</h1>
</header>
<div class="mui-content mui-active">
<h4>图文表格</h4>
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="http://placehold.it/400x300">
<div class="mui-media-body">文字说明1</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="http://placehold.it/400x300">
<div class="mui-media-body">文字说明2</div>
</a>
</li>
</ul>
<h4>图片轮播</h4>
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<h4>slider插件</h4>
<div class="mui-slider">
<div class="mui-slider-group">
<!--第一个内容区容器-->
<div class="mui-slider-item">
<!-- 具体内容 -->
</div>
<!--第二个内容区-->
<div class="mui-slider-item">
<!-- 具体内容 -->
</div>
</div>
</div>
</div>
</body>
</html>




4、icon(图标)

mui默认提供了手机App开发常用的字体图标，使用时，只需要在span节点上分别增加.mui-icon、.mui-icon-name两个类即可（name为图标名称，例如：weixin、weibo等），如下代码即可显示一个微信图标：

<span class="mui-icon mui-icon-weixin"></span>


代码块激活字符: micon

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">icon（图标）</h1>
</header>
<div class="mui-content mui-active">
<span class="mui-icon mui-icon-weixin"></span>
<span class="mui-icon mui-icon-qq"></span>
<span class="mui-icon mui-icon-circle"></span>
<span class="mui-icon mui-icon-help-filled"></span>
</div>
</body>
</html>




5、input（输入增强）

mui目前提供的输入增强包括：快速删除和语音输入两项功能。要删除输入框中的内容，使用输入法键盘上的删除按键，只能逐个删除字符，mui提供了快速删除能力，只需要在对应input控件上添加.mui-input-clear类，当input控件中有内容时，右侧会有一个删除图标，点击会清空当前input的内容；另外，为了方便快速输入，mui集成了HTML5+的语音输入，只需要在对应input控件上添加.mui-input-speech类，就会在该控件右侧显示一个语音输入的图标，点击会启用科大讯飞语音输入界面。

代码块激活字符: minput

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">input（输入表单）</h1>
</header>
<div class="mui-content mui-active">
<div class="mui-input-row">
<label>Input</label>
<input type="text" placeholder="普通输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
</div>
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="收索框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div>
</div>
</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航