行为型设计模式 (一) 模板方法模式 中的完整代码
- <!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>
- 模板方法模式实现 Alert 插件
- </title>
- <style>
- .alert{ position:fixed; top:0; right:0; bottom:0; left:0; z-index: 3;
- text-align: center; white-space: nowrap; font-size:0; overflow: auto; background:
- rgba(0, 0, 0, 0.24); } .alert:after{ content: ''; display:inline-block;
- height:100%; vertical-align: middle; } .alert-dialog{ display: inline-block;
- vertical-align: middle; border-radius:8px; background-color: #ffffff; text-align:
- left; font-size: 14px; white-space: normal; width: 300px; position: relative;
- padding-bottom: 42px; } .alert-dialog h3{ margin: 0; text-align: center;
- background: #e6e6e6; border-top-left-radius: 8px; border-top-right-radius:
- 8px; line-height: 40px; color:#3c3c3c; } .alert-dialog p{ padding-left:
- 20px; border-bottom: 1px dashed #dad8d8; padding-bottom: 20px; color:#666;
- } .a-colse{ position:absolute; top:0; right:40px; } .a-confirm{ position:
- absolute; bottom: 12px; width: 80px; left: 35px; height: 30px; text-align:
- center; border-radius: 4px; border: 1px solid #0089f7; line-height: 30px;
- background: #0089f7; color: #fff; letter-spacing: 4px; } .a-confirm.right{
- left: 185px; } .a-confirm.center{ left: 110px; } .cancel{ position: absolute;
- bottom: 12px; left: 185px; width: 80px; height: 30px; text-align: center;
- border-radius: 4px; border: 1px solid #e6e6e6; line-height: 30px; background:
- #e6e6e6; color: #807e7e; letter-spacing: 4px; }
- </style>
- </head>
- <body>
- <button type="button" onclick="cancleFuc()">
- 带有取消按钮的弹出框
- </button>
- <button type="button" onclick="rightFuc()">
- 右侧按钮提示框
- </button>
- <button type="button" onclick="titleFuc()">
- 标题提示框
- </button>
- </body>
- <script>
- var Alert = function(data) {
- if (!data) return;
- this.content = data.content;
- this.panel = document.createElement('div');
- this.dialog = document.createElement('div') this.contentNode = document.createElement('p') this.confirmBtn = document.createElement('span') this.closeBtn = document.createElement('b') this.panel.className = 'alert'this.dialog.className = 'alert-dialog'this.closeBtn.className = 'a-colse'
- // this.closeBtn.innerHTML = '*'
- this.confirmBtn.className = 'a-confirm'this.confirmBtn.innerHTML = data.confirm || '确认'this.contentNode.innerHTML = this.content this.success = data.success ||
- function() {}
- this.fail = data.fail ||
- function() {}
- }
- Alert.prototype = {
- init() {
- this.panel.appendChild(this.dialog) this.dialog.appendChild(this.closeBtn) this.dialog.appendChild(this.contentNode) this.dialog.appendChild(this.confirmBtn) document.body.appendChild(this.panel) this.bindEvent() this.show()
- },
- bindEvent() {
- var me = this;
- this.closeBtn.onclick = function() {
- me.fail() me.hide()
- }
- this.confirmBtn.onclick = function() {
- me.success() me.hide()
- }
- },
- hide() {
- this.panel.style.display = 'none'
- },
- show() {
- this.panel.style.display = 'block'
- }
- }
- // 右侧按钮提示框
- var RightAlert = function(data) {
- Alert.call(this, data) this.confirmBtn.className = this.confirmBtn.className + 'right';
- }
- RightAlert.prototype = new Alert()
- // 标题提示框
- var TitleAlert = function(data) {
- // 继承基本提示框构造函数
- Alert.call(this, data) this.title = data.title this.titleNode = document.createElement('h3') this.titleNode.innerHTML = this.title
- }
- TitleAlert.prototype = new Alert() TitleAlert.prototype.init = function() {
- // 插入标题
- this.dialog.insertBefore(this.titleNode, this.panel.firstChild);
- Alert.prototype.init.call(this)
- }
- // 带有取消按钮的弹出框
- var CancleAlert = function(data) {
- TitleAlert.call(this, data) this.cancle = data.cancle;
- this.cancleBtn = document.createElement('span');
- this.cancleBtn.className = 'cancel'this.cancleBtn.innerHTML = this.cancle || '取消'
- }
- CancleAlert.prototype = new Alert();
- CancleAlert.prototype.init = function() {
- TitleAlert.prototype.init.call(this) this.dialog.appendChild(this.cancleBtn)
- }
- CancleAlert.prototype.bindEvent = function() {
- var me = this;
- TitleAlert.prototype.bindEvent.call(me) this.cancleBtn.onclick = function() {
- me.fail();
- me.hide()
- }
- }
- // 创建提示框
- function cancleFuc() {
- new CancleAlert({
- title: "提示标题",
- content: "带有取消按钮的提示框",
- success: function() {
- console.log('ok')
- },
- fail: function() {
- console.log('cancle')
- }
- }).init();
- }
- function rightFuc() {
- new RightAlert({
- content: "右侧按钮提示框",
- success: function() {
- console.log('ok')
- },
- fail: function() {
- console.log('cancle')
- }
- }).init();
- }
- function titleFuc() {
- new TitleAlert({
- title: "标题提示框",
- content: "标题提示框",
- success: function() {
- console.log('ok')
- },
- fail: function() {
- console.log('cancle')
- }
- }).init();
- }
- </script>
- </HTML>
来源: http://www.qdfuns.com/note/51152/c704497fef62085d92b6480262c783c5.html