您的位置：首页 > 产品设计 > UI/UE

WEUI应用，用JS封装常用信息—ActionSheet

2016-09-28 16:03 417 查看

一、这是未封装前的官方代码：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<link rel="stylesheet" href="style/weui.min.css"/>
<link rel="stylesheet" href="example/example.css"/>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).on("click","#showActionSheet",function(){
actionSheetMenu();
});
function actionSheetMenu(){
var mask = $('#mask');
var weuiActionsheet = $('#weui_actionsheet');
weuiActionsheet.addClass('weui_actionsheet_toggle');
mask.show()
.focus()//加focus是为了触发一次页面的重排(reflow or layout thrashing),使mask的transition动画得以正常触发
.addClass('weui_fade_toggle').one('click', function () {
hideActionSheet(weuiActionsheet, mask);
});
$('#actionsheet_cancel').one('click', function () {
hideActionSheet(weuiActionsheet, mask);
});
mask.unbind('transitionend').unbind('webkitTransitionEnd');

function hideActionSheet(weuiActionsheet, mask) {
weuiActionsheet.removeClass('weui_actionsheet_toggle');
mask.removeClass('weui_fade_toggle');
mask.on('transitionend', function () {
mask.hide();
}).on('webkitTransitionEnd', function () {
mask.hide();
})
}
}
</script>
</head>
<body ontouchstart>
<div class="hd">
<h1 class="page_title">ActionSheet</h1>
</div>
<div class="bd spacing">
<a href="javascript:;" class="weui_btn weui_btn_primary" id="showActionSheet">点击上拉ActionSheet</a>
</div>
<div id="actionSheet_wrap">
<div class="weui_mask_transition" id="mask"></div>
<div class="weui_actionsheet" id="weui_actionsheet">
<div class="weui_actionsheet_menu">
<div class="weui_actionsheet_cell">示例菜单</div>
<div class="weui_actionsheet_cell">示例菜单</div>
<div class="weui_actionsheet_cell">示例菜单</div>
<div class="weui_actionsheet_cell">示例菜单</div>
</div>
<div class="weui_actionsheeet_action">
<div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
</div>
</div>

d413
</div>
</body>
</html>

二、封装后的官方代码：

（问题：不知道为什么点击后弹出菜单后再点完后，会弹出更多一次的alert，有高手请指点）

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<link rel="stylesheet" href="style/weui.min.css"/>
<link rel="stylesheet" href="example/example.css"/>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).on("click","#showActionSheet",function(){
actionSheetMenu({id:'aa',text:'菜单一'},{id:'bb',text:'菜单二'},{id:'cc',text:'菜单三'});

$('body').on('click','#aa',function(){
alert('菜单一');
$('#actionsheet_cancel').trigger('click');
});
$('body').on('click','#bb',function(){
alert('菜单二');
});
$('body').on('click','#cc',function(){
location.href="http://www.baidu.com";
});
});
function actionSheetMenu(){
if(!arguments.length){
return;
}
var menuHtml = '';
for(i=0;i<arguments.length;i++){
if(typeof(arguments[i]) != 'object' || !arguments[i].id || !arguments[i].text){
continue;
}
menuHtml += '<div class="weui_actionsheet_cell" id="' + arguments[i].id + '">' + arguments[i].text + '</div>';
}
if(!menuHtml){
return;
}
var actionSheetMenuStr;
actionSheetMenuStr = '\
<div id="actionSheet_wrap">\
<div class="weui_mask_transition" id="mask"></div>\
<div class="weui_actionsheet" id="weui_actionsheet">\
<div class="weui_actionsheet_menu">\
</div>\
<div class="weui_actionsheet_action">\
<div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>\
</div>\
</div>\
</div>\
';
if(!$('#actionSheet_wrap').length){
$('body').append(actionSheetMenuStr);
}
$('.weui_actionsheet_menu').html(menuHtml);
$('#mask').show().addClass('weui_fade_toggle');
$('#weui_actionsheet').addClass('weui_actionsheet_toggle');
$('#mask').unbind('transitionend').unbind('webkitTransitionEnd');
$('#mask , #actionsheet_cancel').on('click',function(){
$('#mask').removeClass('weui_fade_toggle');
$('#weui_actionsheet').removeClass('weui_actionsheet_toggle');
$('#mask').on('transitionend webkitTransitionEnd',function(e){
$('#mask').hide();
});
});
}
</script>
</head>
<body ontouchstart>

<div class="hd">
<h1 class="page_title">ActionSheet</h1>
</div>
<div class="bd spacing">
<a href="javascript:;" class="weui_btn weui_btn_primary" id="showActionSheet">点击上拉ActionSheet</a>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航