jquery easyui 布局与动态打开窗口tabs

最新推荐文章于 2022-04-06 21:49:51 发布
最新推荐文章于 2022-04-06 21:49:51 发布
阅读量359 收藏
点赞数
分类专栏： jquery 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP '007_layout.jsp' starting page</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">
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css" />
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
	
	<script type="text/javascript">
	
			$(function(){
				
				$('a[title]').click(function(){
						var src = $(this).attr('title');
						var title = $(this).html();
						if($('#tt').tabs('exists' ,title)){
							$('#tt').tabs('select',title);
						} else {
							$('#tt').tabs('add',{   
							    title:title,   
							    content:'<iframe frameborder=0 style=width:100%;height:100% src='+ src +' ></iframe>',   
							    closable:true  
							});  
						}
				});
			});
	
	</script>
  </head>
  
  <body>
		<div id="cc" class="easyui-layout" fit=true style="width:100%;height:100%;">  
		    <div region="north" title="easyui-layout"  split="false" style="height:100px;"></div>  
		    <!-- 
		    <div region="south" title="South Title" split="true" style="height:100px;"></div>  
		    <div region="east" collapsed=true iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>  
		     -->
		    <div region="west"  iconCls="icon-ok" split="true" title="菜单" style="width:200px;">
				<div id="aa" class="easyui-accordion" fit=true >  
				    <div title="用户管理"  style="overflow:auto;padding:10px;">  
				    	<a title="jsp/001_message.jsp" >用户列表</a> <br/>
				    	<a title="jsp/002_window.jsp" >用户功能</a> 
				    </div>  
				    <div title="岗位管理"  selected="true" style="padding:10px;">  
				    </div>  
				    <div title="权限管理">  
				    </div> 
				    <div title="资源管理">  
				    </div> 				     
				</div>  
		    </div>  
		    <div region="center"  title="主界面" style="padding:5px;">
				<div id="tt" class="easyui-tabs" fit=true style="width:500px;height:250px;"> 
				</div>  
		    </div>  
		</div>  
  	
  </body>
</html>

