浏览 2803 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (17) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2008-08-08
最近由于公司框架中的Tab组件Bug多多,迟迟不能解决。遂自己动手把Ext.Tab写成JSPTag来使用。发出来给和偶一样经常在海边拾贝壳的小鸟们借鉴参考之用。JS大师你们肯定要说,我是没事找事,直接用EXT不就行了何必那么麻烦,但问题是直接使用EXT的话,页面将大量引入一堆难读的JS和html而且也给一些作坊型的项目组带来了学习培训的成本。 2.实现的功能 由Java后端根据JSPTag生成Ext.Tab界面所需的html元素和JS。实现全部功能不需要程序员编写一行html代码或者JS。主要功能列表: 无限嵌套生成标签卡。 标签卡容器的自动扩展、自动滚动条、高度、宽度、当前活动标签卡的JSP属性设置。 标签卡的禁用、onclick事件响应的JSP属性设置。 支持request重置当前活动标签卡。 3.JSP代码 <body> <% TabsUtil.setActiveTab(request, 2); %> <eRed:tabs tabsId="tabs" activeTab="0" width="400" height="100" autoScroll="true"> <eRed:tab tabId="table1" title="标签卡1"> <font size="800">标签卡1</font> </eRed:tab> <eRed:tab tabId="table2" title="标签卡2" disabled="true"> 标签卡2 </eRed:tab> <eRed:tab tabId="table3" title="标签卡3" onclick="test"> 标签卡3 </eRed:tab> </eRed:tabs> </body> <script type="text/javascript"> function test(){ Ext.MessageBox.alert('系统提示:', "响应onclick事件!"); } </script> 4.效果图 5.关键代码 TLD描述: <tag> <name>tabs</name> <tagclass>com.eredlab.uilib.common.layout.ExtTabsTag</tagclass> <bodycontent>JSP</bodycontent> <info>标签卡容器标签-eRedUI公共标签</info> <attribute> <name>tabsId</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>activeTab</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>width</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>height</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>autoScroll</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> </tag> <tag> <name>tab</name> <tagclass>com.eredlab.uilib.common.layout.ExtTabTag</tagclass> <bodycontent>JSP</bodycontent> <info>标签卡标签-eRedUI公共标签</info> <attribute> <name>tabId</name> <required>true</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>title</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>disabled</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> <attribute> <name>onclick</name> <required>false</required> <rtexprvalue>true</rtexprvalue> </attribute> </tag> 标签实现类 /** * EXT风格标签选项卡容器标签-公共标签 * @author * @version eRedUI V0.1 */ public class ExtTabsTag extends BodyTagSupport{ private String tabsId; private String activeTab; private String width; private String height; private String autoScroll; private List tabs; public ExtTabsTag(){ super(); tabs = new ArrayList(); } /** * 标签开始:Do Nothing! */ public int doStartTag() throws JspException{ tabs.clear(); HttpServletRequest request = (HttpServletRequest)this.pageContext.getRequest(); String tabNo = (String)request.getAttribute(UiConstants.EXTTAB_ACTIVETAB); this.activeTab = (tabNo == null || tabNo == "") ? "0" : tabNo; return super.EVAL_BODY_BUFFERED; } /** * 标签结束:输出代码描述字符流 */ public int doEndTag() throws JspException{ JspWriter writer = pageContext.getOut(); try { String tabsDivStart = "<div id=\"tabs\">"; writer.println(tabsDivStart); for(int i = 0; i < tabs.size(); i++){ ExtTab tab = (ExtTab)tabs.get(i); String tabDivStart = "<div id=\"" + tab.getTabId() + "\" class=\"x-hide-display\">"; writer.println(tabDivStart); String tabDivContent = tab.getContent(); writer.println(tabDivContent); String tabDivEnd = "</div>"; writer.println(tabDivEnd); } String tabsDivEnd = "</div>"; writer.println(tabsDivEnd); String scriptStart = "<script type=\"text/javascript\">"; writer.println(scriptStart); String tabsScriptStart = "Ext.onReady(function(){var " + this.getTabsId() + " = new Ext.TabPanel({"; tabsScriptStart = tabsScriptStart + "renderTo: '" + this.getTabsId() + "',"; tabsScriptStart = tabsScriptStart + "width:" + (this.width == null ? "780" : this.width) + ","; tabsScriptStart = tabsScriptStart + "activeTab:" + (this.activeTab == null ? "0" : this.activeTab) + ","; tabsScriptStart = tabsScriptStart + "frame:true,"; if(this.height != null) tabsScriptStart = tabsScriptStart + "height:" + this.height + ","; if(this.autoScroll != null) tabsScriptStart = tabsScriptStart + "autoScroll:" + this.autoScroll + ","; tabsScriptStart = tabsScriptStart + "defaults:{autoHeight: true},"; tabsScriptStart = tabsScriptStart + "items:["; writer.println(tabsScriptStart); String tabScriptStart = ""; for(int i = 0; i < tabs.size(); i++){ ExtTab tab = (ExtTab)tabs.get(i); tabScriptStart = tabScriptStart + "{contentEl:'" + tab.getTabId() + "',"; if(tab.getDisabled() != null) tabScriptStart = tabScriptStart + "disabled:" + tab.getDisabled() + ","; if(tab.getOnclick() != null) tabScriptStart = tabScriptStart + "listeners: {activate:" + tab.getOnclick() + "},"; tabScriptStart = tabScriptStart + "title: '" + tab.getTitle(); tabScriptStart = tabScriptStart + "'},"; } String tabScriptStart2 = tabScriptStart.substring(0, tabScriptStart.length() - 1); writer.println(tabScriptStart2); String tabScriptEnd = "]"; writer.println(tabScriptEnd); String tabsScriptEnd = "});});"; writer.println(tabsScriptEnd); String scriptEnd = "</script>"; writer.println(scriptEnd); } catch (IOException e) { e.printStackTrace(); } return super.doEndTag(); } /** * 添加Tab卡片 */ public void addTab(ExtTabTag pTab){ tabs.add(pTab); } /** * 添加Tab卡片 */ public void addTab(ExtTab pTab){ tabs.add(pTab); } /** * 释放资源 */ public void release(){ super.release(); this.activeTab = null; this.tabsId = null; this.width = null; this.height = null; } public String getTabsId() { return tabsId; } public void setTabsId(String tabsId) { this.tabsId = tabsId; } public String getActiveTab() { return activeTab; } public void setActiveTab(String activeTab) { this.activeTab = activeTab; } public String getWidth() { return width; } public void setWidth(String width) { this.width = width; } public void setHeight(String height) { this.height = height; } public void setAutoScroll(String autoScroll) { this.autoScroll = autoScroll; } } /** * EXT风格标签选项卡标签-公共标签 * @author * @version eRedUI V0.1 */ public class ExtTabTag extends BodyTagSupport{ private String tabId; private String title; private String disabled; private String onclick; public ExtTabTag(){} /** * 标签开始:Do Nothing! */ public int doStartTag() throws JspException{ return super.EVAL_BODY_BUFFERED; } /** * 标签结束:输出代码描述字符流 */ public int doEndTag() throws JspException{ String content = this.bodyContent.getString(); ExtTabsTag tabs = (ExtTabsTag)findAncestorWithClass(this, ExtTabsTag.class); ExtTab tab = new ExtTab(); tab.setTabId(this.getTabId()); tab.setTitle(this.getTitle()); tab.setContent(content); tab.setDisabled(this.getDisabled()); tab.setOnclick(this.getOnclick()); tabs.addTab(tab); //tabs.addTab(this); return super.doEndTag(); } /** * 释放资源 */ public void release(){ super.release(); this.tabId = null; this.title = null; } public String getTabId() { return tabId; } public void setTabId(String tabId) { this.tabId = tabId; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public void setDisabled(String disabled) { this.disabled = disabled; } public void setOnclick(String onclick) { this.onclick = onclick; } public String getDisabled() { return disabled; } public String getOnclick() { return onclick; } } 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2008-08-08
不错,很实用:)
|
|
返回顶楼 | |
发表时间:2008-08-08
huangyh 写道 不错,很实用:) 哈哈 玩具玩具! 给同学们当参考材料~~~~ |
|
返回顶楼 | |