HTML5 极简的JS函数

页面初叶化

mui框架将广大职能配置都汇集在mui.init方法中,要使用某项功效,只必要在mui.init方法中完结对应参数配置即可,最近帮忙在mui.init方法中陈设的功效包涵:创制子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载。

在app开发中,若要使用HTML5+扩张api,必须等plusready事件产生后才能健康使用,mui将该事件封装成了mui.plusReady()办法,涉及到HTML伍+的api,建议都写在mui.plusReady方法中。如下为打字与印刷当前页面U奥迪Q5L的以身作则:

mui.plusReady(function(){
     console.log("当前页面URL:"+plus.webview.currentWebview().getURL());
});

          

创造子页面

在mobile
app开发进程中,常常遇上卡头卡尾的页面,此时若选用一些滚动,在android手提式有线话机上会出现滚动不通畅的题材;
mui的解决思路是:将索要滚动的区域通过单独的webview达成,完全使用原生滚动。具体做法则是:将指标页面分解为主页面和内容页面,主页面突显卡头卡尾区域,比如顶部导航、底部选项卡等;内容页面展现具体须要滚动的内容,然后在主页面中调用mui.init方法早先化内容页面。

mui.init({
    subpages:[{
      url:your-subpage-url,//子页面HTML地址,支持本地地址和网络地址
      id:your-subpage-id,//子页面标志
      styles:{
        top:subpage-top-position,//子页面顶部位置
        bottom:subpage-bottom-position,//子页面底部位置
        width:subpage-width,//子页面宽度,默认为100%
        height:subpage-height,//子页面高度,默认为100%
        ......
      },
      extras:{}//额外扩展参数
    }]
  });

参数表明:styles表示窗口属性,参考5+规范中的WebviewStyle;尤其注意,height和width两特性格,即便不安装,也默许按百分之百划算;由此若设置了top值为非”0px”的状态,建议还要安装bottom值,不然伍+
runtime依照中度百分之百计量,恐怕会造成页面真实底部地方超出显示屏范围的情景;left、right同理。

示例:Hello mui的首页其实便是index.html加list.html合并而成的,如下:

图片 1          

index.html

+

图片 2         

list.html

=

图片 3        

集合后的首页

index.html的功能正是展现固定导航,list.html呈现具体列表内容,列表项的滚动是在list.html所在webview中使用原生滚动,既保障了滚动条不会穿透顶部导航,符合app的体验,也保险了列表流畅滚动,化解了区域滚动卡顿的标题。
list.html正是index.html的子页面,创造代码相比简单,如下:

mui.init({
    subpages:[{
      url:'list.html',
      id:'list.html',
      styles:{
        top:'45px',//mui标题栏默认高度为45px;
        bottom:'0px'//默认为0px,可不定义;
      }
    }]
  });

          

开拓新页面

做web
app,一个无法避开的难点正是转场动画;web是依照链接创设的,从三个页面点击链接跳转到另三个页面,固然经过有刷新的打开药方式,用户要面对三个空手的页面等待;如果因此无刷新的法子,用Javascript移入DOM节点(常见的SPA化解方案),会遇上很高的属性挑衅:DOM节点繁多,页面太大,转场动画不通畅甚至导致浏览器崩溃;
mui的化解思路是:单webview只承载单个页面包车型客车dom,减弱dom层级及页面大小;页面切换使用原生动画,将最耗品质的1些交给原生完结.

mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{
      top:newpage-top-position,//新页面顶部位置
      bottom:newage-bottom-position,//新页面底部位置
      width:newpage-width,//新页面宽度,默认为100%
      height:newpage-height,//新页面高度,默认为100%
      ......
    },
    extras:{
      .....//自定义扩展参数,可以用来处理页面间传值
    },
    createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
    show:{
      autoShow:true,//页面loaded事件发生后自动显示,默认为true
      aniShow:animationType,//页面显示动画,默认为”slide-in-right“;
      duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
    },
    waiting:{
      autoShow:true,//自动显示等待框,默认为true
      title:'正在加载...',//等待对话框上显示的提示内容
      options:{
        width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度
        height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度
        ......
      }
    }
})

