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；
  });

                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!