您的位置:首页 > 运维架构 > Linux

centos-6更新yum源(163)

2014-09-01 18:32 399 查看
基本我自己封装的一些常用函数:KW.js

 

/*
Kingwell Javascript library
Author:Jinhua.leng#gmail.com
Date:2012-05-20
*/
(function () {
if (!window.KW) {
window.KW = {}
} //命名空间

window.KW = {

version:"V1.02",
$ : function () { //$()函数
var elements = new Array();
for (var i = 0; i <= arguments.length; i++) {
var element = arguments[i];
//如果是一个字符串那假设它是一个ID
if (typeof element == 'string') {
element = document.getElementById(element);
}
//如果只提供了一个参数,则立即返回这个参数
if (arguments.length == 1) {
return element;
}
//否则,将它添加到数组中
elements.push(element);
}
return elements;
},

/*-------------------- 事件处理 --------------------*/
addEvent : function (oTarget, oType, fnHandler) { //-----添加事件;
var oT = this.$(oTarget);
if (!oT) {
alert('Not found \" ' + oTarget + ' \"');
return false
};
if (oT.addEventListener) { //for DOM
oT.addEventListener(oType, fnHandler, false);
} else if (oT.attachEvent) { //for IE
oT.attachEvent('on' + oType, fnHandler);
} else { //for Others
oT['on' + oType] = fnHandler;
}
},
removeEvent : function (oTarget, oType, fnHandler) { //-----移除事件;
var oT = this.$(oTarget);
if (!oT) {
alert('Not found \" ' + oTarget + ' \"');
return false
};
if (oT.removeEventListener) { //for DOM
oT.removeEventListener(oType, fnHandler, false);
} else if (oT.detachEvent) { //for IE
oT.detachEvent('on' + oType, fnHandler);
} else { //for Others
oT['on' + oType] = null;
}
},
getEvent : function () { //-----获得事件-----
return window.event || arguments.callee.caller.arguments[0];
},
getTarget : function () { //-----获取目标----
var ev = window.event || arguments.callee.caller.arguments[0];
return ev.srcElement || ev.target;
},
stopPropagation : function () { //-----阻止冒泡-----
if (window.event) {
return this.getEvent().cancelBubble = true;
} else {
return arguments.callee.caller.arguments[0].stopPropagation();
}
},
stopDefault : function () { //-----阻止默认行为
if (window.event) {
return this.getEvent().returnValue = false;
} else {
return arguments.callee.caller.arguments[0].preventDefault();
}
},

/*-------------------- 常用函数 --------------------*/
toggleDisplay : function (id) { //-----显示,隐藏-----
var oTarget = this.$(id);
if (!oTarget) {
return false;
}
oTarget.style.display == 'none' ? oTarget.style.display = 'block' : oTarget.style.display = 'none';
},
stripHTML : function (agr) { //-----移除HTML-----
var reTag = /<(?:.|\s)*?>/g;
return agr.replace(reTag, '')
},
stripSpace : function (oTarget) { //-----移除空格-----
var re = /^\s*(.*?)\s*$/;
return oTarget.replace(re, '$1');
},
isEmail : function (e) { //-----Is E-mail
var re = /^[a-zA-z_][a-zA-Z_0-9]*?@\w{1,}.\[a-zA-Z]{1,}/;
return re.test(e);
},

/*-------------------- DOM --------------------*/

createContent : function (node, value, parendNode) {
var n = document.createElement(node),
c = document.createTextNode(value);
n.appendChild(c);
document.body.appendChild(n)
},
text : function (node, value) {
this.$(node).innerHTML = value;
},
val : function (node, value) {
this.$(node).value = value
},
size : function () {
return this.size();
},
addElement : function (tag, id, value) {
if (arguments.length <= 1) {
return document.createElement(tag);
} else {
var tag = document.createElement(tag);
tag.setAttribute(id, value);
return tag;
}
},
att : function (id, value) {
if (arguments.length == 1) {
return this.getAttibute.value;
} else if (arguments.length == 2) {
return setAtttube.value;
} else {
return false
}
},

/*-------------------- Cookie操作 --------------------*/
setCookie : function (sName, sValue, oExpires, sPath, sDomain, bSecure) { //-----设置Cookie-----
var sCookie = sName + '=' + encodeURIComponent(sValue);
if (oExpires) {
sCookie += '; expires=' + oExpires.toGMTString();
}
if (sPath) {
sCookie += '; path=' + sPath;
}
if (sDomain) {
sCookie += '; domain=' + sDomain;
}
if (bSecure) {
sCookie += '; secure';
}
document.cookie = sCookie;
},
getCookie : function (sName) { //-----获得Cookie值-----
var sRE = '(?:; )?' + sName + '=([^;]*)';
var oRE = new RegExp(sRE);
if (oRE.test(document.cookie)) {
return decodeURIComponent(RegExp['$1']);
} else {
return null;
}
},
deleteCookie : function (sName, sPath, sDomain) { //-----删除Cookie值-----
this.setCookie(sName, '', new Date(0), sPath, sDomain);
}

}; //WS End

})(); //Library End

 
 

基本代码:

 

