自己做了一个简单的提示框,供自己使用,也可以供他人参考,看懂此文,是理解组件开发的入门

思路比较简单:

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 }
View Code

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 }
View Code

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);

运行结果:还是一样的

 

 

posted on 2017-12-19 18:12  huanying2015  阅读(1094)  评论(0编辑  收藏  举报