mui框架（二）

1.底部导航切换界面

HTML部分:

<nav class="mui-bar mui-bar-tab">
    <a id="defaultTab" class="mui-tab-item mui-active" href="a.html">
        <span class="mui-icon mui-icon-videocam"></span>
        <span class="mui-tab-label">社区</span>
    </a>
    <a class="mui-tab-item" href="b.html">
        <span class="mui-icon mui-icon-chatboxes"><span style="display: none;" class="mui-badge">1</span></span>
        <span class="mui-tab-label">群组</span>
    </a>
    <a class="mui-tab-item" href="c.html">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>

JavaScript部分:

//mui初始化
mui.init();
var subpages = ['a.html', 'b.html', 'c.html'];
var subpage_style = {
    top:'0px',
    bottom: '51px'
};
var aniShow = {};
 //创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function() {
    var self = plus.webview.currentWebview();
    for (var i = 0; i < subpages.length; i++) {
        var temp = {};
        var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
        if (i > 0) {
            sub.hide();
        }else{
            temp[subpages[i]] = "true";
            mui.extend(aniShow,temp);
        }
        self.append(sub);
    }
});
//当前激活选项
var activeTab = subpages[0];
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
    var targetTab = this.getAttribute('href');
    if (targetTab == activeTab) {
        return;
    }
    //显示目标选项卡
    //若为iOS平台或非首次显示，则直接显示
    if(mui.os.ios||aniShow[targetTab]){
        plus.webview.show(targetTab);
    }else{
    //否则，使用fade-in动画，且保存变量
        var temp = {};
        temp[targetTab] = "true";
        mui.extend(aniShow,temp);
        plus.webview.show(targetTab,"fade-in",300);
    }
    //隐藏当前;
    plus.webview.hide(activeTab);
    //更改当前活跃的选项卡
    activeTab = targetTab;
});
//自定义事件，模拟点击“首页选项卡”
document.addEventListener('gohome', function() {
    var defaultTab = document.getElementById("defaultTab");
    //模拟首页点击
    mui.trigger(defaultTab, 'tap');
    //切换选项卡高亮
    var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
    if (defaultTab !== current) {
        current.classList.remove('mui-active');
        defaultTab.classList.add('mui-active');
    }
});

2.自定义事件

监听自定义事件 - 目标页

window.addEventListener('shijian',function(event){
    //通过event.detail可获得传递过来的参数内容
    ....
    var name = event.detail.namel
    console.log(name);
    shijian();
})

触发自定义事件 - 本页

//首先获得目标页面的对象
var targetPage = plus.webview.getWebviewById('目标页面id');
mui.fire(targetPage,'shijian',{
    //自定义事件参数
    name:'dongyixueyuan'
});

3.页面预加载

所谓的预加载技术就是在用户尚未触发页面跳转时，提前创建目标页面，这样当用户跳转时，就可以立即进行页面切换，节省创建新页面的时间，提升app使用体验。mui提供两种方式实现页面预加载。

方式一：通过mui.init方法中的preloadPages参数进行配置

mui.init({  // 可同时加载一个或者多个界面
    preloadPages:[ //加载一个界面
    {
        url:'a.html',
        id:'a',
        styles:{},//窗口参数
        extras:{},//自定义扩展参数
        subpages:[{},{}]//预加载页面的子页面
    },{ // 可加载另外一个界面，不需要可直接删除
        url:'b.html',
        id:'b',
        styles:{},//窗口参数
        extras:{},//自定义扩展参数
        subpages:[{},{}]//预加载页面的子页面
    }
    ]
});

方式二：通过mui.preload方法预加载,一次只能预加载一个页面,若需加载多个webview，则需多次调用mui.preload()方法；

mui.plusReady(function(){
    var productView = mui.preload({
        url: 'list.html',
        id: 'list',
    });
    console.log(productView); //获得预加载界面的对象
});

4.消息框

警告消息框

mui.alert('欢迎使用Hello 东翌学院','东翌学院',function(){
    alert('你刚关闭了警告框');
});

消息提示框

var btnArray = ['是','否'];
    mui.confirm('东翌学院是专业跨平台APP培训学院，赞？','Hello 东翌学院',btnArray,function(e){
    if(e.index==0){
        alert('点击了- 是');
        //自己的逻辑
    }else{
        alert('点击了- 否');
    }
}); 

输入对话框

var btnArray = ['确定','取消'];
    mui.prompt('请输入你对东翌学院的评语：','内容好','东翌学院',btnArray,function(e){
        if(e.index==0){
            alert('点击了 - 确认');
            var  value = e.value; // value 为输入的内容
        }else{
            alert('点击了 - 取消');
        }
});

