倒角,TabPage及Tree的脚本

/* * 常用页面UI代码 * * @Author 曾学文 zengxw@cabp.com.cn * @CreateDate 2009 - 05 - 08 * * @Version V1.0 * * */ /*输出调试信息：记录所在行及输出信息。**/ function DebugInfo(row,obj) { var jslog = GetObj('DebugOutput'); if (null == jslog) { jslog = document.createElement('DIV'); jslog.id='DebugOutput'; jslog.style.background = "#e55"; jslog.style.border = "#55e 1px solid" ; document.body.appendChild(jslog); } var loginfo = document.createElement('SPAN'); loginfo.innerHTML = row + "::" + obj +"
"; jslog.appendChild(loginfo); } /* * * 根据ID或层ID提取DOM对象 * * 子对象列表 * 对象ID * 要插入的对象 */ function GetObj(id) { if(document.getElementById) { return eval('document.getElementById("' + id + '")'); } else if(document.layers) { return eval("document.layers['" + id +"']"); } else { return eval('document.all.' + id); } } /* * * 提取指定对象对象的下级元素 * * 子对象列表 * 容器对象 * 要插入的对象 */ function GetChildElements(obj) { if (typeof(obj) != "object") { return null; } var returnValue = new Object(); var number = 0; for (var i = 0; i * 提取指定对象对象的下级元素 * * 子对象 * 容器对象 * 子对象的类名（第一个，最好唯一） */ function GetChildElementByClass(obj,classname) { for (var i = 0; i * 提取当前的鼠标坐标 * * 坐标点（x,y) */ function GetMouseSite(){ var yScrolltop; var xScrollleft; if (self.pageYOffset || self.pageXOffset) { yScrolltop = self.pageYOffset; xScrollleft = self.pageXOffset; } else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft ) {// Explorer 6 Strict yScrolltop = document.documentElement.scrollTop; xScrollleft = document.documentElement.scrollLeft; } else if (document.body) {// all other Explorers yScrolltop = document.body.scrollTop; xScrollleft = document.body.scrollLeft; } /* return { x:xScrollleft + event.clientX, y:yScrolltop + event.clientY }; */ var point = { x:xScrollleft + event.clientX, y:yScrolltop + event.clientY } return point; } /* * * 获取客户区的宽度 * * 宽度 （px单位） */ function GetClientWidth() { if (window.innerWidth) return window.innerWidth; else if ((document.body) && (document.body.clientWidth)) return document.body.clientWidth; else if (document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth; } /* * * 获取客户区的高度 * * 高度 （px单位） */ function GetClientHeight() { if (window.innerHeight) return window.innerHeight; else if ((document.body) && (document.body.clientHeight)) return document.body.clientHeight; else if (document.documentElement && document.documentElement.clientHeight) return document.documentElement.clientHeight; } function GetClientSize() { return {width:GetClientWidth(), height:GetClientHeight()} } /* * * 提取指定对象的起点坐标 * * 子对象列表 * 对象 */ function GetPosition(obj) { var pos = { x:0, y:0 }; while (obj != null) { pos.x += obj.offsetLeft; pos.y += obj.offsetLeft; obj = obj.offsetParent } return pos; } /* * * 提取指定对象所在的容器的底色(如果未指定或为父配置，则递归提取。 * * 颜色 * 要提取的对象 */ function GetParentBackColor(element) { var el = element.parentNode, c; while(el.tagName.toLowerCase() != "html" && (c = GetBackColor(el)) == "transparent") { el = el.parentNode; } if(c == "transparent") c = "#FFFFFF"; return(c); } function GetBackColor(element) { var c = element.style.backgroundColor; if (c == null || c == "transparent" || c == "") { /* 未指定，则采用 */ return("transparent"); } c = c.toLowerCase(); if(c.indexOf("rgba(0, 0, 0, 0)") >= 0) return("transparent"); if(c.toLowerCase().indexOf("rgb") >= 0) c = rgb2hex(c); return(c); } function rgb2hex(color) { var hex = "", v, h, i; var regexp = /([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/; var h = regexp.exec(color); for(i = 1; i * 从指定的字串内提取数字 * * 数字 * 要提取的字串 */ function GetInt(str) { if (null == str || ""==str) { return(0); } var regexp = /[0-9]+/; return regexp.exec(str); } /* * * 在指定元素内插入为节点 * * 容器对象 * 要插入的对象 */ function AddToTop(p, c) { if (p.childNodes.length > 0) { /* 如有的话，插入到第一个元素前面 */ p.insertBefore(c, p.firstChild); } else { p.appendChild(c); } } /* * * 在指定元素内追加节点 * * 容器对象 * 要追加的对象 */ function AddToBottom(p, c) { p.appendChild(c); } /* * * 显示或关闭（切换） * * 对象ID */ function ToggleShow(objid) { var obj = GetObj(objid); if (null == obj) return; obj.style.display == "none" ? obj.style.display = "block" : obj.style.display = "none"; } /* * * 移除指定对象的指定事件处理 * * 对象 * 对象的事件 * 处理函数 */ function RemoveEventHandler(target, eventType, fnHandler) { if (target.removeEventListener) { target.removeEventListener(eventType, fnHandler, false); } else if (target.detachEvent) { target.detachEvent("on" + eventType, fnHandler); } else { target["on" + eventType] = null; } } /* * * 加上指定对象的指定事件处理 * * 对象 * 对象的事件 * 处理函数 */ function AddEventHandler(target, eventType, fnHandler) { if (target.addEventListener) { target.addEventListener(eventType, fnHandler, false); } else if (target.attachEvent) { target.attachEvent("on" + eventType, fnHandler); } else { target["on" + eventType] = fnHandler; } } function StopEventProc(e) { if ( e && e.stopPropagation ) {//因此它支持W3C的stopPropagation()方法 return e.stopPropagation(); } else {//否则，我们需要使用IE的方式来取消事件冒泡 return window.event.cancelBubble = true; } } function AbortEventProc(e) { if (null == e) return true; if(e.preventDefault) return e.preventDefault(); else return e.returnValue=false; } /* * * 设置全局变量处理 * * 变量名 * 变量数据 */ function SetGlobalVar(name,setvalue) { /*if (typeof(window[name])=="undefined" || window[name]==null) { window[name]=setvalue; }*/ window[name]=setvalue; } /* * * 读取全局变量处理 * * 变量名 * 默认的变量数据。如未设定时 */ function GetGlobalVar(name,defaultvalue) { if (typeof(window[name])=="undefined") { return defaultvalue; } return window[name]; } /**********************************************************************************/ /* * 给指定DIV的分栏进行尺寸改变。 * 页面事件 * 注意左边栏样式：float:left; position: relative; overflow:auto; width:200px/必须指定/; height:100%; * 注意分割器样式：float:left; position: relative; cursor: e-resize; height: 100%; width: 4px;background-color: Gray; vertical-align: middle; * html .spilt {/针对IE6/ margin-right:-3px; } * 注意右边栏样式：position: relative; overflow:auto; width:auto/不能必须指定/; height:100%; * 分割器ID * 第一个可变对象ID * 是否为水平方向 */ function mouseDown(spiltterid,sizeid,isvertical) { if (null == sizeid || ""== sizeid || null == spiltterid || ""== spiltterid) return; AddEventHandler(document, "mousemove", mouseMove); AddEventHandler(document, "mouseup", mouseUp); if (null==isvertical) isvertical=false; var SpiltterSet = { spid : spiltterid, scid : sizeid, isv : isvertical }; SetGlobalVar("SpiltterSet",SpiltterSet); } function mouseMove(event) { var SpiltterSet = GetGlobalVar("SpiltterSet",null); if (null == SpiltterSet) return; var spiltter=GetObj(SpiltterSet.spid); if (SpiltterSet.isv) { var containerY = GetPosition(spiltter.parentNode).y; var eventY = event.clientY; // 限制最大高度 if (eventY >= containerY + spiltter.parentNode.offsetHeight - spiltter.offsetHeight) { eventY = containerY + spiltter.parentNode.offsetHeight - spiltter.offsetHeight; } var height = eventY - containerY >= 0 ? eventY - containerY : 0; GetObj(SpiltterSet.scid).style.height = height + "px"; } else { var containerX = GetPosition(spiltter.parentNode).x; var eventX = event.clientX; // 限制最大宽度 if (eventX >= containerX + spiltter.parentNode.offsetWidth - spiltter.offsetWidth) { eventX = containerX + spiltter.parentNode.offsetWidth - spiltter.offsetWidth; } var width = eventX - containerX >= 0 ? eventX - containerX : 0; GetObj(SpiltterSet.scid).style.width = width + "px"; } } function mouseUp() { RemoveEventHandler(document, "mousemove", mouseMove); } /********************************************************************************** 以下由页面onload 时调用，以自动设置指定功能 **********************************************************************************/ JordyTabPage= { classInactivepage : "inactivepage", //非活动页的标题类 classActivepage : "activepage", //活动页的标题类 /* * * 在页面onload时调用，进行折页处理 * 要求：1、只需调用一次 * 2、需配套指定CSS(inactivepage 及 activepage) * * 需做折页的元素ID */ init : function (tabid) { var subitems = GetChildElements(GetObj(tabid)); if (subitems.length * 在页面onload时调用，进行倒角处理。(使用容器的底色画出倒角。) * 要求：1、只需调用一次 * 2、指定元素的父容器必须为纯色 * 3、自动把padding设为0，把大小移到新插入元素内而保持原来的相对尺寸 ! ! * * 需做倒圆角的元素ID * 左上角圆角的半径 * 右上角圆角的半径 * 左下角圆角的半径 * 右下角圆角的半径 */ init:function(contain, lt, rt, lb, rb) { /*指定倒角的半径*/ if (null == lt) return; /*定义及初始化合适的倒角半径*/ var ltr,rtr,lbr,rbr; ltr = lt; if (null == rt || 0 > rt) rtr = lt; else rtr = rt; if (null == lb || 0 > lb) lbr = lt; else lbr = lb; if (null == lb || 0 > lb) rbr = rtr; else rbr = rb; /*没有倒圆角*/ if (ltr + rtr + lbr + rbr == 0) return; var cc = document.getElementById(contain); if (cc == null) return; /*提取指定对象所处的背景颜色。默认为白 */ var pbkc = GetParentBackColor(cc); /*定义顶部要加入的脚本 */ var TC = document.createElement("b"); var radio = Math.max(ltr,rtr); /* 定义基本样式 */ TC.style.backgroundColor = "transparent"; TC.style.overflow = "hidden"; TC.style.display = "block"; TC.style.marginBottom = (GetInt(cc.style.paddingTop)-radio).toString()+"px"; TC.style.marginLeft = (0-GetInt(cc.style.paddingLeft)).toString()+"px"; TC.style.marginRight = (0-GetInt(cc.style.paddingRight)).toString()+"px"; cc.style.paddingTop = "0px"; for(i = 1; i i) { l.style.borderLeftWidth = ltr - (Math.floor(Math.sqrt(Math.max(ltr * ltr - (ltr-i) * (ltr-i),0)))).toString() +"px"; } if (rtr>i) { l.style.borderRightWidth = rtr - (Math.floor(Math.sqrt(Math.max(rtr * rtr - (rtr-i) * (rtr-i),0)))).toString() +"px";; } l.style.margin = "0"; AddToBottom(TC, l); } AddToTop(cc, TC); /* 定义底部要加入的脚本 */ var BC = document.createElement("b"); radio = Math.max(lbr,rbr); BC.style.backgroundColor = "transparent"; BC.style.overflow = "hidden"; BC.style.display = "block"; BC.style.marginTop = (GetInt(cc.style.paddingBottom)-radio).toString()+"px"; BC.style.marginLeft = (-GetInt(cc.style.paddingLeft)).toString()+"px"; BC.style.marginRight = (-GetInt(cc.style.paddingRight)).toString()+"px"; cc.style.paddingBottom = "0px"; for(i = 1; i i) { lb.style.borderLeftWidth = lbr - (Math.floor(Math.sqrt(Math.max(lbr * lbr - (lbr-i) * (lbr-i),0)))).toString() +"px"; } if (rbr>i) { lb.style.borderRightWidth = rbr - (Math.floor(Math.sqrt(Math.max(rbr * rbr - (rbr-i) * (rbr-i),0)))).toString() +"px";; } lb.style.margin = "0"; AddToTop(BC, lb); } AddToBottom(cc, BC); } } /* * 树状控件。必须在UL内。无穷级。元素请用span包裹 */ JordyTree = { classExpand : "classExpand", //节点展开时的类 classCollapse : "classCollapse",//节点收缩时的类 classSingle: null, ////无子节点时的类 /* * * 树状控件。必须在UL内。无穷级。元素请用span包裹 * 要求：1、只需调用一次 * * 需做树处理的UL的元素ID */ init : function (treeid) { var tree = GetObj(treeid);/// document.getElementById if (null == tree || "ul" != tree.nodeName.toLowerCase()) return; for(var i=0; i<tree i if tree jordytree settreeitem:function ti return for else function e window true haschilditem : tii onstatechange obj treeitemdisplay ulobj></tree>