js 提示框的实现---组件开发之（一）

最新推荐文章于 2024-04-20 14:57:38 发布

weixin_30333885

最新推荐文章于 2024-04-20 14:57:38 发布

阅读量255

点赞数

原文链接：http://www.cnblogs.com/huanying2015/p/8067030.html

版权

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

思路比较简单：

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

运行结果：还是一样的

转载于:https://www.cnblogs.com/huanying2015/p/8067030.html

weixin_30333885

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 提示框的实现---组件开发之（一）

自己做了一个简单的提示框，供自己使用，也可以供他人参考，看懂此文，是理解组件开发的入门思路比较简单：1.常规写法：1.1. 创建一个构造函数1.2. 给构造函数的原型对象添加show 和hide方法1.3. 实力化调用构造函数css 代码： 1 .alert { 2 padding: 15px; 3 margin-bottom:...
复制链接

扫一扫