参数表明:

  • styles表示窗口参数,参考五+规范中的WebviewStyle;越发注意,height和width五个属性,尽管不设置,也私下认可按百分之百乘除;因而若设置了top值为非”0px”的情形,提出还要设置bottom值,不然五+
    runtime根据中度百分百总计,大概会促成页面真实尾部地点超出显示屏范围的情事;left、right同理。  
  • extras:新窗口的附加扩充参数,可用来处理页面间传值;例如:var webview = mui.openWindow({url:'info.html',extras:{name:'mui'}});console.log(webview.name);,会输出”mui”字符串;注意:扩大参数仅在开拓新窗口时有效,若目的窗口为预加载页面,则透过mui.openWindow方法打开时传递的extras参数无效。
  • createNew:是不是再次创立相同id的webview;为优化性能、防止app中重新创制webview,mui
    v1.柒.0起始增多createNew参数,默许为false;判断逻辑如下:若createNew为true,则不判断重复,每便都新建webview;若为fasle,则先总计当前App中是否已存在一样id的webview,若存在则间接显示;不然新创设并依照show参数执行显示逻辑;该参数恐怕引致的熏陶:若业务写在plusReady事件中,而plusReady事件仅第二回创设时会触发,则下次再一次经过mui.openWindow办法打开同样webview时,是不会重新触发plusReady事件的,此时可由此自定义事件触发;案例参考:http://ask.dcloud.net.cn/question/6514;  
  •    
    show表示窗口体现控制。autoShow:目的窗口loaded事件时有产生后,是不是自动展现;若目的页面为预加载页面,则该参数无效;aniShow表示页面展现动画,比如从左侧划入、从下侧划入等,具体可参考五+规范中的AnimationTypeShow  
  • waiting表示系统等待框;mui框架在打开新页面时等待框的处理逻辑为:展现等待框–>创制指标页面webview–>指标页面loaded事件发生–>关闭等待框;因此,唯有当新页面为新成立页面(webview)时,会展现等待框,不然若为预加载好的页面,则一向浮现目的页面,不会显得等待框。waiting中的参数:autoShow表示自动展现等待框,暗许为true,若为false,则不展现等待框;注意:若展现了等待框,但指标页面不活动突显,则需在目标页面中经过如下代码关闭等待框plus.nativeUI.closeWaiting();。title表示等待框上的提醒文字,options表示等待框展现参数,比如宽高、背景象、提醒文字颜色等,具体可参看伍+规范中的WaitingOption

示例1:Hello
mui中,点击首页右上角的图标,会打开关于页面,完成代码如下:

//tap为mui封装的单击事件,可参考手势事件章节
document.getElementById('info').addEventListener('tap', function() {
  //打开关于页面
  mui.openWindow({
    url: 'examples/info.html', 
    id:'info'
  });
});

因未有传到styles参数,故暗许全屏展现;也从不传来show参数,故使用slide-in-right动画,新页面从左侧滑入。

示例2:从A页面打开B页面,B页面为二个亟需从服务端加载的列表页面,若在B页面loaded事件发生时就将其出示出来,因服务器数据未有加载实现,列表页面为空,用户体验倒霉;可透过如下方式改良用户体验(最佳的用户体验应该是因此预加载的方法):第三步,B页面loaded事件时有产生后,不自行显示;

//A页面中打开B页面,设置show的autoShow为false,则B页面在其loaded事件发生后,不会自动显示;
mui.openWindow({
    url: 'B.html', 
    show:{
      autoShow:false
    }
  });

其次步,在B页面获取列表数据后,再关闭等待框、展现B页面

//B页面onload从服务器获取列表数据;
window.onload = function(){
  //从服务器获取数据
  ....
  //业务数据获取完毕,并已插入当前页面DOM;
  //注意:若为ajax请求,则需将如下代码放在处理完ajax响应数据之后;
  mui.plusReady(function(){
    //关闭等待框
    plus.nativeUI.closeWaiting();
    //显示当前页面
    mui.currentWebview.show();
  });
}

      

关门页面