镜水灵动
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui Tab页动态控制
katherine_1207的专栏
09-28 377
// 页面载入         $(document).ready(function() {                         // 入库单不同状态下查询页面代码             var listSize = $("#listSize").val();             for (var i = 0 ; i                 var sto
实现对easyUI的tabs标签卡进行动态显示隐藏
weixin_42933886的博客
11-20 1223
&nbsp;&nbsp;&nbsp;&nbsp;对于easyUI中的layout布局，可能会有这样的需求，想动态的对其region进行动态的隐藏，发现easyUI并没有为我们提供这样的方法，所以我们需要对layout自定义方法来实现。可以隐藏除某个region，center除外。 &nbsp;&nbsp;&nbsp;&nbsp;实现layout扩展方法代码如下： /** * layout方法...
使用easyui创建tabs组件和动态添加
java开发指南博客 【转载】
08-09 160
@author YHC 当使用jQuery EasyUI 容易的添加tabs,你就应该调用'add'方法. 在这个示例中我们将动态的添加tabs使用iframe显示在一个页面上,当点击add按钮一个新的tab将被添加,如果tab已经存在,它将被激活. 查看Demo 步骤1:创建 tabs &lt;div style="margin-bottom:10px"&gt; ...
EasyUI(树形菜单、动态添加tab)
qq_63845026的博客
04-06 1422
目录 一：准备工作 二：树形菜单+动态添加tab 准备工作： 将准备的插件、样式、库按图导入项目中，不会的话详情看我上一篇文章
jQuery EasyUI 开源插件套装 完全替代ExtJS
10-29
1. **组件丰富**：EasyUI 包含了诸如菜单（Menu）、按钮（Button）、布局（Layout）、折叠面板（Accordion）、标签页（Tabs）、树形视图（Tree）、数据网格（DataGrid）、窗口（Window）以及表单（Form）等多种常见...
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
09-05
在本问题中，我们关注的是如何使 EasyUi 的 tabs 组件在 Internet Explorer (IE) 浏览器中实现高度和宽度的自适应，以便于窗口大小变化时，tabs 依然能保持良好的布局。 首先，我们来看一下初始的 HTML 代码结构： ...
jQuery EasyUI 1.4.5 版 API 中文版.rar
08-17
1. **基本组件**：jQuery EasyUI的基础包括如`dialog`（对话框）、`panel`（面板）、`window`（窗口）和`layout`（布局）。这些组件可以帮助开发者创建出各种常见的页面结构，比如用于显示信息的弹窗、可自定义布局...
jQuery EasyUI 1.4.3 API
04-04
- **Tabs（标签页）**：用于组织多个内容区域，可动态添加、删除和切换标签页。 - **DatePicker（日期选择器）**：提供日历控件，方便选择日期。 - **Layout（布局）**：对页面进行分隔，实现可调整大小的区域。 ...
jQuery EasyUI 1.4
08-30
另外，还有诸如 `tabs`（选项卡）、`pagination`（分页）、`slider`（滑块）和 `datebox`（日期选择器）等组件，它们都是网页开发中的常见需求，jQuery EasyUI 都提供了对应的解决方案。 在使用过程中，遇到问题时...
横向和树形tab tab菜单
05-31
横向和树形tab横向和树形tab横向和树形tab横向和树形tab横向和树形tab横向和树形tab横向和树形tab横向和树形tab
easyui 动态加载tab
捣蛋的博客
06-30 2301
easyui框架动态加载tabs闲话不多说，直接奔入主题。jsp页面 需要加一个tab的id: &lt;div id="texttabs" class="easyui-tabs" style="width:100%;height:100%;"&gt; &lt;/div&gt;js:function testTabs(){ //3个tabs的路径urls = [ basePath + 'test1....
jQuery EasyUI使用教程之创建简单窗口
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
04-27 1042
jQuery EasyUI最新试用版下载请猛戳>> 创建一个窗口非常简单，我们创建一个 DIV 标记： 1 2 3 div id="win" class="easyui-window" title="My Window" style="width:300px;height:100px;padding:5px
浏览器滚动条位置
weixin_44260504的博客
03-27 1700
浏览器滚动条位置 查看滚动条距离 ie9 以下不兼容： window.pageXOffset / window.pageYOffset ie9以下版本： document.body.scrollLeft / Top； document.documentElement.scrollLeft / Top； 这两个属性在ie9以下的每个版本中都只存在一个，所以处理兼容性问题时把它们相加就可以了。 ...
easyui打开新的选项卡_Jquery EasyUI选项卡-Tabs的使用方法
weixin_39646084的博客
12-18 242
以下是easyUI的tabs的简单实用介绍。var e =$('#main').tabs('exists','accordion');if(e==true){$('#main').tabs('select','accordion');return ;}$('#main').tabs('add',{title:'accordion',href:'accordion.html',closable:tr...
jquery easyui 在子tab页中打开新tab页(关于easyUI在子页面增加显示tabs的一个问题)
wzp6010625的博客
11-01 2503
文章转自:http://breezylee.iteye.com/blog/1762811 在父页面点个链接能动态看到子页面的情况太简单，请看easyUI官网：http://www.jeasyui.com/tutorial/layout/tabs2.PHP 现在说的是在子页面点个按钮也能触发增加子页面的情况。 情景是，在父页面上有个div如： Html代码  
EasyUI如何在tab页中打开一个新页面
王明晓的博客
04-09 5537
&lt;a href="b.jsp" onclick="addTab(this); return false;"&gt;b页面&lt;/a&gt;function addTab(e){ var url = e.href+".action" var t = $('#index_centerTabs'); var content = '&lt;iframe scrolling="au.
EasyUI(5) $.fn.datagrid.methods[_86e] is not a function(easyui扩展插件冲突错误)
郑清
12-04 8108
出现如下错误：$.fn.datagrid.methods[_86e] is not a function 在项目中我出现的问题是使用可编辑表格扩展插件(Cell Editing in DataGrid)的时候没有相应的效果 后来发现是和datagrid-扩展列信息中的 jeasyui.extensions.datagrid.tooltip.js 插件冲突 解决方法: --> 在to...
easyUI笔记11
最新发布
08-08
本文主要是对jQuery EasyUI的学习过程进行总结和介绍。jQuery EasyUI是一个基于jQuery框架的插件，集成了多种用户界面插件，可以帮助快速搭建出美观、易用的前端界面。 在开始使用jQuery EasyUI之前，首先需要下载...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值