HTML5技术

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

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

//传入toggle参数,用户也无需关心当前是显示还是隐藏状态,mui会自动识别处理; mui ( '.mui-popover' ). popover ( 'toggle' ); 遮罩蒙版 在popover、侧滑菜单等界面,经常会用到蒙版遮罩;比如popover弹出后,除

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

        

遮罩蒙版

在popover、侧滑菜单等界面,经常会用到蒙版遮罩;比如popover弹出后,除popover控件外的其它区域都会遮罩一层蒙版,用户点击蒙版不会触发蒙版下方的逻辑,而会关闭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); }

 

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

网友点评