自动消息对话框

mui.toast('显示内容');

日期选择框

//js里的月份 是从0月开始的，也就是说，js中的0月是我们1月
var dDate=new Date(); //默认显示的时间
dDate.setFullYear(2015,5,30);
var minDate=new Date(); //可选择的最小时间
minDate.setFullYear(2010,0,1);
var maxDate=new Date(); //课选择的最大的时间
maxDate.setFullYear(2016,11,31);
plus.nativeUI.pickDate( function(e) {
    var d=e.date;
    alert('您选择的日期是:'+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+ d.getDate());
},function(e){
    alert('您没有选择日期');
},{title:"请选择日期",date:dDate,minDate:minDate,maxDate:maxDate});

时间选择框

var dTime=new Date();
dTime.setHours(20,0); //设置默认时间
plus.nativeUI.pickTime(function(e){
    var d=e.date;
    alert("您选择的时间是："+d.getHours()+":"+d.getMinutes());
},function (e){
    alert('您没有选择时间');
},{title:"请选择时间",is24Hour:true,time:dTime});

5.原生模式ActionSheet

var btnArray = [{title:"分享到微信"},{title:"分享到新浪微博"},{title:"分享到搜狐微博"}]; //选择按钮  1 2 3
plus.nativeUI.actionSheet( {
    title:"分享到",
    cancel:"取消", //
    buttons:btnArray
}, function(e){
    var index = e.index; //
    alert(index);
    switch (index){
        case 1:
        //写自己的逻辑
        break;
        case 2:
        break;
    }
} );

6.下拉刷新

为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况）； 通过双webview解决这个DIV的拖动流畅度问题；拖动时，拖动的不是div，而是一个完整的webview（子webview），回弹动画使用原生动画；在iOS平台，H5的动画已经比较流畅，故依然使用H5方案。两个平台实现虽有差异，但经过封装，可使用一套代码实现下拉刷新。

第一步: 创建子页面，因为拖动的其实是个子页面的整体

mui.init({
    subpages:[{
    url:pullrefresh-subpage-url,//下拉刷新内容页面地址
    id:pullrefresh-subpage-id,//内容页面标志
     styles:{ top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算，若使用标准mui导航，顶部默认为48px； .....//其它参数定义
     }
    }]
}); 

第二步:内容页面需按照如下DOM结构构建

<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <!--数据列表-->
        <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell">1</li>
        </ul>
    </div>
</div>            

第三步:通过mui.init方法中pullRefresh参数配置下拉刷新各项参数

mui.init({
    pullRefresh : {
        container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
        down : {
            contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
            contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
            contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
            callback : fn //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
         } }
}); 

第四步:设置执行函数

function fn() {
    //业务逻辑代码，比如通过ajax从服务器获取新数据； ...... //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
    mui('#pullrefresh').pullRefresh().endPulldownToRefresh();  //这行代码会隐藏掉 正在加载... 容器
}

7.上拉加载

第一步，第二步 和下拉刷新的一样

第三步:通过mui.init方法中pullRefresh参数配置下拉刷新各项参数

mui.init({
    pullRefresh : {
        container:"#pullrefresh",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
        up : {
            contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
            contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
            callback : fn //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
        }
    }
}); 

第四步:设置执行函数

function fn() {
    //业务逻辑代码，比如通过ajax从服务器获取新数据； ...... //注意，加载完新数据后，必须执行如下代码，true表示没有更多数据了，
    两个注意事项： //1、若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后 //
    2、注意this的作用域，若存在匿名函数，需将this复制后使用
    var _this = this;
    _this.endPullupToRefresh(true|false);
}

8.上拉下拉整合

第一步，第二步和下拉刷新一样

第三步:在mui.init()内同时设置上拉加载和下拉刷新

mui.init({
    pullRefresh: {
        container: '#pullrefresh',
        down: {
            contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
            contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
            contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
            callback: downFn // 下拉执行函数
        },
        up: {
            contentrefresh: '正在加载...',
            callback: upFn // 上拉执行函数
        }
    }
}); 

注意: 给获取元素加onclick点击事件不行，需要加addEventListener自定义事件

9.手势

在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件，目前支持的手势事件见如下列表：

分类    参数描述

点击     tap            单击屏幕

doubletap          双击屏幕

长按    longtap          长按屏幕

hold            按住屏幕

release           离开屏幕

滑动   swipeleft          向左滑动

swiperight          向右滑动

swipeup            向上滑动

swipedown           向下滑动

拖动   dragstart           开始拖动

drag              拖动中

dragend            拖动结束