mui框架将窗口关闭作用封装在mui.back办法中,具体举办逻辑是:

  • 若当前webview为预加载页面,则hide当前webview;
  • 否则,close当前webview;

在mui框架中,有三种操作会触发页面关闭(执行mui.back方法):

  • 点击包蕴.mui-action-back类的控件
  • 在页面上,向右神速滑动
  • Android手提式有线电话机按下back按键

hbuilder中敲mheader扭转的代码块,会自动生成带有重回导航箭头的标题栏,点击重返箭头可关闭当前页面,原因就是因为该重临箭头包罗.mui-action-back类,代码如下:

<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">标题</h1>
</header>

若希望在顶部导航栏之外的其余区域添加关闭页面包车型大巴控件,只必要在对应控件上添加.mui-action-back类即可,如下为二个停歇按钮示例:

<button type="button" class='mui-btn mui-btn-danger mui-action-back'>关闭</button>

mui框架封装的页面右滑关闭效能,暗中同意未启用,若要使用右滑关闭功效,须要在mui.init();措施中安装swipeBack参数,如下:

mui.init({
    swipeBack:true //启用右滑关闭功能
});

mui框架暗中同意会监听Android手提式有线电话机的back按键,然后实施页面关闭逻辑;
若不期望mui自动处理back按键,可通过如下格局关闭mui的back按键监听;

mui.init({
    keyEventBind: {
        backbutton: false  //关闭back按键监听
    }
});

除此而外上述三种操作外,也能够直接调用mui.back()主意,执行窗口关闭逻辑;

mui.back()仅处理窗口逻辑,若希望在窗口关闭在此之前再处理局地任何业务逻辑,则可将业务逻辑抽象成2个切实函数,然后注册为mui.init方法的beforeback参数;beforeback的履行逻辑为:

  • 施行beforeback参数对应的函数若重回false,则不再履行mui.back()方法;
  • 不然(重返true或无重回值),继续执行mui.back()方法;

演示:从列表打开详情页面,从详情页面再回去后愿意刷新列表界面,此时可登记beforeback参数,然后通过自定义事件通报列表页面刷新数据,示例代码如下:

mui.init({
    beforeback: function(){
        //获得列表界面的webview
        var list = plus.webview.getWebviewById('list');
        //触发列表界面的自定义事件(refresh),从而进行数据刷新
        mui.fire(list,'refresh');
        //返回true,继续页面关闭逻辑
        return true;
    }
});

小心:beforeback的实践回来必须是一路的(阻塞情势),若使用nativeUI那种异步js(非阻塞形式),则可能会现出意外的结果;比如:通过plus.nativeUI.confirm()弹出肯定框,恐怕用户并未有选取,页面已经回来了(beforeback同步施行达成,无再次来到值,继续执行mui.back()办法,nativeUI不会阻塞js进程):在那种气象下,若要自定义业务逻辑,就须要复写mui.back方式了;如下为1个自定义示例,每趟都急需用户确认后,才会关闭当前页面

//备份mui.back,mui.back已将窗口关闭逻辑封装的比较完善(预加载及父子窗口),因此最好复用mui.back
var old_back = mui.back;
mui.back = function(){
  var btn = ["确定","取消"];
  mui.confirm('确认关闭当前窗口?','Hello MUI',btn,function(e){
    if(e.index==0){
        //执行mui封装好的窗口关闭逻辑;
        old_back();
    }
  });
}

注意:自定义关闭逻辑时,一定要重写mui.back,无法大致通过add伊芙ntListener扩张back按键监听,
因为add伊夫ntListener只会增多新的进行逻辑,老的监听逻辑依旧会履行;

      

Ajax

mui框架根据htm伍plus的XMLHttpRequest,封装了常用的Ajax函数,帮助GET、POST请求格局,支持回到json、xml、html、text、script数据类型;
本着极简的规划原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()四个措施。

mui.ajax()方法通过HTTP请求加载远程数据,是mui框架底层Ajax的兑现格局,使用情势:mui.ajax(url[,setting]),当中url表示请求发送的靶子地方,setting是一个json对象,扶助的参数首要包罗:

