//html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>Document</title> <link rel="stylesheet" href="pop_up.css"> <script src="jquery-2.1.3.min.js"></script> <script src="pop_up.js"></script> </head> <body> <!-- <div id="corBackground" class="corBackground" style="display:block"> <div class="payMark" style="display:block;"> <div class="number-wrap"> <div class="number" style="text-align:center">此次共消费:<span>200</span><span>元</span></div> </div> <div class="zfb-pay"><a href="">支付宝</a></div> <div class="wx-pay"><a href="">微信支付</a></div> <div class="close-btn"><a href="">取消</a></div> </div> </div>--> <button class="aa">点击</button> </body> <script> $('.aa').bind('click', function(e) { $('body').paybox({ //总消费(元) Rmb: '200', //支付宝支付链接 zfb_link: '', //微信支付链接 wx_link: '', //取消支付返回链接 close_link: '', submit: function(data) { submitFun(data); } }); }); </script> </html>
//css文件pop_up.css
* { margin: 0; padding: 0; } /*去除a标签的默认样式*/ a { text-decoration: none; color: inherit; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-appearance: none; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none } a:focus { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } /*遮罩层透明度的动画*/ @-webkit-keyframes cor_bg_anime { 0% { background-color: rgba(0, 0, 0, 0) } 100% { background-color: rgba(0, 0, 0, .3) } } @keyframes cor_bg_anime { 0% { background-color: rgba(0, 0, 0, 0) } 100% { background-color: rgba(0, 0, 0, .3) } } .corBackground { 100%; height: 100%; position: fixed; background-color: rgba(0, 0, 0, .3); top: 0; left: 0; z-index: 19; display: none; -webkit-animation: cor_bg_anime ease .5s; animation: cor_bg_anime ease .5s } /*窗体动画,从下往上升*/ @-webkit-keyframes animations { 0% { -webkit-transform: translate(0, 200px) } 100% { -webkit-transform: translate(0, 0) } } @keyframes animations { 0% { -webkit-transform: translate(0, 200px); transform: translate(0, 200px) } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0) } } .payMark { display: none; 100%; background-color: #fff; font-size: 0; z-index: 1000; position: absolute; left: 0; bottom: 0px; -webkit-animation: animations .5s ease forwards; animation: animations .5s ease forwards } /*---------------------窗体内容的css-------------------------*/ .number-wrap { padding: 12px 0 23px; font-size: 12px } .number { line-height: 13px; text-align: center } .number span { color: #fb4847 } .zfb-pay { background-color: #1e81d2; } .wx-pay { background-color: #09ba07; } .zfb-pay, .wx-pay { display: block; 85.94%; height: 37px; margin: 0 auto; text-align: center; border-radius: 6px; margin-bottom: 13px; } .zfb-pay a, .wx-pay a { display: block; 100%; height: 37px; line-height: 37px; margin: 0 auto; color: #fff; font-size: 14px; border-radius: 6px; } .close-btn { border-top: 1px solid #e8e8e8; color: #3b3b3b; font-size: 14px; line-height: 14px; text-align: center; } .close-btn a { display: block; height: 52px; 100%; line-height: 52px; }
//js文件pop_up.js
(function($) { $.fn.paybox = function(options) { var defaults = {//默认参数 //总消耗(元) Rmb: '', //支付宝支付链接 zfb_link: '', //微信支付链接 wx_link: '', //取消支付返回链接 close_link: '', submit: function(data) {}//回调函数 }; $.extend(defaults, options);//页面传入的参数替换默认参数 // var defaults = options; var $this = $(this); //支付弹窗内容块 var paychuanEle = $('<div id="corBackground" class="corBackground" style="display:block"><div class="payMark" style="display:block">
<div class="number-wrap"><div class="number" style="text-align:center">此次共消费:<span>' + defaults.Rmb + '</span><span>元</span></div></div>
<div class="zfb-pay"><a href="' + defaults.zfb_link + '">支付宝</a></div><div class="wx-pay"><a href="' + defaults.wx_link + '">微信支付</a></div>
<div class="close-btn"><a href="' + defaults.close_link + '">取消支付</a></div></div></div>'); //塞入窗体 $this.append(paychuanEle); //阻止元素发生默认的行为 paychuanEle.bind('touchmove', function(e) { e.preventDefault(); }); //hold窗体不消失 var ishanding = false; //点击取消,窗体移除 paychuanEle.find('.close-btn').click(function(e) { if (ishanding) { return; } //console.log(e); $("#corBackground").remove(); }); //禁止冒泡,阻止窗体移除 paychuanEle.find('.payMark').click(function(e) { e.stopPropagation(); }); return { //移除 fadeout: function() { paychuanEle.remove(); }, loading: function() { // ishanding = true; } }; }; })(jQuery);
//下面我们来分析一下这个pop_js.js,到底怎么样实现这个插件的
1.定义一个闭包区域,防止插件"污染"
(function($){ ....... })(jQuery);
2.$.fn.extend(object)扩展jquery 方法,制作插件
(function($) { $.fn.paybox = function(options) {... }; })(jQuery);
3.让页面绑定插件,转入参数(如下图)
$.extend(defaults, options);//页面传入的参数替换默认参数
4.定义一个变量 var paychuanEle,窗体ele(建议先在html上写好结构和样式)
然后把窗体paychuanEle,塞入窗体 $this.append(paychuanEle);
$this指的是绑定这个插件的元素,这里绑定插件的是body,$("body").paybox({...})