js 提示框的实现---组件开发之(一)

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

思路比较简单:

1.常规写法:

1.1. 创建一个构造函数

1.2. 给构造函数的原型对象添加show 和hide方法

1.3. 实力化调用构造函数

css 代码:

 .alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
} .alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
} .alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
} .alert .close {
text-decoration: none;
float: right;
font-size: 21px;
font-weight:;
line-height:;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
} .alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
} .alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}

html代码:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/layout1.css">
<script>
//构造一个函数,参数为一个对象,实例化时,有值则进行传值,没有则赋值一个空对象
function popAlert( opt ){
this.opt = opt || {};
};
// 显示函数的设置
popAlert.prototype.show = function(){
// 创建一个div元素
var Odiv = document.createElement('div');
var that = this;
var aclose ;
// 给div添加class属性,这里使用的是多个属性的添加,同时将opt的class传递过来
Odiv.classList.add('alert',this.opt['class']||'' );
// 设定div包含的内容
Odiv.innerHTML = this.opt['content'] || '';
Odiv.innerHTML += "<a href='javascript:;' class='close'> X </a>";
// 把div元素整体插入body内,appendChild是插在最后面
document.body.appendChild(Odiv); aclose = document.querySelectorAll('.alert > .close');
// 点击close按钮,则影藏此按钮的父级元素
aclose.forEach(function(val){
val.addEventListener( 'click',function(){
that.hide( this.parentNode );
});
});
};
// 影藏函数设置
popAlert.prototype.hide = function( obj ){
obj.style.display = 'none';
}; window.onload = function(){
// 新对象实例化及调用show函数
var oAlertSuccess = new popAlert({
'class':'alert-success',
'content':'这是成功提示信息,恭喜你!'
});
oAlertSuccess.show(); var oAlertInfo = new popAlert({
'class':'alert-info',
'content':'这是信息提示信息,如果你已经知道了,请忽略!'
});
oAlertInfo.show(); var oAlertWarning = new popAlert({
'class':'alert-warning',
'content':'这是警告提示信息,请知悉!'
});
oAlertWarning.show(); var oAlertDanger = new popAlert({
'class':'alert-danger',
'content':'这是危险提示信息,重要!请知悉!'
});
oAlertDanger.show();
}
</script>
</head>
<body>
</body>
</html>

运行结果:

js 提示框的实现---组件开发之(一)

2. 换一种方式写:

把 js 调用和代码分开:

css 代码:还是和上面是一样的

 .alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
} .alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
} .alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
} .alert .close {
text-decoration: none;
float: right;
font-size: 21px;
font-weight:;
line-height:;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
} .alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
} .alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}

html 代码:script标签内,只写调用的代码

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/layout1.css">
<script src="./js/layout.js"></script>
<script>
window.onload = function(){
// 新对象实例化及调用show函数
var oAlertSuccess = new huanying2015.popAlert({
'class':'alert-success',
'content':'这是成功提示信息,恭喜你!'
});
oAlertSuccess.show(); var oAlertInfo = new huanying2015.popAlert({
'class':'alert-info',
'content':'这是信息提示信息,如果你已经知道了,请忽略!'
});
oAlertInfo.show(); var oAlertWarning = new huanying2015.popAlert({
'class':'alert-warning',
'content':'这是警告提示信息,请知悉!'
});
oAlertWarning.show(); var oAlertDanger = new huanying2015.popAlert({
'class':'alert-danger',
'content':'这是危险提示信息,重要!请知悉!'
});
oAlertDanger.show();
}
</script>
</head>
<body>
</body>
</html>

js 代码:与之前写在一起的差异是:一,用一个匿名的立即执行表达式函数把代码包含起来了,二是在表达式内部增加了几行代码,即增加了一个空对象huanying2015,然后把popAlert 挂在huanying2015 下面,再把huanying2015挂到window下面

 ;(function(window,undefined){
//构造一个函数,参数为一个对象,实例化时,有值则进行传值,没有则赋值一个空对象
function popAlert( opt ){
this.opt = opt || {};
};
// 显示函数的设置
popAlert.prototype.show = function(){
// 创建一个div元素
var Odiv = document.createElement('div');
var that = this;
var aclose ;
// 给div添加class属性,这里使用的是多个属性的添加,同时将opt的class传递过来
Odiv.classList.add('alert',this.opt['class']||'' );
// 设定div包含的内容
Odiv.innerHTML = this.opt['content'] || '';
Odiv.innerHTML += "<a href='javascript:;' class='close'> X </a>";
// 把div元素整体插入body内,appendChild是插在最后面
document.body.appendChild(Odiv); aclose = document.querySelectorAll('.alert > .close');
// 点击close按钮,则影藏此按钮的父级元素
aclose.forEach(function(val){
val.addEventListener( 'click',function(){
that.hide( this.parentNode );
});
});
};
// 影藏函数设置
popAlert.prototype.hide = function( obj ){
obj.style.display = 'none';
}; // 设置一个空对象:huanying2015
var huanying2015 = {};
// 把popAlert 挂在huanying2015下面
huanying2015 = {
'popAlert' : popAlert,
};
// 然后把huanying2015挂在window 对象下面,这样就可以在外面使用huanying2015调用popAlert 了
window.huanying2015 = huanying2015; })(window,undefined);

运行结果:还是一样的

js 提示框的实现---组件开发之(一)

上一篇:Theano入门神经网络(一)


下一篇:mac 桌面美化