参数 类型 描述
data Object 发送到服务器的数据,可以是json对象或字符串
dataType String 预期服务器返回的数据类型;如果不指定,mui将自动根据HTTP包的MIME头信息自动判断;支持设置的dataType可选值:

  • "xml": 返回XML文档
  • "html": 返回纯文本HTML信息;
  • "script": 返回纯文本JavaScript代码
  • "json": 返回JSON数据
  • "text": 返回纯文本字符串
error Function 请求失败时触发的函数,该函数接收三个参数:

  • xhr:xhr实例对象,类型是XMLHttpRequest
  • type:错误描述,类型是String,可取值除了’null’外,其它可能值:"timeout", "error", "abort", "parsererror"
  • errorThrown:可捕获的异常对象,类型是String
success Function 请求成功时触发的回调函数,该函数接收三个参数:

  • data:服务器返回的响应数据,类型可以是json对象、xml对象、字符串等;
  • textStatus:状态描述,参数类型是String,默认值为’success’
  • xhr:xhr实例对象,类型是XMLHttpRequest
timeout Number 请求超时时间(毫秒),默认值为0,表示永不超时;若超过设置的超时时间(非0的情况),依然未收到服务器响应,则触发error回调
type String 请求方式,目前仅支持’GET’和’POST’,默认为’GET’方式

代码示例:如下为通过post格局向某服务器发送鉴权登录的代码片段

mui.ajax('http://server-name/login.php',{
    data:{
        username:'username',
        password:'password'
    },
    dataType:'json',//服务器返回json格式数据
    type:'post',//HTTP请求类型
    timeout:10000,//超时时间设置为10秒;
    success:function(data){
        //服务器返回响应,根据响应结果,分析是否登录成功;
        ...
    },
    error:function(xhr,type,errorThrown){
        //异常处理;
        console.log(type);
    }
});

mui.post()主意是对mui.ajax()的一个简化方法,直接动用POST请求方式向服务器发送数据、且不处理timeout和那2个(若需处理相当及超时,请使用mui.ajax()措施),使用办法:
mui.post(url[,data][,success][,dataType]),如上登录鉴权代码换到mui.post()后,代码更为简单,如下:

mui.post('http://server-name/login.php',{
        username:'username',
        password:'password'
    },function(data){
        //服务器返回响应,根据响应结果,分析是否登录成功;
        ...
    },'json'
);

mui.get()方法和mui.post()艺术类似,只可是是一贯动用GET请求格局向服务器发送数据、且不处理timeout和分外(若需处理非凡及超时,请使用mui.ajax()措施),使用方法:
mui.get(url[,data][,success][,dataType]),如下为得到某服务器新闻列表的代码片段,服务器以json格式重临数据列表

mui.get('http://server-name/list.php',{category:'news'},function(data){
        //获得服务器响应
        ...
    },'json'
);

如上mui.get()主意和如下mui.ajax()艺术效果是一律的:

 

mui.ajax('http://server-name/list.php',{
    data:{
        category:'news'
    },
    dataType:'json',//服务器返回json格式数据
    type:'get',//HTTP请求类型
    success:function(data){
        //获得服务器响应
        ...
    }
});

mui.getJSON()方法是在mui.get()主意基础上的更进一步简化,限定重临json格式的数量,别的参数和mui.get()方式一致,使用格局:
mui.get(url[,data][,success]),如上获得音讯列表的代码换来mui.getJSON()措施后,更为简单,如下:

mui.getJSON('http://server-name/list.php',{category:'news'},function(data){
        //获得服务器响应
        ...
    }
);

          

手势事件

在开发活动端的应用时,会用到很多的手势操作,比如滑动、长按等,为了便于开放者火速集成那么些手势,mui内置了常用的手势事件,近来接济的手势事件见如下列表:

分类

参数

描述

点击

tap

单击显示器

doubletap

双击显示屏

长按

longtap

长按显示器

hold

按住显示器

release

相差荧屏

滑动

swipeleft

向左滑动

swiperight

向右滑动

swipeup

前进滑动

swipedown

向下滑动

拖动

dragstart

开端拖动

drag

拖动中

