HTML5技术

HTML5 极简的JS函数 - zxh91989(6)

字号+ 作者:H5之家 来源:H5之家 2017-12-07 12:10 我要评论( )

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

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

        

上拉加载

mui的上拉加载实现比较简单,检测5+ 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); }

注意:  

 

//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事件

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5知识点:简析正则表达式 - 千千小助

    html5知识点:简析正则表达式 - 千千小助

    2017-12-02 08:02

  • html5知识点:CSS3新增选择器 - 千千小助

    html5知识点:CSS3新增选择器 - 千千小助

    2017-11-30 09:00

  • 推荐10个适合初学者的 HTML5 入门教程 - 赵一航

    推荐10个适合初学者的 HTML5 入门教程 - 赵一航

    2017-11-27 08:03

  • html5知识点:HTML5新特性 - 千千小助

    html5知识点:HTML5新特性 - 千千小助

    2017-11-24 18:00

网友点评