js组件开发。。。
daiLog2.js
//function Dialog({iw=400,ih=400,posi='center',mark=false}) {//构造函数：属性 es6写法
function Dialog() {
/*
作者：金哥
时间：
github：
说明：Dialog()是一个弹窗组件，具备三个款式
参数：
{
id : id,不能重复，必选的
iw : 宽度,可选的，默认：400
ih : 高度,可选的，默认：400
posi : 位置,可选的，默认：居中 center，还可以写右下角 'rightbottom'
mark : 是否有遮罩，true有遮罩，false没有遮罩.可选，默认false,
con : 弹窗的内容，必填
}
*/
//节点查找
this.boxdiv = null;
this.mark = null;
//默认参数
this.defaults = {
'iw': 400,
'ih': 400,
'posi': 'center',
'mark': false
}
}
function extend(obj1, obj2) { //拷贝
for (var key in obj1) {
obj2[key] = obj1[key];
}
}
//原型下面：放公共的属性和方法
Dialog.prototype.status = { //多组开关控制弹窗不能同时刻出现相同弹窗
// 1 : false//已经创建登陆框
// 2 : true,
// 3 : true
}
Dialog.prototype.init = function (opt) {
//替补方案
extend(opt, this.defaults);//用的参数：this.defaults
if (!this.status[this.defaults.id]) {//第一次点击：undefined，第二次起：拿到false
//如果状态为假，证明没有创建过该弹窗，允许创建
//创建节点
this.create();
//设置数据
this.setdata();
//删除节点
this.del();
this.status[this.defaults.id] = true;//不允许创建
}
}
Dialog.prototype.create = function () {
//创建节点
this.boxdiv = document.createElement('div');
this.boxdiv.className = 'box';
this.boxdiv.innerHTML = '<h2>登陆框</h2>' +
'<p>' + this.defaults.con + '</p>' +
'<span class="close">X</span>';
document.body.appendChild(this.boxdiv);
//创建遮罩
if (this.defaults.mark) {//创建遮罩
//为真就要创建遮罩div
this.mark = document.createElement('div');
this.mark.className = 'mark';
document.body.appendChild(this.mark);
css(this.mark, 'height', window.innerHeight + 'px');
}
}
Dialog.prototype.setdata = function () {
//设置数据
css(this.boxdiv, 'width', this.defaults.iw + 'px');//设置宽度
css(this.boxdiv, 'height', this.defaults.ih + 'px');
if (this.defaults.posi == 'center') {
var l = (window.innerWidth - this.boxdiv.offsetWidth) / 2 + 'px';
var t = (window.innerHeight - this.boxdiv.offsetHeight) / 2 + 'px';
}
if (this.defaults.posi == 'rightbottom') {
var l = window.innerWidth - this.boxdiv.offsetWidth + 'px';
var t = window.innerHeight - this.boxdiv.offsetHeight + 'px';
}
css(this.boxdiv, 'left', l);
css(this.boxdiv, 'top', t);
}
Dialog.prototype.del = function () {
//删除节点
var close = this.boxdiv.getElementsByClassName('close')[0];
close.onclick = function () {
//删除遮罩
if (this.defaults.mark) {
document.body.removeChild(this.mark);
}
document.body.removeChild(this.boxdiv);
this.status[this.defaults.id] = false;//允许创建
}.bind(this);//修正指向
}
commo.js
function on(ele, type, fn) {
//ele：节点 type : 事件类型，没有on的；fn：回调函数
if(ele.addEventListener) {
//高级浏览器
ele.addEventListener(type, fn, false);
} else {
ele.attachEvent('on' + type, fn); //onclick
}
}
以下是内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
}
.box {
width: 400px;
height: 400px;
border: 1px solid #000;
position: absolute;
background: #fff;
z-index: 5;
}
.close {
display: block;
width: 20px;
height: 20px;
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
background: #ccc;
}
.mark {
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 100%;
background: rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="登陆框" />
<input type="button" name="btn2" id="btn2" value="公告框" />
<input type="button" name="btn3" id="btn3" value="遮罩框" />
<!--<div class="box">
<h2>登陆框</h2>
<p>内容</p>
<span class="close">X</span>
</div>
<div class="mark"></div>-->
</body>
</html>
<script src="./common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/diaLog2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//找到节点
var btns = document.querySelectorAll('input');
//组件：弹窗组件，不同点：大小不同、位置不同、是否遮罩不同；相同：点击的时候才创建；点击关闭删掉
btns[0].onclick = function () {
//款式一:登陆框
var d1 = new Dialog();//创建实例
d1.init({//配置参数
'id': 1,//同一个弹窗同一个时间内不能出现两次
'iw': 400,
'ih': 400,
'posi': 'center',
'mark': false,
'con': '登陆框'
});//功能的入口
}
btns[1].onclick = function () {
//款式二：公告框
var d2 = new Dialog();//创建实例
d2.init({//配置参数
'id': 2,//同一个弹窗同一个时间内不能出现两次
'iw': 200,
'ih': 400,
'posi': 'rightbottom',
'mark': false,
'con': '公告框'
});//功能的入口
}
btns[2].onclick = function () {
//款式三:遮罩框
var d1 = new Dialog();//创建实例
d1.init({//配置参数
'id': 3,//同一个弹窗同一个时间内不能出现两次
'iw': 300,
'ih': 200,
'posi': 'center',
'mark': true,
'con': '遮罩框'
});//功能的入口
}
</script>
付明旭
