JSP自定义标签（一） 树形下拉选择菜单
来源：互联网 发布：javascript xml 编辑：程序博客网 时间：2024/05/01 21:28
一、效果图：
二、自定义标签JAVA代码：
package com.moonNigh.tagSupport;import java.io.IOException;import javax.servlet.http.HttpServletRequest;import javax.servlet.jsp.JspException;import javax.servlet.jsp.JspWriter;import javax.servlet.jsp.tagext.TagSupport;/** * * @author HHB * * 树形下拉选择控件 * */public class SelectorTag extends TagSupport { private static final long serialVersionUID = 9878861374414215L; //标签name属性 private String name; //所需图片的路径 private String imgPath; //所需javascript文件的路径 private String scriptPaht; //所需css文件的路径 private String cssPath; //项目的根路径 private String rootPath; //标签的value属性 private String value; private String text; private String path; /* * 标签的actionUrl属性 * 联想查询结果数据通过向actionUrl属性指定的url请求得到 */ private String actionUrl; private HttpServletRequest request=null; public String getActionUrl() { return actionUrl; } public void setActionUrl(String actionUrl) { this.actionUrl = actionUrl; } public String getValue() { return value; } public void setValue(String value) { this.value = value; } public String getImgPath() { return imgPath; } public void setImgPath(String imgPath) { this.imgPath = imgPath; } public String getScriptPaht() { return scriptPaht; } public void setScriptPaht(String scriptPaht) { this.scriptPaht = scriptPaht; } public String getCssPath() { return cssPath; } public void setCssPath(String cssPath) { this.cssPath = cssPath; } public String getText() { return text; } public void setText(String text) { this.text = text; } public String getName() { return name; } public void setName(String name) { this.name = name; } public SelectorTag() { } /** * 初始化变量 */ private void initAbttributes() { request=(HttpServletRequest)this.pageContext.getRequest(); rootPath=request.getContextPath(); this.imgPath="/images/"; this.scriptPaht="/js/"; this.cssPath="/css/"; } @Override public int doStartTag() throws JspException { initAbttributes(); path=rootPath+"/jsp/tags/treeSelectorPage.jsp?id="+id+"&actionUrl="+actionUrl; JspWriter out=pageContext.getOut(); try { String tName=name; //引入javascript文件 out.println("<script type='text/javascript' charset='GB2312' src='"+rootPath+scriptPaht+"selector.js'></script>"); //引入css文件 out.println("<link rel='stylesheet' href='"+rootPath+cssPath+"selector.css' type='text/css' />"); StringBuilder tag=new StringBuilder("<input type='text' "); tag.append("id='").append(id).append("'"); tag.append(" value='").append(text==null?"":text).append("'"); tag.append(" onclick='return showSelector(\""); tag.append(id).append("\",\"").append(path).append("\")' readonly>"); tag.append("<input type='hidden' name='") .append(tName).append("' id='").append(id).append("_value") .append("' value='").append(value==null?"":value).append("'>"); out.println(tag.toString()); } catch (IOException e) { e.printStackTrace(); } return SKIP_BODY; } }三、树形结构所属jsp页面：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!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 runat="server"> <style type="text/css"> .btn-unfold {BACKGROUND: url(../images/bg10.png) no-repeat; FLOAT: left; WIDTH: 13px; MARGIN-RIGHT: 5px; HEIGHT: 13px}.btn-fold {BACKGROUND: url(../images/bg09.png) no-repeat; FLOAT: left; WIDTH: 13px; MARGIN-RIGHT: 5px; HEIGHT: 13px} </style> <script type='text/javascript' src='../../js/treeCreator.js'></script> <script type='text/javascript' src='../../js/jquery-1.3.2.js'></script></head><body style="margin-left: 0px;margin-right: 0px;margin-top: 0px"> <form id="form1" runat="server"> <div> </div> </form> <%String para=""; String actionUrl="";para=request.getParameter("id");actionUrl=request.getParameter("actionUrl");%> <script language="javascript"> $.get("<%=(basePath+actionUrl) %>", function(data,status){ xmlParser(data,'<%=para %>'); }); </script></body></html>三、js代码：selector.j
function closeHandler(cal) { cal.hide(); // hide the selector}/*function selected(cal, date) { }*//* * 显示下拉框 */function showSelector(id,path,ref) { var selector=window["selector_"+id]; var el = document.getElementById(id); if (selector) { // we already have some selector created if(ref&&ref===true) { selector.frame.src=path; } //selector.hide(); // so we hide it first. } else { // first-time call, create the selector. var selec = new Selector(); selec.textId=id; selec.id="selector_"+id; selec.valueId=id+"_value"; selec.path=path; // uncomment the following line to hide the week numbers // cal.weekNumbers = false; selector = selec; // remember it in the global var selec.create(); } selector.sel = el; // inform it what input field we use // the reference element that we pass to showAtElement is the button that // triggers the selector. In this example we align the selector bottom-right // to the button. selector.showAtElement(el, "Bl"); // show the selector return false;}Selector = function () { // member variables this.activeDiv = null; this.timeout = null; this.dragging = false; this.hidden = false; this.isPopup = true; // HTML elements this.element = null; this.containFrame=null; this.textId=null; this.id=null; this.valueId=null; this.path=null; this.frame=null;}Selector.is_ie = ( /msie/i.test(navigator.userAgent) &&!/opera/i.test(navigator.userAgent) );Selector.getAbsolutePos = function(el) { var r = { x: el.offsetLeft, y: el.offsetTop }; if (el.offsetParent) { var tmp = Selector.getAbsolutePos(el.offsetParent); r.x += tmp.x; r.y += tmp.y; } //alert(r.x+":"+r.y); return r;};Selector.isRelated = function (el, evt) { var related = evt.relatedTarget; if (!related) { var type = evt.type; if (type == "mouseover") { related = evt.fromElement; } else if (type == "mouseout") { related = evt.toElement; } } while (related) { if (related == el) { return true; } related = related.parentNode; } return false;};Selector.removeClass = function(el, className) { if (!(el && el.className)) { return; } var cls = el.className.split(" "); var ar = new Array(); for (var i = cls.length; i > 0;) { if (cls[--i] != className) { ar[ar.length] = cls[i]; } } el.className = ar.join(" ");};Selector.addClass = function(el, className) { Selector.removeClass(el, className); el.className += " " + className;};Selector.createElement = function(type, parent) { var el = null; if (document.createElementNS) { // use the XHTML namespace; IE won't normally get here unless // _they_ "fix" the DOM2 implementation. el = document.createElementNS("http://www.w3.org/1999/xhtml", type); } else { el = document.createElement(type); } if (typeof parent != "undefined") { parent.appendChild(el); } return el;};/** Calls the second user handler (closeHandler). * 添加事件 * */Selector.addEvent = function(el, evname, func) { if (el.attachEvent) { // IE el.attachEvent("on" + evname, func); } else if (el.addEventListener) { // Gecko / W3C el.addEventListener(evname, func, true); } else { // Opera (or old browsers) el["on" + evname] = func; }};/* * 删除事件 */Selector.removeEvent = function(el, evname, func) { //alert(el.detachEvent); if (el.detachEvent) { // IE el.detachEvent("on" + evname, func); } else if (el.removeEventListener) { // Gecko / W3C el.removeEventListener(evname, func, true); } else { // Opera (or old browsers) el["on" + evname] = null; }};Selector.prototype.create = function (_par) { var parent = null; if (! _par) { // default parent is the document body, in which case we create // a popup selector. parent = document.getElementsByTagName("body")[0]; this.isPopup = true; } else { parent = _par; this.isPopup = false; } var div = document.createElement("div"); var selectIframe = Selector.createElement("iframe"); selectIframe.style.width="100%"; selectIframe.style.height="100%"; selectIframe.style.display="block"; selectIframe.scrolling="auto"; selectIframe.style.border="0px"; selectIframe.id=this.textId+"_frm"; this.containFrame=selectIframe; //selectIframe.style.border="1px"; selectIframe.src=this.path; var span=document.createElement("span"); span.innerHTML="test"; //div.appendChild(span); this.frame=selectIframe; div.appendChild(selectIframe); this.element = div; div.className = "selector"; if (this.isPopup) { div.style.position = "absolute"; div.style.display = "none"; } parent.appendChild(this.element);};Selector.prototype.destroy = function () { var el = this.element.parentNode; el.removeChild(this.element); Selector._C = null;};/** * Hides the Selector. Also removes any "hilite" from the class of any TD * element. * 隐藏下拉框 */Selector.prototype.hide = function () { if (this.isPopup) { //Selector.removeEvent(document, "keydown", Selector._keyEvent); //Selector.removeEvent(document, "keypress", Selector._keyEvent); Selector.removeEvent(document, "mousedown", function(){window[this.id].hide();}); } this.element.style.display = "none"; this.hidden = true; this.hideShowCovered();};Selector.prototype.showAt = function (x, y) { var s = this.element.style; s.left = x + "px"; s.top = y + "px"; this.show();};/** 下拉框相对指定控件的显示位置. */Selector.prototype.showAtElement = function (el, opts) { var p = Selector.getAbsolutePos(el); //alert(p.x+'-'+p.y); if (!opts || typeof opts != "string") { this.showAt(p.x, p.y + el.offsetHeight); return true; } this.show(); var w = this.element.offsetWidth; var h = this.element.offsetHeight; this.hide(); var valign = opts.substr(0, 1); var halign = "l"; if (opts.length > 1) { halign = opts.substr(1, 1); } // 垂直对齐方式 switch (valign) { case "T": p.y -= h; break; case "B": p.y += el.offsetHeight; break; case "C": p.y += (el.offsetHeight - h) / 2; break; case "t": p.y += el.offsetHeight - h; break; case "b": break; // already there } // 水平对齐方式 switch (halign) { case "L": p.x -= w; break; case "R": p.x += el.offsetWidth; break; case "C": p.x += (el.offsetWidth - w) / 2; break; case "r": p.x += el.offsetWidth - w; break; case "l": break; // already there } this.showAt(p.x, p.y);};Selector.prototype.show = function () { this.element.style.display = "block"; this.hidden = false; if (this.isPopup) { window[this.id] = this; var tId=this.id; //Calendar.addEvent(document, "keydown", Calendar._keyEvent); //Calendar.addEvent(document, "keypress", Calendar._keyEvent); Selector.addEvent(document, "mousedown", function(){window[tId].hide();}); } this.hideShowCovered();};Selector.prototype.hideShowCovered = function () { function getStyleProp(obj, style){ var value = obj.style[style]; if (!value) { if (document.defaultView && typeof (document.defaultView.getComputedStyle) == "function") { // Gecko, W3C value = document.defaultView. getComputedStyle(obj, "").getPropertyValue(style); } else if (obj.currentStyle) { // IE value = obj.currentStyle[style]; } else { value = obj.style[style]; } } return value; }; var tags = new Array("applet", "select"); var el = this.element; var p = Selector.getAbsolutePos(el); var EX1 = p.x; var EX2 = el.offsetWidth + EX1; var EY1 = p.y; var EY2 = el.offsetHeight + EY1; for (var k = tags.length; k > 0; ) { var ar = document.getElementsByTagName(tags[--k]); var cc = null; for (var i = ar.length; i > 0;) { cc = ar[--i]; p = Selector.getAbsolutePos(cc); var CX1 = p.x; var CX2 = cc.offsetWidth + CX1; var CY1 = p.y; var CY2 = cc.offsetHeight + CY1; if (this.hidden || (CX1 > EX2) || (CX2 < EX1) || (CY1 > EY2) || (CY2 < EY1)) { if (!cc.__msh_save_visibility) { cc.__msh_save_visibility = getStyleProp(cc, "visibility"); } cc.style.visibility = cc.__msh_save_visibility; } else { if (!cc.__msh_save_visibility) { cc.__msh_save_visibility = getStyleProp(cc, "visibility"); } cc.style.visibility = "hidden"; } } }};
四、js代码：treeCreator.js
var blank=". "; var blankTimes=1; var blankSize=30; var idIndex=0; var totalWidth=0; var imgpath="/MoonNighTags/images/"; /* * 加载xml字符串返回XMLDocument对象 */ function loadXML(xmlStr) { if(!window.DOMParser && window.ActiveXObject){ //window.DOMParser ÅöÃÊÇ·ñÊÇ·Çieä¯ÀÀÆ÷ var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM']; for(var i=0;i<xmlDomVersions.length;i++){ try{ xmlDoc = new ActiveXObject(xmlDomVersions[i]); xmlDoc.async = false; xmlDoc.loadXML(xmlStr); break; }catch(e){ } } } else if(window.DOMParser && document.implementation && document.implementation.createDocument){ try{ domParser = new DOMParser(); xmlDoc = domParser.parseFromString(xmlStr,"text/xml"); }catch(e){ } } else{ return null; } return xmlDoc; } /* * 解析xml字符串生成属性结构 */ function xmlParser(xmlStr,textId) { var childs=null; var root=null; var xmlDoc=loadXML(xmlStr); root=xmlDoc.documentElement; childs=root.childNodes; var topDiv=document.createElement("div"); topDiv.id='topdiv'; document.body.appendChild(topDiv); dealWithNode(root,0,topDiv,textId); topDiv.style.width='100%'; } /* * 根据节点及其子节点生成树 */ function dealWithNode(node,blankTimes,container,textId) { var children=null; var childCount=0; var isLeaf=false; var htmlnode=null; var textnode=null; var bl_times=blankTimes; var bl_str=""; var node_value=""; var node_id=""; if(node) { isLeaf=isLeafNode(node); var str=""; var spaceLength=0; if(idIndex>0) { str=getSpaceString(1); } if(bl_times>0) { spaceLength=bl_times*blankSize; } node_id=node_value=getAttributValue(node,"id"); if(!node_id||node_id=="") { node_id=idIndex+1; } if(isLeaf) { if(node.nodeType==3) { node_value=node.nodeValue; } else { node_value=node.firstChild.nodeValue; } idIndex++; node_value=str+node_value; htmlnode=createItem(node_value,node_id,container,isLeaf,textId); htmlnode.style.paddingLeft=spaceLength+'px'; } else { node_value=getAttributValue(node,"value"); idIndex++; node_value=str+node_value; htmlnode=createItem(node_value,node_id,container,isLeaf,textId); htmlnode.style.paddingLeft=spaceLength+'px'; var cContainer=createChildContainer("div"+node_id,container); cContainer.style.paddingLeft=bl_times*blankSize; cContainer.style.width='100%'; children=node.childNodes; if(getBrowser()=="MSIE") { bl_times=1; } else { bl_times+=1; } if(children&&children.length>0) { for(var i=0;i<children.length;i++) { dealWithNode(children[i],bl_times,cContainer,textId); } } } } } /* * 判断节点是否是叶子节点 */ function isLeafNode(node) { var children=null; if(node) { if(node.nodeType==3) { return true; } else { children=node.childNodes; if(children.length==1&&children[0].nodeType==3) { return true; } else { return false; } } } return true; } /* * 获取自定节点的指定属性值 */ function getAttributValue(node,attrName) { var attributes=null; var attr=null; if(node) { attributes=node.attributes; if(attributes&&attributes.length>0) { for(var attrI=0;attrI<attributes.length;attrI++) { attr=attributes[attrI]; if(attr&&attr.nodeName==attrName) { return attr.nodeValue; } } } } return null; } /* * 创建树形结构中每个节点的项 */ function createItem(itemText,idStr,parentContainer,isLeaf,textId) { var htmlnode=null; var textnode=null; var imgnode=null; var titlenode=null; var imgsrc=imgpath+"bg09.png"; if(isLeaf) { imgsrc=imgpath+"bg10.png"; } htmlnode=document.createElement("div"); htmlnode.id="span"+idStr; //htmlnode.href="#"; //htmlnode.style.paddingLeft="200"; //htmlnode.expanded="fales"; //图片 imgnode=document.createElement("img"); imgnode.setAttribute("src",imgsrc); imgnode.setAttribute("flag",isLeaf); imgnode.setAttribute("isLeaf",isLeaf); myAttachEvent(imgnode,'click',open_closeClick); //文字– titlenode=document.createElement("div"); titlenode.style.display="inline"; titlenode.style.cursor="pointer"; titlenode.id=idStr; textnode=document.createTextNode(itemText); titlenode.appendChild(textnode); myAttachEvent(titlenode,'click',function(){ var srcObj; if(typeof(event)!="undefined") { srcObj=event.srcElement; } else { srcObj=this; } itemClick(srcObj,textId);}); htmlnode.appendChild(imgnode); htmlnode.appendChild(titlenode); parentContainer.appendChild(htmlnode); return htmlnode; } /* * 创建包含节点下子树的容器 */ function createChildContainer(idStr,parentContainer) { var cContainer=null; cContainer=document.createElement("div"); cContainer.id=idStr; cContainer.style.display="none"; cContainer.style.whiteSpace='nowrap'; parentContainer.appendChild(cContainer); return cContainer; } /* * 单击图片时触发的事件 * 展开或收起该节点的子树 */ function open_closeClick(arg) { var srcObj; if(typeof(event)!="undefined") { srcObj=event.srcElement; } else { srcObj=this; } var flag=srcObj.getAttribute("flag"); if(srcObj.getAttribute("isLeaf")=="true") { return; } if(flag=="true"){ srcObj.src=imgpath+"bg09.png"; srcObj.setAttribute("flag","false") }else{ srcObj.src=imgpath+"bg10.png"; srcObj.setAttribute("flag","true"); } var conId=srcObj.parentNode.id.replace("span","div"); //alert(conId); var container=document.getElementById(conId); if(container) { if(container.style.display=="block") container.style.display="none"; else container.style.display="block"; } } /* * 点击树中节点上选项时触发事件时调用该方法 * 关闭下拉框 */ function itemClick(srcObj,pid) { if(window.parent) { window.parent.document.getElementById(pid).value=srcObj.innerHTML; window.parent.document.getElementById(pid+'_value').value=srcObj.id; if(window.parent["selector_"+pid]) window.parent["selector_"+pid].hide(); } } /* * 绑定事件 */ var myAttachEvent = function(obj, evt, fn){ if (obj.addEventListener) obj.addEventListener(evt, fn, false); else if (obj.attachEvent) obj.attachEvent("on" + evt, fn); } function Integration_InterceptCellEvent(id, evt, func) { if (func.constructor == Function) { document.write('<scr' + 'ipt for="' + id + '" event="' + evt + '">' + 'Array.prototype.push.call(arguments, "' + evt + '");' + func.toString().match(/\s*Function\s+(\S*)\s*\(/i)[1] + '.apply(this, arguments);' + '</sc' + 'ript>'); } } function getSpaceString(strlength) { var str=""; for(var strIndex=0;strIndex<strlength;strIndex++) { str+=" "; } return str; } function getShortFileName(fileName) { var name=""; var index=-1; } /* * 获取浏览器类型 */ function getBrowser() { var OsObject = ""; if(navigator.userAgent.indexOf("MSIE")>0) { return "MSIE"; } if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ return "Firefox"; } if(isSafari=navigator.userAgent.indexOf("Safari")>0) { return "Safari"; } if(isCamino=navigator.userAgent.indexOf("Camino")>0){ return "Camino"; } if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ return "Gecko"; } return "others"; }
五、tld文件标签定义：
<tag>
<name>selector</name>
<tag-class>com.moonNigh.tagSupport.SelectorTag</tag-class>
<body-content>empty</body-content>
<small-icon></small-icon>
<large-icon></large-icon>
<description></description>
<attribute>
<name>id</name>
<required>true</required>
</attribute>
<attribute>
<name>name</name>
<required>true</required>
</attribute>
<attribute>
<name>value</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>text</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>actionUrl</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<example></example>
</tag>
六、CSS代码：
.selector { position: relative; display: none; border:2px solid #C9D7F1; font-size: 11px; color: #666; cursor: default; background:white;/* font-family:tahoma,verdana,sans-serif;*/ font-family:arial; margin-top:2px; width: 150px; height: 200px;}七、自定义的用于输出生成树形结构的XML的Servlet或Action：
package com.moonNigh.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class GetTreeXML extends HttpServlet { /** * */ private static final long serialVersionUID = 1L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // TODO Auto-generated method stub resp.setCharacterEncoding("UTF-8"); resp.setContentType("UTF-8"); PrintWriter out=resp.getWriter(); StringBuilder sb=new StringBuilder(); sb.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>"); sb.append("<xmlRoot value=\"中国\" id=\"china\">"); sb.append("<child value=\"四川\" id=\"sc\">"); sb.append("<child id=\"ctu\">成都</child>"); sb.append("</child><child id=\"gz\">贵州</child></xmlRoot>"); out.write(sb.toString()); out.flush(); }}
八、测试JSP标签使用：
<c:selector id="ctest" name="test" actionUrl="getTreeXml"/>
- JSP自定义标签（一） 树形下拉选择菜单
- JSP自定义标签（一） 树形下拉选择菜单
- JSP自定义标签（一）
- jsp自定义标签（一）
- JSP自定义标签（一）
- jsp自定义标签下拉框
- JSP自定义标签（三）自定义日期选择标签
- JSP自定义标签（一）：自定义JSP简单标签
- 【web】自定义jsp标签（下拉框数据字典）
- 【JavaWeb探究】自定义JSP标签（一）
- JSP的自定义标签（一）
- jsp下拉列表—自定义标签
- jsp下拉列表—自定义标签
- 仿网易新闻app下拉标签选择菜单
- 纯JSP+DWR实现三级联动下拉选择菜单
- 纯JSP+DWR实现三级联动下拉选择菜单
- jsp与树形菜单
- 创建动态菜单的JSP自定义标签（A Custom JSP Tag Library for Dynamic Menus）
- android - 自定义标题栏(在标题栏中增加按钮和文本居中)
- 【android基础】之android Toast大全
- 纯无聊贴（庆祝清明）
- VS2010为Picture Control 手动添加变量
- Understanding Android ContentProvider
- JSP自定义标签（一） 树形下拉选择菜单
- Android - ImageButton单击切换按钮图片效果的实现
- 未来物联网时期安防企业如何失掉话语权
- Android 面试题笔记-------bindservice与startservice的生命周期？
- android - ListView的使用
- 01_南理学工学院OJ_部分简单题目
- 生活之中需要注意的一些事情
- 主要的技术Blog网站
- flexlib SuperTabNavigator 无法访问空对象引用的属性或方法