mui.init({
    gestureConfig:{
        tap: true, //默认为true
        doubletap: true, //默认为false
        longtap: true, //默认为false
        swipe: true, //默认为true
        drag: true, //默认为true
        hold:false,//默认为false，不监听
        release:false//默认为false，不监听
    }
});

注意:dragstart、drag、dragend共用drag开关，swipeleft、swiperight、swipeup、swipedown共用swipe开关

你要监听的对象.addEventListener("swipeleft",function(){
    console.log("你正在向左滑动");
}); 

10.遮罩

在popover、侧滑菜单等界面，经常会用到蒙版遮罩；比如popover弹出后，除popover控件外的其它区域都会遮罩一层蒙版，用户点击蒙版不会触发蒙版下方的逻辑，而会关闭popover同时关闭蒙版；再比如侧滑菜单界面，菜单划出后，除侧滑菜单之外的其它区域都会遮罩一层蒙版，用户点击蒙版会关闭侧滑菜单同时关闭蒙版。

遮罩蒙版常用的操作包括：创建、显示、关闭，如下代码：

var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调；
mask.show();//显示遮罩
mask.close();//关闭遮罩

遮罩css样式:   .mui-backdrop

11.滑动导航选择

mui提供了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格组件，这些组件都用到了mui框架的slide插件，有较多共同点。首先，Dom内容构造基本相同，都必须有一个.mui-slider的父容器；其次，当拖动切换显示内容时，均会触发slide事件（可拖动式选项卡在点击选项卡标题时，也会触发slide事件），通过该事件的detail.slideNumber参数可以获得当前显示项的索引（第一项索引为0，第二项为1，以此类推），利用该事件，可在显示内容切换时，动态处理一些业务逻辑。

HTML部分:

<div class="mui-slider">
    <!--选项卡标题区-->
    <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
      <a class="mui-control-item" href="#item1">待办公文</a>
      <a class="mui-control-item" href="#item2">已办公文</a>
      <a class="mui-control-item" href="#item3">全部公文</a>
    </div>
    <div class="mui-slider-progress-bar mui-col-xs-4"></div>
    <div class="mui-slider-group">
      <!--第一个选项卡内容区-->
      <div id="item1" class="mui-slider-item mui-control-content mui-active">
        <ul class="mui-table-view">
          <li class="mui-table-view-cell">待办公文1</li>
          <li class="mui-table-view-cell">待办公文2</li>
          <li class="mui-table-view-cell">待办公文3</li>
        </ul>
      </div>
      <!--第二个选项卡内容区，页面加载时为空-->
      <div id="item2" class="mui-slider-item mui-control-content"><ul class="mui-table-view">
          <li class="mui-table-view-cell">待办公文1</li>
          <li class="mui-table-view-cell">待办公文2</li>
          <li class="mui-table-view-cell">待办公文3</li>
        </ul></div>
      <!--第三个选项卡内容区，页面加载时为空-->
      <div id="item3" class="mui-slider-item mui-control-content"></div>
    </div>
</div>

JavaScript部分:

var item2Show = false,item3Show = false;//子选项卡是否显示标志
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
  if (event.detail.slideNumber === 1&&!item2Show) {
    //切换到第二个选项卡
    //根据具体业务，动态获得第二个选项卡内容；
    var content = 'er';
    //显示内容
    document.getElementById("item2").innerHTML = content;
    //改变标志位，下次直接显示
    item2Show = true;
  } else if (event.detail.slideNumber === 2&&!item3Show) {
    //切换到第三个选项卡
    //根据具体业务，动态获得第三个选项卡内容；
    var content = 'san';
    //显示内容
    document.getElementById("item3").innerHTML = content;
    //改变标志位，下次直接显示
    item3Show = true;
  }
});

12.图片轮播

1, 支持循环

HTML部分:

<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="data:images/2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="data:images/0.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="data:images/1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="data:images/2.jpg" /></a></div>
    <!--支持循环，需要重复图片节点-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="data:images/0.jpg" /></a></div>
  </div>
</div>

2, 不支持循环 和循环不同的是没有再第一条和最后一条后面加入内容

HTML部分:

<div class="mui-slider">
  <div class="mui-slider-group">
    <div class="mui-slider-item"><a href="#"><img src="data:images/0.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="data:images/1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="data:images/2.jpg" /></a></div>
    <!--<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>-->
  </div>
</div>

JavaScript部分相同:

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
  //注意slideNumber是从0开始的；
  alert("你正在看第"+(event.detail.slideNumber+1)+"张图片");
});

注意:如果ajax获得图片后，需要在写入图片以后，需要从新调用一下

gallery.slider();