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

最新推荐文章于 2022-04-14 15:21:31 发布

zyytaiyame

最新推荐文章于 2022-04-14 15:21:31 发布

阅读量5k

点赞数

本文链接：https://blog.csdn.net/zyytaiyame/article/details/52691271

版权

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

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