ecology开发之TAB页组件-赫非域

组件	TAB组件
功能说明	基于jQuery的生成tab页签的组件，其主要特点如下： 1、常用于将一个大功能需要切分为多个小功能，但需要在一个页面上显示的情形； 2、支持iframe和非iframe两种情形； 3、自动计算页签的位置； 4、自动隐藏无法排列的页签； 5、自动将页面中固定区域的按钮等内容放置在页签右侧； 6、统一维护页签的样式
使用说明	1.引入如下js 如果没有引入以下js，那么需要引入以下js： <!–以下是显示定制组件所需的js –> <script src=”/js/tabs/jquery.tabs.extend_wev8.js”></script> <link type=”text/css” href=”/js/tabs/css/e8tabs1_wev8.css” rel=”stylesheet” /> <link rel=”stylesheet” href=”/css/ecology8/request/searchInput_wev8.css” type=”text/css” /> <link rel=”stylesheet” href=”/css/ecology8/request/seachBody_wev8.css” type=”text/css” /> <link rel=”stylesheet” href=”/css/ecology8/request/hoverBtn_wev8.css” type=”text/css” /> <script type=”text/javascript” src=”/js/ecology8/request/hoverBtn_wev8.js”></script>
	2、在页面上的任何一个地方增加如下div <div class=”e8_box“> <div class=”e8_boxhead”> <div class=”div_e8_xtree” id=”div_e8_xtree”></div> <div class=”e8_tablogo” id=”e8_tablogo”></div> <div class=”e8_ultab”> <div class=”e8_navtab” id=”e8_navtab”> <span id=”objName”></span> </div> <div> <ul class=”tab_menu“> <li class=”e8_tree“> <a href=”#”></a> </li> <%if(_fromURL.equals(“3″)){ %> <li class=”current”> <a onmouseover=”javascript:showSecTabMenu(‘.e8_box’,’tabcontentframe’);” href=”/docs/category/DocSecCategoryBaseInfoEdit.jsp?id=<%=kv.get(“id”) %>” target=”tabcontentframe”> <%=SystemEnv.getHtmlLabelName(1361,user.getLanguage()) %> <span id=”test”></span> </a> </li> <li> <a href=”/docs/category/DocSecCategoryRightEdit.jsp?id=<%=kv.get(“id”) %>” target=”tabcontentframe”> <%=SystemEnv.getHtmlLabelName(19174,user.getLanguage()) %> </a> </li> <li> <a href=”/docs/category/DocSecCategoryEditionEdit.jsp?id=<%=kv.get(“id”) %>” target=”tabcontentframe”> <%=SystemEnv.getHtmlLabelName(19450,user.getLanguage()) %> </a> </li> <li> <a href=”/docs/category/DocSecCategoryCodeRuleEdit.jsp?id=<%=kv.get(“id”) %>” target=”tabcontentframe”> <%=SystemEnv.getHtmlLabelName(19542,user.getLanguage()) %> </a> </li> <li> <a href=”/docs/category/DocSecCategoryTempletEdit.jsp?id=<%=kv.get(“id”) %>” target=”tabcontentframe”> <%=SystemEnv.getHtmlLabelName(16448,user.getLanguage()) %> </a> </li> <li> <a href=”/docs/category/DocSecCategoryDocPropertiesEdit.jsp?id=<%=kv.get(“id”) %>” target=”tabcontentframe”> <%=SystemEnv.getHtmlLabelName(19451,user.getLanguage()) %> </a> </li> <li> <a href=”/docs/category/DocSecCategoryCustomSearchEdit.jsp?id=<%=kv.get(“id”) %>” target=”tabcontentframe”> <%=SystemEnv.getHtmlLabelName(20237,user.getLanguage()) %> </a> </li> <li> <a href=”/docs/category/DocSecCategoryApproveWfEdit.jsp?id=<%=kv.get(“id”) %>” target=”tabcontentframe”> <%=SystemEnv.getHtmlLabelName(30041,user.getLanguage())+SystemEnv.getHtmlLabelName(30835,user.getLanguage()) %> </a> </li> <%} %> </ul> <div id=”rightBox” class=”e8_rightBox”> </div> </div> </div> </div> <div class=”tab_box”> <div> <iframe src=”<%=url %>” id=”tabcontentframe” name=”tabcontentframe” class=”flowFrame” frameborder=”0″ height=”100%” width=”100%;”></iframe> </div> </div> </div> 注意：红色标注的样式或ID是固定的，不能改动！！另外，e8_tree所表示的li是用于有左侧树的时候用的，如果没有左侧收缩树，可以没有该li。绿色部分是用于防止动态数字的。橘黄色部分是新加的。
	3、当页面加载完成后，在页面上调用如下方法 $(‘.e8_box’).Tabs({ getLine:1, iframe:”tabcontentframe”， staticOnLoad:true }); <iframe id=”tabcontentframe” name=”tabcontentframe” onload=”update()”></iframe> getLine:是否需要下标指示器，默认为1，该参数不用改动； iframe：tab页要加载的内容iframe的ID
	效果图如下：
