自己做了一个简单的提示框,供自己使用,也可以供他人参考,看懂此文,是理解组件开发的入门
思路比较简单:
1.常规写法:
1.1. 创建一个构造函数
1.2. 给构造函数的原型对象添加show 和hide方法
1.3. 实力化调用构造函数
css 代码:
1 .alert { 2 padding: 15px; 3 margin-bottom: 20px; 4 border: 1px solid transparent; 5 border-radius: 4px; 6 } 7 8 .alert-warning { 9 color: #8a6d3b; 10 background-color: #fcf8e3; 11 border-color: #faebcc; 12 } 13 14 .alert-success { 15 color: #3c763d; 16 background-color: #dff0d8; 17 border-color: #d6e9c6; 18 } 19 20 .alert .close { 21 text-decoration: none; 22 float: right; 23 font-size: 21px; 24 font-weight: 700; 25 line-height: 1; 26 color: #000; 27 text-shadow: 0 1px 0 #fff; 28 filter: alpha(opacity=20); 29 opacity: .2; 30 } 31 32 .alert-info { 33 color: #31708f; 34 background-color: #d9edf7; 35 border-color: #bce8f1; 36 } 37 38 .alert-danger { 39 color: #a94442; 40 background-color: #f2dede; 41 border-color: #ebccd1; 42 }
html代码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="./css/layout1.css"> 7 <script> 8 //构造一个函数,参数为一个对象,实例化时,有值则进行传值,没有则赋值一个空对象 9 function popAlert( opt ){ 10 this.opt = opt || {}; 11 }; 12 // 显示函数的设置 13 popAlert.prototype.show = function(){ 14 // 创建一个div元素 15 var Odiv = document.createElement('div'); 16 var that = this; 17 var aclose ; 18 // 给div添加class属性,这里使用的是多个属性的添加,同时将opt的class传递过来 19 Odiv.classList.add('alert',this.opt['class']||'' ); 20 // 设定div包含的内容 21 Odiv.innerHTML = this.opt['content'] || ''; 22 Odiv.innerHTML += "<a href='javascript:;' class='close'> X </a>"; 23 // 把div元素整体插入body内,appendChild是插在最后面 24 document.body.appendChild(Odiv); 25 26 aclose = document.querySelectorAll('.alert > .close'); 27 // 点击close按钮,则影藏此按钮的父级元素 28 aclose.forEach(function(val){ 29 val.addEventListener( 'click',function(){ 30 that.hide( this.parentNode ); 31 }); 32 }); 33 }; 34 // 影藏函数设置 35 popAlert.prototype.hide = function( obj ){ 36 obj.style.display = 'none'; 37 }; 38 39 window.onload = function(){ 40 // 新对象实例化及调用show函数 41 var oAlertSuccess = new popAlert({ 42 'class':'alert-success', 43 'content':'这是成功提示信息,恭喜你!' 44 }); 45 oAlertSuccess.show(); 46 47 var oAlertInfo = new popAlert({ 48 'class':'alert-info', 49 'content':'这是信息提示信息,如果你已经知道了,请忽略!' 50 }); 51 oAlertInfo.show(); 52 53 var oAlertWarning = new popAlert({ 54 'class':'alert-warning', 55 'content':'这是警告提示信息,请知悉!' 56 }); 57 oAlertWarning.show(); 58 59 var oAlertDanger = new popAlert({ 60 'class':'alert-danger', 61 'content':'这是危险提示信息,重要!请知悉!' 62 }); 63 oAlertDanger.show(); 64 } 65 </script> 66 </head> 67 <body> 68 </body> 69 </html>
运行结果:
2. 换一种方式写:
把 js 调用和代码分开:
css 代码:还是和上面是一样的
1 .alert { 2 padding: 15px; 3 margin-bottom: 20px; 4 border: 1px solid transparent; 5 border-radius: 4px; 6 } 7 8 .alert-warning { 9 color: #8a6d3b; 10 background-color: #fcf8e3; 11 border-color: #faebcc; 12 } 13 14 .alert-success { 15 color: #3c763d; 16 background-color: #dff0d8; 17 border-color: #d6e9c6; 18 } 19 20 .alert .close { 21 text-decoration: none; 22 float: right; 23 font-size: 21px; 24 font-weight: 700; 25 line-height: 1; 26 color: #000; 27 text-shadow: 0 1px 0 #fff; 28 filter: alpha(opacity=20); 29 opacity: .2; 30 } 31 32 .alert-info { 33 color: #31708f; 34 background-color: #d9edf7; 35 border-color: #bce8f1; 36 } 37 38 .alert-danger { 39 color: #a94442; 40 background-color: #f2dede; 41 border-color: #ebccd1; 42 }
html 代码:script标签内,只写调用的代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="./css/layout1.css"> 7 <script src="./js/layout.js"></script> 8 <script> 9 window.onload = function(){ 10 // 新对象实例化及调用show函数 11 var oAlertSuccess = new huanying2015.popAlert({ 12 'class':'alert-success', 13 'content':'这是成功提示信息,恭喜你!' 14 }); 15 oAlertSuccess.show(); 16 17 var oAlertInfo = new huanying2015.popAlert({ 18 'class':'alert-info', 19 'content':'这是信息提示信息,如果你已经知道了,请忽略!' 20 }); 21 oAlertInfo.show(); 22 23 var oAlertWarning = new huanying2015.popAlert({ 24 'class':'alert-warning', 25 'content':'这是警告提示信息,请知悉!' 26 }); 27 oAlertWarning.show(); 28 29 var oAlertDanger = new huanying2015.popAlert({ 30 'class':'alert-danger', 31 'content':'这是危险提示信息,重要!请知悉!' 32 }); 33 oAlertDanger.show(); 34 } 35 </script> 36 </head> 37 <body> 38 </body> 39 </html>
js 代码:与之前写在一起的差异是:一,用一个匿名的立即执行表达式函数把代码包含起来了,二是在表达式内部增加了几行代码,即增加了一个空对象huanying2015,然后把popAlert 挂在huanying2015 下面,再把huanying2015挂到window下面
1 ;(function(window,undefined){ 2 //构造一个函数,参数为一个对象,实例化时,有值则进行传值,没有则赋值一个空对象 3 function popAlert( opt ){ 4 this.opt = opt || {}; 5 }; 6 // 显示函数的设置 7 popAlert.prototype.show = function(){ 8 // 创建一个div元素 9 var Odiv = document.createElement('div'); 10 var that = this; 11 var aclose ; 12 // 给div添加class属性,这里使用的是多个属性的添加,同时将opt的class传递过来 13 Odiv.classList.add('alert',this.opt['class']||'' ); 14 // 设定div包含的内容 15 Odiv.innerHTML = this.opt['content'] || ''; 16 Odiv.innerHTML += "<a href='javascript:;' class='close'> X </a>"; 17 // 把div元素整体插入body内,appendChild是插在最后面 18 document.body.appendChild(Odiv); 19 20 aclose = document.querySelectorAll('.alert > .close'); 21 // 点击close按钮,则影藏此按钮的父级元素 22 aclose.forEach(function(val){ 23 val.addEventListener( 'click',function(){ 24 that.hide( this.parentNode ); 25 }); 26 }); 27 }; 28 // 影藏函数设置 29 popAlert.prototype.hide = function( obj ){ 30 obj.style.display = 'none'; 31 }; 32 33 // 设置一个空对象:huanying2015 34 var huanying2015 = {}; 35 // 把popAlert 挂在huanying2015下面 36 huanying2015 = { 37 'popAlert' : popAlert, 38 }; 39 // 然后把huanying2015挂在window 对象下面,这样就可以在外面使用huanying2015调用popAlert 了 40 window.huanying2015 = huanying2015; 41 42 })(window,undefined);
运行结果:还是一样的
http://www.cnblogs.com/huanying2015 博客随笔大多数文章均属原创,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利