/*-----KW.js调用说明-----
KW.$()           ----->ID选择器;
addEvent         ----->绑定事件;
removeEvent      ----->移除事件;
getEvent         ----->获得事件;
getTarget        ----->获得事件目标;
stopPropagation()----->阻止冒泡
stopDefault()    ----->取消默认事件

*/

/*
弹出框 函数说明
alertBox(sTitle, sContent, sType);
参数:
sTitle:弹出框标题
sContent:弹出框内容,可以是文本,HTML
sType:
*/
function alertBox(sTitle, sContent, sType) {

var cl = document.createElement("div"),
ac = document.createElement("div"),
at = document.createElement("div"),
act = document.createElement("div"),
clo = document.createElement("span"),
bh = document.body.offsetHeight;
cl.setAttribute("id", "cover-layer");
cl.setAttribute("style", "height:" + bh + "px");
ac.setAttribute("id", "alert-container");
at.setAttribute("id", "alert-title");
act.setAttribute("class", "alert-content");
clo.setAttribute("id", "alert-close");
clo.setAttribute("class", "in-bl");
clo.setAttribute("title", "close")

cl.appendChild(ac);
ac.appendChild(at);
at.innerHTML = sTitle;
at.appendChild(clo);
ac.appendChild(act);
act.innerHTML = sContent;

if (sType == "prompt") {
var ab = document.createElement("div"),
as = document.createElement("button"),
ar = document.createElement("button");
ab.setAttribute("class", "alert-button");
as.setAttribute("id", "alertSubmit");
ar.setAttribute("id", "cancel");
as.innerHTML = "Yes";
ar.innerHTML = "No";
ab.appendChild(as);
ab.appendChild(ar);
ac.appendChild(ab);
}
document.body.appendChild(cl);
//垂直居中实现
var ch = Math.ceil(document.documentElement.clientHeight / 2),
lh = Math.ceil(ac.offsetHeight / 4);
ac.setAttribute("style", "top:" + ch + "px;margin-top:" + -lh + "px");
//响应ESC键
KW.addEvent(document.body, "keyup", function () {
if (KW.$("cover-layer") && KW.getEvent().keyCode == 27) {
delAlert();
}
})
if (sType == "prompt") {
WS.addEvent("cancel", "click", function () {
delAlert();
})
}
if (sType == "prompt") {
KW.addEvent("alertSubmit", "click", function () {
delAlert();
return true;
})
}
//Drag and Drop
var x;
var y;
var box = KW.$("alert-container");
box.style.left = box.offsetLeft+"px";
box.style.top = box.offsetTop+"px";
WS.addEvent("alert-title", "mousedown", function () {
x = KW.getEvent().clientX - parseInt(box.style.left);
y = KW.getEvent().clientY - parseInt(box.style.top)
WS.addEvent(document.body, "mousemove", mousemove);
});
document.onmouseup = function () {
WS.removeEvent(document.body, "mousemove", mousemove);
}
function mousemove() {
box.style.left= (KW.getEvent().clientX-x) + "px"
box.style.top = (KW.getEvent().clientY - y) + "px"
}
} //alertBox End

/*
删除遮盖层;
delAlert();
当需要删除遮盖层时,调整此函数即可;
*/
function delAlert() {
KW.$("cover-layer").parentNode.removeChild(KW.$("cover-layer"));
}

 
CSS 代码:

 

/*-- Alert --*/
#cover-layer{position:absolute; top:0; left:0; margin:auto; width:100%; height:100%; background:rgba(0,0,0,0.2); _background:#000; z-index:10000;}
#cover-layer #alert-container{width:400px; position:absolute; left:50%; margin-left:-100px; top:50%; background:#FFF; box-shadow:0 0 30px rgba(0,0,0,0.6); border-radius:5px;}
#cover-layer #alert-title{line-height:30px; padding:0 10px; font-weight:bold; border-top-left-radius:5px; border-top-right-radius:5px; background:#EEE; background:-moz-linear-gradient(#FFF,#EEE); background:-webkit-gradient(linear,0% 0%,0% 100%,from(#FFF),to(#EEE)); cursor:move}
#cover-layer .alert-content{padding:30px 20px;}
#cover-layer .alert-button{margin:auto auto 10px auto; text-align:center;}
#cover-layer button{min-width:50px; margin:auto 5px}
#cover-layer #alert-close{width:20px; height:20px; background:url(images/alert-delete.png) no-repeat center center; vertical-align:middle; float:right; cursor:pointer; margin:5px auto auto auto;}

 HTLM代码:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>kingwell</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div style=" padding:50px">

<div id="alertA">弹出框A测试 Click Me</div><br><br>
<div id="alertB">弹出框B测试 Click Me</div>

</div>

<script type="text/javascript" src="../js/lib/KW.js"></script>
<script type="text/javascript">
/*----- Test AlertBox -----*/
WS.addEvent("alertA", "click", function () {
alertBox("System Prompt", "<div class='strong'>Alert Test !按ESC键试试</div><br><br><input type='text'><br><br><br><br><button>Save</button><button>Cancel</button>");
WS.addEvent("alert-close", "click", delAlert)
});

WS.addEvent("alertB", "click", function () {
alertBox("Prompt", "<div class='strong a-c'>Are you sure you want to delete?</div>","prompt");
WS.addEvent("alert-close", "click", delAlert)
});

</script>
</body>
<html>

 
 

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: