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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。