基础布局

一、头部

核心：mui-bar mui-bar-nav

<header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">标题</h1>
</header>

二、主体部分

核心：mui-content

<div class="mui-content">
        <!--输入内容-->
</div>

三、tabbar

核心:mui-table-view

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

切换bar-item

<script type="text/javascript" charset="utf-8">
        mui.init();
        //设置默认打开首页显示的子页序号；
        var Index=0;
        //把子页的路径写在数组里面
        var subpages = ['html/home.html','html/message.html','html/setting.html','html/listTable.html'];
        //所有的plus-*方法写在mui.plusReady中或者后面。
        mui.plusReady(function(){
            //获取当前页面所属的Webview窗口对象
            var self = plus.webview.currentWebview();
            for (var i =0;i<4;i++) {
                //创建webview子界面
                var sub = plus.webview.create(
                    subpages[i], //子页url
                    subpages[i], //子页id
                    {
                            top: '45px',//设置距离顶部的距离
                            bottom: '50px'//设置距离底部的距离
                        }
                );
                //如不是我们设置的默认的子页则隐藏，否则添加到窗口中
               if (i != Index) {
                   sub.hide();
                    }
             //将webview对象填充到窗口
                 self.append(sub);
            }
            //当前激活选项
            var activeTab = subpages[Index],title=document.querySelector(".mui-title");
            //选项卡点击事件
            mui('.mui-bar-tab').on('tap','.mui-tab-item',function(){
                    //获取目标子页的id getAttribute() 方法返回指定属性名的属性值。
                 var targetTab = this.getAttribute('href');
                if (activeTab==targetTab) {
                    return;
                }
                //更换标题
                title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
                 //显示目标选项卡
                 plus.webview.show(targetTab);
                 //隐藏当前选项卡
                 plus.webview.hide(activeTab);
                 //更改当前活跃的选项卡
                 activeTab = targetTab;
            }) 
        })
</script>

四、折叠面板

核心:

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

代码激活:macc

五、button

核心:

mui-btn

代码激活:mbutton

六、轮播组件

1. 核心:

<div class="mui-slider">
          <div class="mui-slider-group">
            <!--第一个内容区容器-->
            <div class="mui-slider-item">
              <!-- 具体内容 -->
              <a href="#"><img src="../images/banner_1.jpg"/></a>
            </div>
            <!--第二个内容区-->
            <div class="mui-slider-item">
              <!-- 具体内容 -->
            </div>
          </div>
</div>

代码激活:mslider

2. 轮播圆点:

<!--圆点放置的位置默认和group平级-->
                <div class="mui-slider-indicator">
                    <!--默认第一个为选中状态-->
                    <div class="mui-indicator mui-active"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                  </div>

3. 自动轮播

mui.plusReady(function() {
            //自动轮播图片 获得slider插件对象
            var slider = mui('.mui-slider');
            slider.slider({
                interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0； 
            })
            //监听轮播图片轮播事件
            document.querySelector('.mui-slider').addEventListener('slide',function (e) {
                console.log("第"+e.detail.slideNumber+"张图片");
            })
        })

4. 切换到指定索引

function changeTo (index) {
            var slider = mui('.mui-slider');
            slider.slider().gotoItem(index);
        }

七、input表单

1.核心

<!--输入组-->
            <form class="mui-input-group topOffset">
                <!--输入项-->
                <div class="mui-input-row">
                    <label>输入项</label>
                    <input type="text" class="mui-input-clear" placeholder="请输入姓名">
                </div>

                <!--//按钮项目-->
                <div class="mui-button-row">
                    <button type="button" class="mui-btn mui-btn-primary">确认</button>
                    <button type="button" class="mui-btn mui-btn-danger">取消</button>
                </div>
            </form>

2.输入项快速删除:

<input type="text" class="mui-input-clear" placeholder="请输入姓名">

3.激活代码: minput

八：list列表

1.核心

            <!--正常列表-->
            <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            项目1
                        </a>
                        <!--数字角标-->
                         <span class="mui-badge mui-badge-green">22</span>
                    </li>
                </ul>

2.图文列表

