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 相关文章推荐
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 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
短波收音机简介
2021/03/01 无线电
php中取得URL的根域名的代码
2011/03/23 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
jQuery版Tab标签切换
2011/03/16 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
Python isinstance判断对象类型
2008/09/06 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
临床医学系毕业生推荐信
2013/11/09 职场文书
资产经营总监岗位职责
2013/12/04 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
协议书怎么写
2014/04/21 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js