centos-6更新yum源(163)
2014-09-01 18:32
399 查看
基本我自己封装的一些常用函数:KW.js
基本代码:
CSS 代码:
HTLM代码:
/* 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>
相关文章推荐
- CentOS更新163 yum源
- CentOS 配置163的yum源更新笔记
- centos-6更新yum源(163)
- centos-6更新yum源(163)
- Centos6.5添加163软件yum源
- CentOS6.4配置163的yum源
- CentOS 7 更新源 – 使用国内 163 yum 源
- centos使用更新更快的yum源
- CentOS6.4配置163的yum源
- centos使用163 yum源
- Centos6.6 yum源更新方法
- CentOS配置网易163 yum源
- CentOS配置网易163 中科大 yum源
- centos 7.0配置 163 yum源
- CentOS更改yum源与更新系统
- centos更新yum源
- CentOS更改yum源与更新系统
- Linux Redhat 和 CentOS配置国内163的yum源
- CentOS更新yum源
- Centos 6.5系统更改yum源为163