基于Layui开发一个捐赠小插件

提问 未结 精帖 5 3377
Esofar
Esofar 2017-5-17
悬赏:5飞吻
直接上代码:
/*!
* donate.js
* version: 1.0.0
* author: Gao Yang
* Github: https://github.com/esofar
*/
layui.define(['layer'], function (exports) {
"use strict";

var $ = layui.jquery;
var layer = layui.layer;

var Donate = function () {
this.default = {
title: '感谢您的支持,我会继续努力',
elem: null, //触发节点
z_pay_url: null, //微信二维码
w_pay_url: null //支付宝二维码
}
}

Donate.prototype.version = '1.0.0';

Donate.prototype.init = function (options) {

$.extend(true, this.default, options);

if (this.default.elem === null) {
throwError('Donate Error:请配置触发节点参数elem!');
}
if (this.default.w_pay_url === null) {
throwError('Donate Error:请配置微信二维码参数w_pay_url!');
}
if (this.default.z_pay_url === null) {
throwError('Donate Error:请配置支付宝二维码参数z_pay_url!');
}
this.render();
}

Donate.prototype.render = function () {

var html, config = this.default;
html = "<div class=\"donate-box\">";
html += " <div class=\"donate-btn-close\">+</div>";
html += " <h2>" + config.title + "</h2>";
html += " <div class=\"wechat\">";
html += " <img src=\"" + config.w_pay_url + "\" alt=\"微信支付\">";
html += " </div>";
html += " <div class=\"zhifubao\">";
html += " <img src=\"" + config.z_pay_url + "\" alt=\"支付宝支付\">";
html += " </div>";
html += "</div>";

$('body').append(html);

$(config.elem).on('click', function () {
$(".donate-box").css('display', 'block');
});

$('.donate-btn-close').on('click', function () {
$(".donate-box").css('display', 'none');
});

loadStyles(".donate-box{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:360px;border-radius:0;background:#fff;box-shadow:0 0 0 2000px rgbparam {String} str
*/
function loadStyles(str) {
loadStyles.mark = 'load';
var style = document.createElement("style");
style.type = "text/css";
try {
style.innerHTML = str;
} catch (ex) {
style.styleSheet.cssText = str;
}
var head = document.getElementsByTagName('head'" target="_blank">0;
head.appendChild(style);
}

/**
* 抛出异常错误信息。
* @param {String} msg
*/
function throwError(msg) {
if (layer && layer != undefined) {
layer.msg(msg, { icon: 5 });
}
throw new Error(msg);
return;
}

var donate = new Donate();

exports('donate', donate);
});
使用:
<script>
layui.config({
base: '/Content/'
}).use(['element', 'form', 'donate'], function () {
var form = layui.form();
var element = layui.element();
var donate = layui.donate;

donate.init({
elem: '.btn-donate', //触发节点。
z_pay_url: 'http://res.codergao.cn/image/zhifubao.png',
w_pay_url: 'http://res.codergao.cn/image/wchat.png'
});

});
</script>
效果:
回帖
本帖已设置禁止回复