例子	例子：http://192.168.4.44:8080/docs/category/DocCategoryTab.jsp?id=39&_fromURL=3
组件初始化参数	是否必须	类型	描述
getLine	否	String	是否需要下标指示器，默认为1，该参数不用改动；
iframe	否	String	tab页要加载的内容iframe的ID
topTitle	否	string	iframe加载完成时需要加载的toptile的ID名，默认值是【topTitle】
staticOnLoad	否	boolean	是否使用静态onload事件，默认是false。即将onload事件写在iframe中，如: <iframe onload=”update()”/> 如果设置为true，那么iframe中一定要写onload=”update()”
needTopTitle	否	boolean	是否需要提取topTitle的内容，默认为true
needLine	否	boolean	是否需要显示tab之间的分割竖线，默认为true
image	否	boolean	是否需要显示tab前的图标，默认为true
needInitBoxHeight	否	boolean	是否需要初始化tab内容页的初始化高度，默认为true
needFix	否	boolean	是否需要将tab页固定，默认为false。该属性结合needInitBoxHeight使用，只有needInitBoxHeight=true时才生效。
tabMenuHeight	否	int	用于设置tab的高度，如果指定了该参数，那么tab的高度就按照该参数设置。
container	否	String	tab容器ID或者class，默认为.e8_box. 如.e8_box，必须是完整的jquery selector，如果是ID，则为”#e8_box”
mouldID	否	string	模块ID，具体参见【模块ID】定义，如工作流程使用以下方法获取： <%= MouldIDConst.getID(“workflow”)%>
hideSelector	否	String	用于设置移上去自动隐藏的二级菜单，如果有多个，可以以,分隔。必须是完整的jquery selector，如果是ID，则为”#e8_box”
containerHide	否	boolean	是否默认隐藏hideSelector所指定的对象，默认为false。
objName	否	String	导航对象名称
navLogo	否	String	自定义图标的url地址
navLogoEvent	否	Function	定义图标的click触发事件
ifrmCallback	否	String	当iframe加载完成时回调函数，传递两个参数：iframe对象和当前容器对象，仅给定回调函数名称，不需要括号。页面上定义如下格式的函数： function test(ifrmme,container)
notRefreshIfrm	否	boolean	当切换tab页时不重新加载iframe时，为避免右部按钮晃动，请将该参数置为true
对TAB提供了以下2个功能函数
方法1	返回类型	描述
$(“.e8_box”).Tabs({ method:”set”, test: 100000 });	无	用于更新指定tab页的数值
方法参数	是否必须	类型	描述

