jQuery EasyUI Layout实现tabs标签的实例
一、概述:
1、引入jquery.js与easyUi相关文件
2、效果如图:
二、创建Layout主页:
<%@ page language=java pageEncoding=UTF-8%> <%@ taglib prefix=c uri=http://java.sun.com/jsp/jstl/core%> <!DOCTYPE HTML > <html> <head> <title>SSHE DEMO</title> <Meta http-equiv=pragma content=no-cache> <Meta http-equiv=cache-control content=no-cache> <Meta http-equiv=expires content=0> <Meta http-equiv=keywords content=keyword1,keyword2,keyword3> <Meta http-equiv=description content=This is my page> <script type=text/javascript src=jslib/jquery-easyui-1.3.1/jquery-1.8.0.min.js></script> <script type=text/javascript src=jslib/jquery-easyui-1.3.1/jquery.easyui.min.js></script> <script type=text/javascript src=jslib/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js></script> <link rel=stylesheet href=jslib/jquery-easyui-1.3.1/themes/default/easyui.css rel=external nofollow type=text/css></link> <link rel=stylesheet href=jslib/jquery-easyui-1.3.1/themes/icon.css rel=external nofollow type=text/css></link> <script type=text/javascript src=jslib/syUtil.js></script> </head> <body class=easyui-layout> <p data-options=region:'north' style=height: 60px;></p> <p data-options=region:'south' style=height: 20px;></p> <p data-options=region:'west' style=width: 200px;> <jsp:include page=layout/west.jsp></jsp:include> </p> <p data-options=region:'east',title:'east',split:true style=width: 200px;></p> <p data-options=region:'center',title:'欢迎使用SSHE示例系统' style=overflow: hidden;> <jsp:include page=layout/center.jsp></jsp:include> </p> <jsp:include page=user/login.jsp></jsp:include> <jsp:include page=user/reg.jsp></jsp:include> </body> </html>
三、创建中间页面:
<%@ page language=java pageEncoding=UTF-8%> <script type=text/javascript> function addTab(opts) { var t = $('#layout_center_tabs'); if (t.tabs('exists', opts.title)) { t.tabs('select', opts.title); } else { t.tabs('add', opts); } } </script> <p id=layout_center_tabs class=easyui-tabs data-options=fit:true,border:false style=overflow: hidden;> <p title=首页></p> </p>
四、菜单页:west.jsp
<%@ page language=java pageEncoding=UTF-8%> <p class=easyui-panel data-options=title:'功能导航',border:false,fit:true> <p class=easyui-accordion data-options=fit:true,border:false> <p title=系统菜单 data-options=iconCls:'icon-save'> <ul id=layout_west_tree class=easyui-tree data-options= url : '${pageContext.request.contextpath}/menuAction!getAllTreeNode.action', parentField : 'pid', lines : true, onClick : function(node) { if (node.attributes.url) { var url = '${pageContext.request.contextpath}' + node.attributes.url; addTab({ title : node.text, closable : true, href : url }); } } ></ul> </p> <p title=Title2 data-options=iconCls:'icon-reload'></p> </p> </p>
相关推荐;
div+css 实现tabs标签的示例代码_html/css_WEB-ITnose
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡_jquery
javascript动态添加删除tabs标签的方法_javascript技巧
原文地址:https://www.jb51.cc/weapp/1202527.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。