js组件开发。。。

时间 2019-11-13

标签组件开发栏目 JavaScript 繁體版

原文原文链接

daiLog2.jsjavascript

//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>

* {

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>

<!--<div class="box">

</div>

</body>

</html>

//找到节点

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>