dragend

拖动截止

      

手势事件配置

根据使用频率,mui暗中认可会监听部分手势事件,如点击、滑动事件;为了支付出更高品质的moble
App,mui援助用户根据实际业务要求,通过mui.init方法中的gestureConfig参数,配置具体须求监听的手势事件,。

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开关

事件监听

同标准click事件相同,上述手势事件帮衬添加到任意DOM对象上,如下为1个演示:

elem.addEventListener("swipeleft",function(){
     console.log("你正在向左滑动");
});

        

预加载

所谓的预加载技术便是在用户并未触发页面跳转时,提前创立指标页面,这样当用户跳转时,就足以立刻开始展览页面切换,节省创造新页面包车型地铁小时,提高app使用体验。mui提供二种情势贯彻页面预加载。

方法一:通过mui.init方法中的preloadPages参数举办配置.

mui.init({
  preloadPages:[
    {
      url:prelaod-page-url,
      id:preload-page-id,
      styles:{},//窗口参数
      extras:{},//自定义扩展参数
      subpages:[{},{}]//预加载页面的子页面
    }
  ]
});

该种方案使用简易、可预加载多个页面,但不会回去预加载各种页面包车型客车引用,若要获得对应webview引用,还要求通过plus.webview.getWebviewById措施得到;此外,因为mui.init是异步执行,执行完mui.init方法后随即获得对应webview引用,恐怕会破产,例如如下代码:    

mui.init({
  preloadPages:[
    {
      url:'list.html',
      id:'list'
    }
  ]
});
var list = plus.webview.getWebviewByid('list');//这里可能返回空;

主意二:通过mui.preload方法预加载.

var page = mui.preload({
    url:new-page-url,
    id:new-page-id,//默认使用当前页面的url作为id
    styles:{},//窗口参数
    extras:{}//自定义扩展参数
});

通过mui.preload()方式预加载,可眼看重返对应webview的引用,但二次仅能预加载贰个页面;若需加载多个webview,则需数次调用mui.preload()方法;

如上三种方案,各有高低,需根据具体作业场景灵活选取;

        

下拉刷新

       
为促成下拉刷新成效,大多H5框架都以透过DIV模拟下拉回弹动画,在低端android手提式有线话机上,DIV动画常常出现卡顿现象(尤其是图像和文字列表的境况);        
mui通过双webview化解这么些DIV的拖动流畅度难题;拖动时,拖动的不是div,而是3个完好无缺的webview(子webview),回弹动画使用原生动画;在iOS平台,H五的卡通片已经比较流畅,故照旧采取H5方案。五个平台完结虽有差别,但mui经过包装,可采取壹套代码实现下拉刷新。

主页面内容比较简单,只需求创制子页面即可:

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

内容页面需遵从如下DOM结构创设:

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

    </ul>
  </div>
</div>

说不上,通过mui.init方法中pullRefresh参数配置下拉刷新各项参数,如下:

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

提及底,依据具体作业编写刷新函数,要求注意的是,加载完新数据后,需求执行endPulldownToRefresh()方法;

function pullfresh-function() {
     //业务逻辑代码,比如通过ajax从服务器获取新数据;
     ......
     //注意,加载完新数据后,必须执行如下代码,注意:若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后
     mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
}

        

上拉加载

mui的上拉加载达成相比较简单,检查评定五+
runtime提供的滚动条滚动到底事件(plusscrollbottom),展现“正在加载”提示–>起初加载业务数据–>隐藏”正在加载”提醒。使用办法接近下拉刷新,首先、通过mui.init方法中pullRefresh参数配置上拉加载各项参数,如下:

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

说不上,依照实际业务编写加载函数,需求注意的是,加载完新数据后,供给执行endPullupToRefresh()方法;

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

注意:  

  • 因为使用的是滚动到底事件,因而若当前页面内容过少,未有滚动条的话,就不会接触上拉加载
  • 一再上拉加载后,若已未有更加多数据可加载时,调用this.endPullupToRefresh(true);,之后滚动条滚动到底时,将不再显得“上拉展现越来越多”的指示语,而显示“未有更加多数据了”的升迁语;
  • 若实际业务中,有重新触发上拉加载的要求(比如当前项目已无更加多数据,但切换成别的2个项目后,应支持继续上拉加载),此时调用上拉加载的重置函数即可,如下代码:

 

