UI组件

<h3 id="accordion折叠面板">accordion(折叠面板)

    面板1子内容

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

  • 数字角标一般和其他控件(列表,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类即可

  • 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即可变成蓝色按钮

      
  • 默认按钮有底色,运行效果如下:

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

      
  • 运行效果如下:

属性名                       作用
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

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

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

      
  • 卡片页眉及内容区,均支持放置图片; 页眉放置图片的话,需要在.mui-card-header节点上增加.mui-card-media类,然后设置一张图片做背景图即可,代码如下:

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

      
    发表于 2016-06-30 15:30

  • 默认checkbox在右侧显示,若希望在左侧显示,只需增加.mui-left类即可,如下:

      
    checkbox左侧显示示例
  • 若要禁用checkbox,只需在checkbox上增加disabled属性即可;

组件名         作用  
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绘制的对话框</code></pre>

confirm

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

prompt

    .prompt( message,placeholder,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模式的对话框)
关闭所有对话框

  • DOM结构 默认不支持循环播放,DOM结构如下:

      

*若要支持循环,则需要在.mui-slider-group节点上增加.mui-slider-loop类,同时需要重复增加2张图片,图片顺序变为:4、1、2、3、4、1,代码示例如下:

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

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

相关文章

一:HBuilder打包https://jingyan.baidu.com/article/e3c78d...
如何将H5和WebApp加壳成apk、ipa  问题:已经做好的纯H5的...
史上最全最实用HBuilder快捷键大全 一、文件操作二、编辑操...
常用模拟器的端口夜神模拟器端口号:62001海马玩模拟器端口号...
---恢复内容开始---     ---恢复内容结束---
http://ask.dcloud.net.cn/question/28090后台自动运行,定期...