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

来源：互联网发布：8080端口外网访问编辑：程序博客网时间：2024/04/29 11:15
***WEUI应用，用JS封装常用信息提示的弹层—Toast
这样可以方便调用，而且文字可以自定义；*
<!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","#showToast",function(){        //toast();        toast("我的自定义");     });     $(document).on("click","#showLoadingToast",function(){        //loadingToast();        loadingToast('自定义文字');        setTimeout(function(){            $('#loadingToast').fadeOut('fast');        },1800);             });     function toast(){        var msg;        arguments[0] ? msg = arguments[0] : msg = '已完成';        var toast;        toast = '\                 <div id="toast" style="display:none;">\                    <div class="weui_mask_transparent"></div>\                    <div class="weui_toast">\                       <i class="weui_icon_toast"></i>\                       <p class="weui_toast_content">' + msg + '</p>\                    </div>\                 </div>\        ';        if(!$('#toast').length){            $('body').append(toast);        }else{            $('#toast.weui_toast_content').html(msg);        }        $('#toast').fadeIn('fast',function(){            setTimeout(function(){                $('#toast').fadeOut('fast');            },800);        });     }     function loadingToast(){        var msg;        arguments[0] ? msg = arguments[0] : msg = '数据加载中' ;        var loadingToast;        loadingToast = '\           <div id="loadingToast" class="weui_loading_toast" style="display:none;">\             <div class="weui_mask_transparent"></div>\             <div class="weui_toast">\                 <div class="weui_loading">\                     <div class="weui_loading_leaf weui_loading_leaf_0"></div>\                     <div class="weui_loading_leaf weui_loading_leaf_1"></div>\                     <div class="weui_loading_leaf weui_loading_leaf_2"></div>\                     <div class="weui_loading_leaf weui_loading_leaf_3"></div>\                     <div class="weui_loading_leaf weui_loading_leaf_4"></div>\                     <div class="weui_loading_leaf weui_loading_leaf_5"></div>\                     <div class="weui_loading_leaf weui_loading_leaf_6"></div>\                     <div class="weui_loading_leaf weui_loading_leaf_7"></div>\                     <div class="weui_loading_leaf weui_loading_leaf_8"></div>\                     <div class="weui_loading_leaf weui_loading_leaf_9"></div>\                     <div class="weui_loading_leaf weui_loading_leaf_10"></div>\                     <div class="weui_loading_leaf weui_loading_leaf_11"></div>\                 </div>\                 <p class="weui_toast_content">' + msg + '</p>\              </div>\           </div>\        ';        if(!$('#loadingToast').length){           $('body').append(loadingToast);        }else{           $('#loadingToast.weui_toast_content').html(msg);        }        $('#loadingToast').fadeIn('fast');     }</script></head><body ontouchstart>  <div class="bd">     <p class="page_title">Toast</p>  </div>  <div class="bd spacing">     <div class="weui_cells">        <div class="weui_cell">            <button href="javascript:;" class="weui_btn weui_btn_primary" id="showToast">点击弹出Toast</button>        </div>        <div class="weui_cell">            <a href="javascript:;" class="weui_btn weui_btn_primary" id="showLoadingToast">点击弹出Loading Toast</a>        </div>     </div>  </div></body></html>
0 0