WEUI应用，用JS封装常用信息提示的弹层—Msg

最新推荐文章于 2023-03-24 09:26:12 发布

zyytaiyame

最新推荐文章于 2023-03-24 09:26:12 发布

阅读量2.1k

点赞数 2

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

版权

WEUI应用，用JS封装常用信息提示的弹层—Msg

结果页通常来说可以认为进行一系列操作步骤后，作为流程结束的总结性页面。结果页的作用主要是告知用户操作处理结果以及必要的相关细节（可用于确认之前的操作是否有误）等信息；若该流程用于开启或关闭某些重要功能，可在结果页增加与该功能相关的描述性内容；除此之外，结果页也可以承载一些附加价值操作，例如提供抽奖、关注公众号等功能入口。

一、精简的MSG (实际就是最下面没有查看详情的文字链接)

<!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>   
$(function(){

    $('#showMsg').click(function(){
        weuiMsg('操作成功文字','内容详情可根据实际需要安排文字',function(){
           alert("这里放你想做的相应操作！");
           $('#weuiMsg').remove();
        });
     });

     function weuiMsg(title, desc, callback){
        var msgStr;
        msgStr = '\
           <div class="weui_msg" id="weuiMsg" style="display: none;">\
              <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>\
              <div class="weui_text_area">\
                  <h2 class="weui_msg_title">' + title + '</h2>\
                  <p class="weui_msg_desc">' + desc + '</p>\
              </div>\
              <div class="weui_opr_area">\
                  <p class="weui_btn_area">\
                     <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>\
                     <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>\
                  </p>\
              </div>\
           </div>\
        ';

           $('body').append(msgStr);
           $('#weuiMsg').fadeIn('fast');
           $('#weuiMsg .weui_btn_primary').on('click',function(){
               callback();   
           });
           $('#weuiMsg .weui_btn_default').on('click',function(){
               $('#weuiMsg').fadeOut('fast',function(){
                  $('#weuiMsg').remove(); 
               });
           });
     }

})
</script>

</head>
<body ontouchstart>

  <div class="bd">
     <h1 class="page_title">MSG</h1>
  </div>

  <div class="bd spacing">
     <div class="weui_cells">
        <div class="weui_cell">
            <button href="javascript:;" class="weui_btn weui_btn_primary" id="showMsg">点击弹出Msg简洁版</button>
        </div>  
     </div>
  </div>

</body>
</html>

二、完全的MSG (实际就是最下面包含有查看详情的文字链接)

<!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>   
$(function(){

    $('#showMsgFull').click(function(){
        weuiMsgAll('操作成功文字Full','内容详情可根据实际需要安排文字Full','查看详情','http://www.baidu.com',function(){
           alert("这里放你想做的相应操作Full！");
           $('#weuiMsgAll').remove();
        });
     });

     function weuiMsgAll(title, desc, extraText, extraLink, callback){
        var msgStr;
        msgStr = '\
           <div class="weui_msg" id="weuiMsgAll" style="display: none;">\
              <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>\
              <div class="weui_text_area">\
                  <h2 class="weui_msg_title">' + title + '</h2>\
                  <p class="weui_msg_desc">' + desc + '</p>\
              </div>\
              <div class="weui_opr_area">\
                  <p class="weui_btn_area">\
                     <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>\
                     <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>\
                  </p>\
              </div>\
              <div class="weui_extra_area">\
                  <a href="' + extraLink + '">' + extraText + '</a>\
              </div>\
           </div>\
        ';

           $('body').append(msgStr);
           $('#weuiMsgAll').fadeIn('fast');
           $('#weuiMsgAll .weui_btn_primary').on('click',function(){
               callback();   
           });
           $('#weuiMsgAll .weui_btn_default').on('click',function(){
               $('#weuiMsgAll').fadeOut('fast',function(){
                  $('#weuiMsgAll').remove(); 
               });
           });
     }

})
</script>

</head>
<body ontouchstart>

  <div class="bd">
     <h1 class="page_title">MSG</h1>
  </div>

  <div class="bd spacing">
     <div class="weui_cells">
        <div class="weui_cell">
            <button href="javascript:;" class="weui_btn weui_btn_primary" id="showMsgFull">点击弹出Msg完全版</button>
        </div>  
     </div>
  </div>

</body>
</html>

三、MSG整合简单和完全，统计调用，根据调用时的参数来定，三个参数是简单版，五个参数是完全版

<!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>   
$(function(){

    $('#showMsg').click(function(){
        weuiMsg('操作成功文字','内容详情可根据实际需要安排文字',function(){
           alert("这里放你想做的相应操作！");
           $('#weuiMsg').remove();
        });
     });

    $('#showMsgFull').click(function(){
        weuiMsg('操作成功FULL','内容详情可根据实际需要安排文字FULL',function(){
           alert("这里放你想做的相应操作FULL！");
           $('#weuiMsgFull').remove();
        },'查看详情','http://www.baidu.com');
    });

     function weuiMsg(title, desc, callback, extraText, extraLink){
        var msgStr, msgStrFull;
        msgStr = '\
           <div class="weui_msg" id="weuiMsg" style="display: none;">\
              <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>\
              <div class="weui_text_area">\
                  <h2 class="weui_msg_title">' + title + '</h2>\
                  <p class="weui_msg_desc">' + desc + '</p>\
              </div>\
              <div class="weui_opr_area">\
                  <p class="weui_btn_area">\
                     <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>\
                     <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>\
                  </p>\
              </div>\
           </div>\
        ';
        msgStrFull = '\
           <div class="weui_msg" id="weuiMsgFull" style="display: none;">\
              <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>\
              <div class="weui_text_area">\
                  <h2 class="weui_msg_title">' + title + '</h2>\
                  <p class="weui_msg_desc">' + desc + '</p>\
              </div>\
              <div class="weui_opr_area">\
                  <p class="weui_btn_area">\
                     <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>\
                     <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>\
                  </p>\
              </div>\
              <div class="weui_extra_area">\
                  <a href="' + extraLink + '">' + extraText + '</a>\
              </div>\
           </div>\
        ';


        if(arguments[4]){
           $('body').append(msgStrFull);
           $('#weuiMsgFull').fadeIn('fast');
           $('#weuiMsgFull .weui_btn_primary').on('click',function(){
               callback();   
           });
           $('#weuiMsgFull .weui_btn_default').on('click',function(){
               $('#weuiMsgFull').fadeOut('fast',function(){
                  $('#weuiMsgFull').remove(); 
               });
           });
        }else if(arguments[2]){
           $('body').append(msgStr);
           $('#weuiMsg').fadeIn('fast');
           $('#weuiMsg .weui_btn_primary').on('click',function(){
               callback();   
           });
           $('#weuiMsg .weui_btn_default').on('click',function(){
               $('#weuiMsg').fadeOut('fast',function(){
                  $('#weuiMsg').remove(); 
               });
           });
        }
     }

})
</script>

</head>
<body ontouchstart>

  <div class="bd">
     <h1 class="page_title">MSG</h1>
  </div>

  <div class="bd spacing">
     <div class="weui_cells">
        <div class="weui_cell">
            <button href="javascript:;" class="weui_btn weui_btn_primary" id="showMsg">点击弹出Msg简洁版</button>
        </div>  
        <div class="weui_cell">
            <button href="javascript:;" class="weui_btn weui_btn_primary" id="showMsgFull">点击弹出Msg完全版</button>
        </div>      
     </div>
  </div>

</body>
</html>