方法2	返回类型	描述
__tabNamespace__.update(container)	无	重新调整tab页的宽度
方法参数	是否必须	类型	描述
container	否	string	容器的id，如.e8_box，默认是.e8_box
方法3	返回类型	描述
__tabNamespace__.getIframeDocument2(container)	undefined或者是iframe的document对象	如果iframe加载完成了，那么就返回document对象，否则返回空值
方法参数	是否必须	类型	描述
container	否	string	容器的id，如.e8_box，默认是.e8_box
方法4	返回类型	描述
__tabNamespace__.getIframeContentWindow(container)	undefined或者是iframe的window对象	如果iframe加载完成了，那么就返回window对象，否则返回空值
方法参数	是否必须	类型	描述
container	否	string	容器的id，如.e8_box，默认是.e8_box
方法5	返回类型	描述
__tabNamespace__.refreshTab	无	非iframe模式的开关树方法
方法参数	是否必须	类型	描述
_document	否	string	树所在的页面的document对象
isClose	否	boolean	强制关闭树
isOpen	否	boolean	强制打开树（优先级高于isClose)
changeIcon	否	boolean	仅仅改变开关的状态（优先级最高）
方法6	返回类型	描述
__tabNamespace__.toggleleft	无	iframe模式的开关树方法
方法参数	是否必须	类型	描述
_document	否	string	树所在的页面的document对象
isClose	否	boolean	强制关闭树
isOpen	否	boolean	强制打开树（优先级高于isClose)
changeIcon	否	boolean	仅仅改变开关的状态（优先级最高）
方法7	返回类型	描述
__tabNamespace__.setTabObjName	无	回填tab组件中的导航栏信息
方法参数	是否必须	类型	描述
name	是	string	要回填的信息
_window	否	window	待回填TAB所在的页面的window对象，不填默认为当前window
方法8	返回类型	描述
__tabNamespace__.showSecTabMenu	无	用于鼠标移动到TAB上时弹出二级菜单
方法参数	是否必须	类型	描述
selector	是	string	二级菜单的选择器
iframe	否	string	二级菜单所在的iframe的ID，不填默认为当前页面
方法9	返回类型	描述
__tabNamespace__.rebindNavEvent	无	用于绑定tab导航图标的事件
方法参数	是否必须	类型	描述
container	是	string	tab容器，默认为.e8_box
showTree	否	string	是否展开左侧树，默认为false
isBindNavEvent	否	boolean	是否绑定tab图标事件，默认为true
navEventHandler	否	function	tab图标自定义事件
_options	否	json	_window：指定window对象； hasLeftTree：指定是否有左侧树，默认为true。
方法10	返回类型	描述
__tabNamespace__.disableTabBtn	无	禁用顶部按钮
方法参数	是否必须	类型	描述
container	否	string	按钮区所在的容器，默认为.e8_box
方法11	返回类型	描述
__tabNamespace__.enableTabBtn	无	启用顶部按钮
方法参数	是否必须	类型	描述
container	否	string	按钮区所在的容器，默认为.e8_box
模块ID定义

#本配置文件定义所有模块ID

#工作流程
workflow=mnav0.png

#知识管理
doc=mnav1.png

#人力资源
resource=mnav2.png

#客户管理
customer=mnav3.png

#项目管理
proj=mnav4.png

#财务管理
fna=mnav5.png

#资产管理
assest=mnav6.png

#门户管理
portal=mnav7.png

#协同管理
joint=mnav8.png

#会议管理
meeting=mnav9.png

#设置中心
setting=mnav10.png

#证照管理
cpcompany=mnav11.png

#集成管理
integration=mnav12.png

#通信管理
communicate=mnav13.png

#工作微博
blog=mnav19.png

#协作管理
collaboration=mnav14.png

#邮件
mail=mnav17.png

#相册
photo=mnav21.png

#计划任务
plan=mnav22.png

#日程
schedule=mnav20.png

#公文
offical=mnav15.png

#网上调查
voting=mnav18.png

#车辆管理
car=mnav16.png


简单页面tab页使用方法
1、在页面body元素下增加如下代码：
<jsp:include page=”/systeminfo/commonTabHead.jsp”> <jsp:param name=”mouldID” value=”blog”/> </jsp:include>
2、在</body>上面增加以下代码：
<jsp:include page=”/systeminfo/commonTabFoot.jsp”></jsp:include>

经过以上两步，就能够自动给页面增加tab头了

转载请注明：赫非域 » ecology开发之TAB页组件

与本文相关的文章