插件
- 通用性
- 易用性
- 尽量不要与其他功能冲突
提示插件
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>打开一个确认对话框</button>
<script src="../../plugin/confirm.js"></script>
<script>
var n = 0;
document.querySelector("button").onclick = function () {
n++;
//打开一个确认对话框
myPlugin.openConfirm({
title: "这是一个确认对话框",
content: "这是第" + n + "次打开确认对话框",
confirmText: "确定",
cancelText: "取消",
onConfirm: function () {
alert("你点击了确定按钮");
},
onCancel: function () {
alert("你点击了取消按钮");
}
});
}
</script>
</body>
</html>js
if (!window.myPlugin) {
window.myPlugin = {};
}
window.myPlugin.openConfirm = (function () {
var divModal, //朦层
divCenter, //中间的容器
options,
spanTitle,
spanClose,
divContent,
btnConfirm,
btnCancel,
isRegEvent = false; //是否注册过事件
/**
* 打开一个确认对话框
*/
function openConfirm(opts) {
if (typeof opts === "string") {
opts = {
content: opts
};
}
if (!opts) {
opts = {}; //默认为一个空对象
}
options = opts;
initModal();
initCenterDiv();
regEvent();
}
function regEvent() {
if (!isRegEvent) {
isRegEvent = true;
spanClose.onclick = function () {
divModal.style.display = "none";
}
divModal.onclick = function (e) {
if (e.target === this) {
divModal.style.display = "none";
}
}
btnCancel.onclick = function () {
if (options.oncancel) {
options.oncancel();
}
divModal.style.display = "none";
}
btnConfirm.onclick = function () {
if (options.onconfirm) {
options.onconfirm();
}
divModal.style.display = "none";
}
}
}
/**
* 初始化朦层
*/
function initModal() {
if (!divModal) {
divModal = document.createElement("div");
divModal.style.position = "fixed";
divModal.style.background = "rgba(0,0,0,.2)";
divModal.style.width = divModal.style.height = "100%";
divModal.style.left = divModal.style.top = 0;
document.body.appendChild(divModal);
}
divModal.style.display = "block";
}
/**
* 初始化中间的div
*/
function initCenterDiv() {
if (!divCenter) {
divCenter = document.createElement("div");
divCenter.style.position = "absolute";
divCenter.style.width = "260px";
divCenter.style.height = "160px";
divCenter.style.background = "#fff";
divCenter.style.left = divCenter.style.right = divCenter.style.top = divCenter.style.bottom = 0;
divCenter.style.margin = "auto";
divCenter.style.fontSize = "14px";
initDivCenterContent();
divModal.appendChild(divCenter);
btnCancel = divCenter.querySelector("[data-myplugin-id=cancel]")
btnConfirm = divCenter.querySelector("[data-myplugin-id=confirm]")
spanTitle = divCenter.querySelector("[data-myplugin-id=title]");
spanClose = divCenter.querySelector("[data-myplugin-id=close]")
divContent = divCenter.querySelector("[data-myplugin-id=content]");
}
//设置配置的内容
spanTitle.innerText = options.title || "提示";
divContent.innerText = options.content || "";
btnConfirm.className = options.confirmClass || "";
btnConfirm.innerText = options.confirmText || "确定";
btnCancel.className = options.cancelClass || "";
btnCancel.innerText = options.cancelText || "取消";
}
/**
* 初始化div内部的东西
*/
function initDivCenterContent() {
//创建内部的标题div
var div = document.createElement("div");
div.style.height = "40px";
div.style.background = "#eee";
div.style.boxSizing = "border-box";
div.style.padding = "10px 20px 0";
div.innerHTML = `
<span style="float:left;" data-myplugin-id="title"></span>
<span data-myplugin-id="close" style="float:right; cursor:pointer">
<img style="width:18px;height:18px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACDklEQVRoQ+2Z/TEEQRDF30WADGSACMgAGZABkZABGSACJQMykAEyUE/dqLmpmZ2Z7rd7dsv8eXXd/X7TPR87vcLMx2rm+rFogF0ABwBetpylYwBvAD5zOnIZoPA7AGdrAxpeA7ifGOQCwA0A6uF4BHCZguQAHiLxsWYaTwVB8ZzEdBDiPP4xBSDtx8BMTwFREh9k7cVZSAFOADxXSmVMiJp4SjsC8Bo05kqINb+zBYgW8V/RmviRmANocURbZSbMMUvngNmhYadyxRo6yFyOG0HcMWonsTvAAIjEdw2A8SWBEhCZzxYANYRMfGkXKmVdEVjhY0NfawaCkUeAx7a4lHoBrOU0ivjeEopnoUcQ7XIXs3RWTQejJQO95dRyJJjEezKghDCLVwD0rIlcJlziVQBWCLd4JUAvhET8P0BU1K3barwOJFnwbKOKncgN4QWwzLzkAAtOPAAK8UGHORNWgFbxFPbnrhI94sNDmMWm5QrS/bjrEeKxlVynFQIUPkwfNMrASl9NJSQNuJ4+mc/aLiQLlCliie/FPmxJZqdpH3S+Oy3ycZcNjtDWKU2i+egfyEpL1vn0zwbH71hcg2P2LSamho2000yqxyibUkWVyukpbUCW2qy8hAUItnWuJuxQxh9Kt1G7i+IJttEvHjoHWE77cUOtcVtU/+0QwHtPo1stYFR/tavEqMEVzmcP8A0Z6ZQxBkTeYQAAAABJRU5ErkJggg==" />
</span>
`;
divCenter.appendChild(div);
//创建提示文本div
div = document.createElement("div");
div.dataset.mypluginId = "content";
div.style.height = "70px";
div.style.boxSizing = "border-box";
div.style.padding = "20px";
divCenter.appendChild(div);
//创建按钮div
div = document.createElement("div");
div.style.height = "50px";
div.style.boxSizing = "border-box";
div.style.padding = "10px 20px";
div.style.textAlign = "right";
div.innerHTML = `
<button data-myplugin-id="confirm"></button>
<button data-myplugin-id="cancel"></button>
`;
divCenter.appendChild(div);
}
return openConfirm;
}())