UI组件

accordion(折叠面板)

<ul class="mui-table-view"> 
    <li class="mui-table-view-cell mui-collapse">
        <a class="mui-navigate-right" href="#">面板1</a>
        <div class="mui-collapse-content">
            <p>面板1子内容</p>
        </div>
    </li>
</ul>

可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，只需要在包含.mui-collapse类的li节点上，增加.mui-active类即可。

actionsheet(操作表)

badge(数字角标)

数字角标一般和其他控件（列表，9宫格，选项卡等）配合使用，用于进行数量的提示。
角标的核心类是.mui-badge，默认为实心灰色背景；
mui还内置了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标、
mui-badge 实心灰色
mui-badge-primary 蓝色
mui-badge-success 绿色
mui-badge-warning 黄色
mui-badge-danger 红色
mui-badge-purple 紫色
若无需底色，则增加.mui-badge-inverted类即可

button(按钮)

mui默认按钮为灰色，另外还提供了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮，五种色系对应五种场景，分别为primary、success、warning、danger、royal；使用.mui-btn类即可生成一个默认按钮，继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮，例如：通过.mui-btn-blue或.mui-btn-primary均可生成蓝色按钮；

普通按钮

在button节点上增加.mui-btn类，即可生成默认按钮；若需要其他颜色的按钮，则继续增加对应class即可，比如.mui-btn-blue即可变成蓝色按钮

  <button type="button" class="mui-btn">默认</button>
  <button type="button" class="mui-btn mui-btn-primary">蓝色</button>
  <button type="button" class="mui-btn mui-btn-success">绿色</button>
  <button type="button" class="mui-btn mui-btn-warning">黄色</button>
  <button type="button" class="mui-btn mui-btn-danger">红色</button>
  <button type="button" class="mui-btn mui-btn-royal">紫色</button>

默认按钮有底色，运行效果如下：

若希望无底色、有边框的按钮，仅需增加.mui-btn-outlined类即可，代码如下：

  <button type="button" class="mui-btn mui-btn-outlined">默认</button>
  <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝色</button>
  <button type="button" class="mui-btn mui-btn-success mui-btn-outlined">绿色</button>
  <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黄色</button>
  <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">红色</button>
  <button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫色</button>

运行效果如下：

加载按钮

属性名	                      作用
data-loading-text	             loading 状态显示的文案,默认为: loading
data-loading-icon	             loading 状态显示的icon,默认为mui-spinner或mui-spinner mui-spinner-white（根据按钮样式自动识别），为空表示不使用icon
data-loading-icon-position	     loading 状态显示的icon的位置,支持left/right默认left

cardview(卡片视图)

卡片视图常用于展现一段完整独立的信息，比如一篇文章的预览图、作者信息、点赞数量等

使用mui-card类即可生成一个卡片容器，卡片视图主要有页眉、内容区、页脚三部分组成，结构如下：

  <div class="mui-card">
  	<!--页眉，放置标题-->
  	<div class="mui-card-header">页眉</div>
  	<!--内容区-->
  	<div class="mui-card-content">内容区</div>
  	<!--页脚，放置补充信息或支持的操作-->
  	<div class="mui-card-footer">页脚</div>
  </div>

卡片页眉及内容区，均支持放置图片；页眉放置图片的话，需要在.mui-card-header节点上增加.mui-card-media类，然后设置一张图片做背景图即可，代码如下：
```
  <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../images/cbd.jpg)"></div>
```

若希望在页眉放置更丰富的信息，比如头像、主标题、副标题，则需使用.mui-media-body类

  <div class="mui-card-header mui-card-media">
  	<img src="../images/logo.png" />
  	<div class="mui-media-body">
  		小M
  		<p>发表于 2016-06-30 15:30</p>
  	</div>
  </div>

checkbox(复选框)

默认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属性即可；

dialog(对话框)

组件名	        作用	
alert	     警告框	
confirm	     确认框	
prompt	     输入对话框	
toast	     消息提示框

mui v3.0 版本(含)以上的dialog控件支持换行（\n）显示

alert

	.alert( message, title, btnValue, callback [, type] )

	message
	Type: String
	提示对话框上显示的内容
	title
	Type: String
	提示对话框上显示的标题
	btnValue
	Type: String
	提示对话框上按钮显示的内容
	callback
	Type: Function
	提示对话框上关闭后的回调函数
	type
	Value: 'div'
	是否使用h5绘制的对话框

confirm

	.confirm( message, title, btnValue, callback [, type] )
	message
	Type: String
	提示对话框上显示的内容
	title
	Type: String
	提示对话框上显示的标题
	btnValue
	Type: Array
	提示对话框上按钮显示的内容
	callback
	Type: Function
	提示对话框上关闭后的回调函数
	type
	Value: 'div'
	是否使用h5绘制的对话框

prompt

	.prompt( message, placeholder, 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类下的样式

toast

.toast( message [,options])
message:'String' - 消息框显示的文字内容

  options: {JSON}  - 提示消息的参数

**options 参数需要mui v3.5+支持

参数               	说明	                                   说明
duration	    持续显示时间,默认值 short(2000ms)	        支持 整数值 和 String ,
														  String可选: long(3500ms),short(2000ms)
type	        强制使用mui消息框(div模式)	                'div'

 mui.toast('登陆成功',{ duration:'long', type:'div' })

closePopup

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

closePopups

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

gallery(图片轮播)

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>

*若要支持循环，则需要在.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>

JS Method

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

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

posted @ 2018-03-22 18:11 不完美的完美阅读(401) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

不完美的完美