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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery带控制按钮轮播图插件
Jul 31 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
由php的call_user_func传reference引发的思考
2010/07/23 PHP
twig里使用js变量的方法
2016/02/05 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
Python基础之函数用法实例详解
2014/09/10 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
Python中断多重循环的思路总结
2019/10/04 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
python定义类的简单用法
2020/07/24 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
怎样写好自荐信和推荐信
2013/12/26 职场文书
搞笑创意广告语
2014/03/17 职场文书
培训协议书范本
2014/04/22 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
银行业务授权委托书
2014/10/10 职场文书