jQuery EasyUI Layout实现tabs标签的实例


Posted in jQuery onSeptember 26, 2017

jQuery EasyUI Layout实现tabs标签的实例

一、概述:

1、引入jquery.js与easyUi相关文件

2、效果如图:

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">
  <div data-options="region:'north'" style="height: 60px;"></div>
  <div data-options="region:'south'" style="height: 20px;"></div>
  <div data-options="region:'west'" style="width: 200px;">
    <jsp:include page="layout/west.jsp"></jsp:include>
  </div>
  <div data-options="region:'east',title:'east',split:true" style="width: 200px;"></div>
  <div data-options="region:'center',title:'欢迎使用SSHE示例系统'" style="overflow: hidden;">
    <jsp:include page="layout/center.jsp"></jsp:include>
  </div>

  <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>
<div id="layout_center_tabs" class="easyui-tabs" data-options="fit:true,border:false" style="overflow: hidden;">
  <div title="首页"></div>
</div>

四、菜单页:west.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<div class="easyui-panel" data-options="title:'功能导航',border:false,fit:true">
  <div class="easyui-accordion" data-options="fit:true,border:false">
    <div 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>
    </div>
    <div title="Title2" data-options="iconCls:'icon-reload'"></div>
  </div>
</div>

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

jQuery 相关文章推荐
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery EasyUI开发技巧总结
Sep 26 #jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 #jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 #jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 #jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 #jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 #jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 #jQuery
You might like
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
Destoon实现多表查询示例
2014/08/21 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
jquery密码强度校验
2015/12/02 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
基于Python绘制个人足迹地图
2020/06/01 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
如何填写个人简历自我评价
2013/12/10 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
2014年班务工作总结
2014/12/02 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技