EasyUI Layout实现tabs标签实例详解

互联网 18-1-31

本文主要介绍jQuery EasyUI Layout实现tabs标签的实例的相关资料,希望通过本文能帮助到大家实现这样的功能，需要的朋友可以参考下，希望能帮助到大家。

jQuery EasyUI Layout实现tabs标签的实例

一、概述：

二、创建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技巧

以上就是EasyUI Layout实现tabs标签实例详解的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： tabs