<ul class="mui-table-view">
                        <li class="mui-table-view-cell mui-media">
                            <a href="javascript:;">
                                <img class="mui-media-object mui-pull-right" src="../images/banner_1.jpg">
                                <div class="mui-media-body">
                                    幸福
                                    <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                                </div>
                            </a>
                        </li>
</ul>

3. 激活代码:mlist

九. picker选择器

注意：引入mui.picker.css、mui.poppicker.css、mui.dtpicker.css、mui.picker.min.js

1.核心:

 var picker = new mui.PopPicker();
//修改上方按钮文字
var picker = new mui.PopPicker({
                    buttons: ['cancel', 'OK']
                });

2.设置数据:支持数组

picker.setData([{
                        value: 'xigua',
                        text: '西瓜'
                    },
                    {
                        value: 'lz',
                        text: '荔枝'
                    }
                ]);

3.显示并且获取点击回调

picker.show(function(selectItem) {
                    console.log(selectItem.length);
                    console.log(selectItem[0].value);
                    console.log(selectItem[0].text);
                })

4.设置默认值

picker.pickers[0].setSelectedIndex(2, 1000);

十.多级联动选择器

1.核心

//显示多级选择器
            function showMorePicker() {
                var picker = new mui.PopPicker({
                    layer: 2
                });
                picker.setData([{
                        value: '100000',
                        text: '北京市',
                        children: [{
                            value: '100001',
                            text: '东城区'
                        }]
                    },
                    {
                        value: '120000',
                        text: '天津市',
                        children: [{
                            value: '120101',
                            text: '和平区'
                        }, {
                            value: "120102",
                            text: "河东区"
                        }, {
                            value: "120104",
                            text: "南开区"
                        }]
                    },
                ]);
                picker.pickers[0].setSelectedIndex(1);
                picker.pickers[1].setSelectedIndex(1);
                picker.show(function(e) {
                    console.log(e);
                })
            }

十一 设置日期选择器

1.核心

//显示日期选择器
            function showPickerDate() {
                //一定要加上../css/mui.dtpicker.css引用
                //              var dtPicker = new mui.DtPicker();
                //              dtPicker.show(function(selectItems) {
                //                  console.log(selectItems.y); //{text: "2016",value: 2016} 
                //                  console.log(selectItems.m); //{text: "05",value: "05"} 
                //              })
                var dtPicker = new mui.DtPicker({
                    type: 'datetime',
                    beginYear: 2000,
                    endYear:2020 ,//设置结束日期 
//                  labels: ['Year', 'Mon', 'Day', 'Hour', 'min'], //设置默认标签区域提示语，默认为年月日分十秒 
//                  customData: {
//                      h: [{
//                              value: 'AM',
//                              text: 'AM'
//                          },
//                          {
//                              value: 'PM',
//                              text: 'PM'
//                          }
//                      ]
//                  } //时间/日期别名
                });
                //这里格式一定要是06-04
                dtPicker.setSelectedValue("2018-06-04 10:10");
                dtPicker.show(function(e) {
                    console.log(e);
                    mui.toast(e);
                })
            }

十二.复选框

1.核心

mui-input-row mui-checkbox

2.激活代码

mch

3.获取复选框的值

function getCheckBoxValue () {
                var checks = getCheckBox("check_box");
                if (checks.length<1) {
                    alert("请选择");
                }else{
                    mui.toast(checks);
                }
            }
            
            
            function getCheckBox (name) {
                console.log(name);
                var checkObj = document.getElementsByClassName(name);
                var checkVal = new Array();
                var k = 0;
                for (var i = 0; i < checkObj.length;i++) {
                    if (checkObj[i].checked) {
                        checkVal[k] = checkObj[i].value;
                        k++;
                    }
                }
                return checkVal;
            }

十三.单选框

1.核心

mui-radio

2.激活代码

mra

3.获取单选框的值

function getVals () {
                var res = getRadioRes('rds');
                if (res==null) {
                    alert("请选择");
                }else{
                    mui.toast(res);
                }
            }
//          获取单选框值
            function getRadioRes (className) {
                var rdsbj = document.getElementsByClassName(className);
                console.log(rdsbj);
                var checkVal = null;
                for (var i = 0;i<rdsbj.length;i++) {
                    if (rdsbj[i].checked) {
                        checkVal = rdsbj[i].value;
                    }
                }
                return checkVal;
            }