//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数;
mui('#pullup-container').pullRefresh().refresh(true);

        

输入增强

mui如今提供的输入增强包蕴:快速删除和语音输入两项职能。要刨除输入框中的始末,使用输入法键盘上的删减按键,只好各种删除字符,mui提供了快速删除能力,只供给在对应input控件上添加.mui-input-clear类,当input控件中有内容时,左边会有三个刨除图标,点击会清空当前input的剧情;此外,为了有利于快速输入,mui集成了HTML5+的语音输入,只须要在对应input控件上添加.mui-input-speech类,就会在该控件右边显示八个语音输入的图标,点击会启用中国科学技术大学讯飞语音输入界面。

        

开关事件

mui提供了开关控件样式,点击滑动三种手势都得以对开关控件举行操作,在开关控件实行切换时,会触发toggle事件,通过事件的detail.isActive属性能够断定当前开关状态。可透过监听toggle事件,在开关心换时实施一定业务逻辑。如下为使用示例:

document.getElementById("mySwitch").addEventListener("toggle",function(event){
  if(event.detail.isActive){
    console.log("你启动了开关");
  }else{
    console.log("你关闭了开关");  
  }
})

若要获妥贴前开关状态,可由此判断当前开关控件是或不是带有.mui-active类来完结,若包含,则为开拓状态,否则即为关闭状态;如下为代码示例:

var isActive = document.getElementById("mySwitch").classList.contains("mui-active");
if(isActive){
  console.log("打开状态");
}else{
  console.log("关闭状态");  
}

若使用js打开、关闭开关控件,可使用switch插件的toggle()办法,如下为示范代码:

mui("#mySwitch").switch().toggle();

          

slide事件

mui提供了图片轮播、可拖动式图像和文字表格、可拖动式选项卡、左右滑行玖宫格组件,这几个零件都用到了mui框架的slide插件,有较多共同点。首先,Dom内容结构基本相同,都无法不有3个.mui-slider的父容器;其次,当拖动切换呈现内容时,均会触发slide事件(可拖动式选项卡在点击选项卡标题时,也会触发slide事件),通过该事件的detail.slideNumber参数能够赢妥贴前来得项的目录(第三项目录为0,第三项为1,以此类推),利用该事件,可在显示内容切换时,动态处理局地作业逻辑。

1般来说为2个可拖动式选项卡示例,为拉长页面加载速度,页面加载时,仅显示第一个选项卡的剧情,第一、第一选项卡内容为空。

<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"></div>
      <!--第三个选项卡内容区,页面加载时为空-->
      <div id="item3" class="mui-slider-item mui-control-content"></div>
    </div>
  </div>

当切换来第壹、第4个选项卡时,再动态获取相应内容展开始展览示:

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

图表轮播、可拖动式图像和文字表格等均可依据同等办法监听内容变更,比如大家能够在图纸轮播界面显示当前正值看的是第几张图纸:

document.querySelector('.mui-slider').addEventListener('slide', function(event) {
  //注意slideNumber是从0开始的;
  document.getElementById("info").innerText = "你正在看第"+(event.detail.slideNumber+1)+"张图片";
});

          

自定义事件

用户支出应用中会多量用到事件成效。除了浏览器内置的事件及mui框架内置的风浪(比如手势事件)外,mui同时扶助用户触发和绑定自定义事件。通过自定义事件,用户能够轻松完结页面间数据传递。

监听自定义事件

添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,如下:

window.addEventListener('customEvent',function(event){
  //通过event.detail可获得传递过来的参数内容
  ....
});

触发自定义事件

因而mui.fire方法可触发目的窗口的自定义事件:

mui.fire(targetPage,'customEvent',{
  //自定义事件参数
});

