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

来源：互联网发布：java字符串换行连接编辑：程序博客网时间：2024/05/16 07:41

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

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

0 0