示例:一经如下场景:从新闻列表页面进入新闻详情页面,新闻详情页面为共用页面,通过传递新闻ID通告详情页面要求展现具体哪些新闻,详情页面再动态向服务器请求数据,mui要完毕类似须要可通过如下步骤达成:

  •     在列表页面中预加载详情页面(借使为detail.html)  
  •    
    列表页面在点击消息标题时,首先,获得该音信id,触发详情页面包车型大巴newsId事件,并将消息id作为事件参数字传送递过去;然后再打开详情页面;  
  • 详情页面监听newsId自定义事件

 

列表页面代码如下:

//初始化预加载详情页面
mui.init({
  preloadPages:[{
    id:'detail.html',
    url:'detail.html'           
  }
  ]
});

var detailPage = null;
//添加列表项的点击事件
mui('.mui-content').on('tap', 'a', function(e) {
  var id = this.getAttribute('id');
  //获得详情页面
  if(!detailPage){
    detailPage = plus.webview.getWebviewById('detail.html');
  }
  //触发详情页面的newsId事件
  mui.fire(detailPage,'newsId',{
    id:id
  });
//打开详情页面          
  mui.openWindow({
    id:'detail.html'
  });
});

端详页面代码如下:

//添加newId自定义事件监听
window.addEventListener('newsId',function(event){
  //获得事件参数
  var id = event.detail.id;
  //根据id向服务器请求新闻详情
  .....
});

      

图形轮播

mui框架内置了图片轮播插件,通过该插件封装的JS
API,用户能够设定是还是不是自动轮播及轮播周期,如下为代码示例:

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

为此若希望图片轮播不要自动播放,而是用户手动滑动才切换,只必要通过如上海艺术剧场术,将slideshowDelay参数设为0即可。

若要跳转到第x张图片,则能够利用图片轮播插件的gotoItem方法,例如:

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider().gotoItem(index);//跳转到第index张图片,index从0开始;

图形轮播涉及的别的二个标题:是或不是扶助循环播放,比如有1、二、三、4肆张图纸,从第2张图片起,依次向左滑动切换图片,当切换成第伍张图纸时,继续向左滑动,接下去会有二种作用:  

  • 支撑循环:左滑,直接切换来第2张图纸;
  • 不接济循环:左滑,无反应,继续展现第四张图纸,用户若要展现第三张图片,必须再三再四向右滑动切换成第2张图纸;

 
当突显第3张图片时,继续右滑是还是不是出示第伍张图纸,是千篇1律难点;那么些题指标贯彻必要通过.mui-slider-loop类及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类,同时须要再一次增添贰张图纸,图片顺序变为:肆、一、二、三、四、一,代码示例如下:

<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>

注意:mui框架会暗许初步化当前页面包车型大巴图纸轮播组件;若轮播组件内容为js动态生成时(比如通过ajax动态获取的经营销售消息),则须求在动态DOM生成后,手动调用图片轮播的初始化方法;代码如下:  

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

      

侧滑导航

mui提供了两种侧滑导航达成:webview形式和div形式,三种方式各有上下,适用于差别的情形。

webview模式

主页面和菜单内容在差别的webview中,七个页面依据内容供给分别组织DOM结构,mui对其DOM结构无特殊须要,故其有如下优点:

  • 食谱内容是单独的webview,故可被八个页面复用;
  • 食谱内容在单独的webview中,菜单区域的轮转不影响主界面,故可选拔原生滚动,滚动更为流畅;

壹派,webview形式也有其症结:

  • 不补助拖入手势(跟手扶拖拉机动);
  • 主页面、菜单不一致webview落成,由此若需交互(如:点击菜单触发主页面内容变更),需选拔自定义事件实现跨webview通讯;

div模式

   
主页面和菜单内容在同2个webview下,嵌套在特定协会的div中,通过div的移位动画模拟菜单移动;故该方式有如下优点:   

  • 匡助拖动手势(跟手扶拖拉机动);
  • 主页面、菜单在三个页面中,可通过JS轻松达成双方相互(如:点击菜单触发主页面内容变更),未有跨webview通信的烦恼;

壹边,div格局也有其缺点:

  • 不支持菜单内容在多页面包车型客车复用,需各样页面都浮动对应的食谱节点;
  • 主界面和菜单内容的滚动互不影响,由此会动用div区域滚动,在低端Android手提式有线电话机且滚动内容较多时,大概会稍显卡顿;

div形式援救不相同的卡通效果,每一种动画效果需遵循不一样的DOM构造;下边大家以右滑菜单为例(左滑菜单仅需将菜单父节点上的mui-off-canvas-left换成mui-off-canvas-right即可),表达每一种动画对应的DOM结构。

动画片1:主界面移动、菜单不动

<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
  <!-- 菜单容器 -->
  <aside class="mui-off-canvas-left">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 菜单具体展示内容 -->
        ...
      <div>
    </div>
  </aside>
  <!-- 主页面容器 -->
  <div class="mui-inner-wrap">
    <!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav">
      <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
      <h1 class="mui-title">标题</h1>
    </header>
    <div class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 主界面具体展示内容 -->
        ...
      </div>
    </div>  
  </div>
</div>

动画片二:主界面不动、菜单移动  

该种动画须求的DOM结构和动画壹的DOM结构基本相同,唯一差别便是需在侧滑导航根容器class上平添几个mui-slide-in

卡通3:主界面、菜单同时活动  

该种动画须要的DOM结构较新鲜,需将菜单容器放在主页面容器之下

<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
  <!-- 主页面容器 -->
  <div class="mui-inner-wrap">
     <!-- 菜单容器 -->
    <aside class="mui-off-canvas-left">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <!-- 菜单具体展示内容 -->
          ...
        <div>
      </div>
    </aside>
    <!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav">
      <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
      <h1 class="mui-title">标题</h1>
    </header>
    <!-- 主页面内容容器 -->
    <div class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 主界面具体展示内容 -->
        ...
      </div>
    </div>  
  </div>
</div>

mui帮助三种艺术展现div方式的侧滑菜单:1、在主界面向右拖动(drag);二、点击含有mui-action-menu类的控件;三、Android手提式有线电话机按menu键;肆、通过JS
API触发,如下:

mui('.mui-off-canvas-wrap').offCanvas('show');

平等,mui接济各类办法关闭div情势的侧滑菜单:一、在手提式无线电话机荧屏上恣意位置向左拖动(drag);2、点击主界面内任意地方;三、Android手提式有线电话机按menu键;四、Android手提式有线电电话机按back键;伍、通过JS
API触发,如下:

mui('.mui-off-canvas-wrap').offCanvas('close');

      

弹出菜谱

mui框架内置了弹出菜谱插件,弹出菜单突显内容不限,但无法不包裹在1个含.mui-popover类的div中,如下即为贰个弹出菜单内容:

<div id="popover" class="mui-popover">
  <ul class="mui-table-view">
    <li class="mui-table-view-cell"><a href="#">Item1</a></li>
    <li class="mui-table-view-cell"><a href="#">Item2</a></li>
    <li class="mui-table-view-cell"><a href="#">Item3</a></li>
    <li class="mui-table-view-cell"><a href="#">Item4</a></li>
    <li class="mui-table-view-cell"><a href="#">Item5</a></li>
  </ul>
</div>

要彰显、隐藏如上菜单,mui推荐使用锚点格局,例如:

<a href="#popover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>

点击如上定义的按钮,即可显示弹出菜谱,再度点击弹出菜谱之外的别样区域,均可关闭弹出菜谱;这种应用办法最佳容易。

若希望经过js的格局决定弹出菜谱,则透过如下叁个措施即可:

//传入toggle参数,用户也无需关心当前是显示还是隐藏状态,mui会自动识别处理;
mui('.mui-popover').popover('toggle');

        

遮罩蒙版

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

遮罩蒙版常用的操作包罗:创建、展现、关闭,如下代码:

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

注意:关门遮罩仅会倒闭,不会销毁;关闭之后方可另行调用mask.show();开辟遮罩;

mui暗中认可的蒙版遮罩使用.mui-backdrop类定义(如下代码),若需自定义遮罩效果,只需覆盖定义.mui-backdrop即可;

.mui-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
    background-color: rgba(0,0,0,.3);
}

相关文章