EasyUI选项卡tab页面处理示例
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Full Layout - jQuery EasyUI Demo</title>
<%@ include file="/common/taglibs.jsp"%>
<link id="easyuiTheme" href="${ctx}/res/js/easyui/themes/metro/easyui.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/res/style/common-metro.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/res/js/easyui/themes/icon.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="${ctx}/res/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="${ctx}/res/js/jquery.corner.js"></script>
<script type="text/javascript" src="${ctx}/res/js/jquery.cookie.js"></script>
<script type="text/javascript" src="${ctx}/res/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
var PROJECT_PID=parent.PROJECT_ID;
var count=0;
var PROJECT_URL="${ctx}";
$(document).ready(function(){
//更改父窗体显示的标签名称
parent.$("#mainContainer").panel({title:"@钻井工序"});
//设置选项卡页面请求
$('#mytabs').tabs({
border:false,
onSelect:function(title){
if(title=='任务下发'&&count!=0){
var reqUrl = PROJECT_URL+"/drilling/task";
$("#iframeTask").attr("src",reqUrl);
}else if(title=='任务跟踪'){
count=1;
var reqUrl = PROJECT_URL+"/drilling/track";
$("#iframeTrack").attr("src",reqUrl);
}else if(title=='数据分析'){
count=1;
var reqUrl = PROJECT_URL+"/drilling/report";
$("#iframeReport").attr("src",reqUrl);
}
}
});
});
</script>
</head>
<body class="easyui-layout" >
<div id="mytabs" class="easyui-tabs" fit="true">
<div id="task" title="任务下发" data-options="iconCls:'icon-task',closable:false" style="padding: 10px;border: 0px;height: 100%;" >
<iframe id="iframeTask" name="iframeTask" src="${ctx}/drilling/task"
style="width: 100%;height: 100%;border: 0px;"></iframe>
</div>
<div id="track" title="任务跟踪" data-options="iconCls:'icon-track',closable:false" style="padding: 10px;height: 100%;" data-options="">
<iframe id="iframeTrack" name="iframeTrack" src="${ctx}/drilling/track"
style="width: 100%; height: 100%;border: 0px;"></iframe>
</div>
<div id="report" title="数据分析" data-options="iconCls:'icon-report',closable:false" style="padding: 10px;height: 100%;">
<iframe id="iframeReport" name="iframeReport" src="${ctx}/drilling/report"
style="width: 100%; height: 100%;border: 0px;"></iframe>
</div>
</div>
</body>
</html>
注意:分页封装参数属性:total,rows不要写错了,否则datagrid分页显示NaN错误(找了好久以为是框架嵌套的问题,后来发现误操作将total写成了toatl)。
EasyUI选项卡tab页面处理示例的更多相关文章
- easyui的tab加载页面中的form重复提交
http://blog.csdn.net/fxz1982/article/details/8987769 Easyui中的tabs组件以href方式加载目标页面,如果目标页面中有dialog或者win ...
- Easyui实用视频教程系列---Tree点击打开tab页面
Easyui实用视频教程系列---Tree点击打开tab页面 首先 我们 要搭建环境 easyui 环境 然后 把tree 给创建出来 在某个位置 粘贴 下面代码 <ul id="tt ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码]
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...
- 由easyui的tab在ie下渲染失败,发现的一个有意义的问题
今天项目组的同事反映,在IE浏览器下,所有用easyui编写的tab控件都加载不出来,只会显示一个Loading的提示在控件的内容显示区. 刚分析这个问题,首先怀疑是使用easyui的tab的脚本写法 ...
- easyui中Tab的tools按钮刷新当前tab
easyui中Tab的tools按钮刷新当前tab 点击刷新按钮,刷新当前Tab选项卡. $('#index_tabs').tabs({ fit : true, border : false, too ...
- VUE实现Studio管理后台(二):Slot实现选项卡tab切换效果,可自由填装内容
作为RXEditor的主界面,Studio UI要使用大量的选项卡TAB切换,我梦想的TAB切换是可以自由填充内容的.可惜自己不会实现,只好在网上搜索一下,就跟现在你做的一样,看看有没有好事者实现了类 ...
- html tab页面切换事件。
$(document).bind("visibilitychange",function(e){ //只对tab页面切换有效 //document.visibilityState ...
- 选项卡 tab切换
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用Fragment制作的Tab页面产生的UI重叠问题
本文出处:http://blog.csdn.net/twilight041132/article/details/43812745 在用Fragment做Tab页面,发现有时候进入应用会同时显示多个T ...
随机推荐
- RegexOptions枚举
在创建Regex类的实例时,构造函数的重载中有一个要求传入RegexOptions的一个枚举值,我相信这个枚举一定非常有用,否则不会要求在构造函数中传入.今天就来看一看这个枚举的作用. 我们干脆把代码 ...
- Android Fragment中使用Intent组件拍照
要在activity里面去接受,然后传递给fragment对象,fragment有很多回调调用不到 你的设备有摄像头吗? 为了确保市场上的大多数设备都能运行你的程序,必须在项目中做一些检测,保证使用的 ...
- 【转】高通平台android 环境配置编译及开发经验总结
原文网址:http://blog.csdn.net/dongwuming/article/details/12784535 1.高通平台android开发总结 1.1 搭建高通平台环境开发环境 在高通 ...
- MFC修改任务栏图标及程序运行exe图标
修改左上角的图标和任务栏里图标 在对话框构造函数中 1 CTestDlg::CTestDlg(CWnd* pParent )2 : CDialog(CTestDlg::IDD, pParent)3 { ...
- python刷取CSDN博文访问量之二
python刷取CSDN博文访问量之二 作者:vpoet 注:这个系列我只贴代码,代码不注释.有兴趣的自己读读就懂了,纯属娱乐,望管理员抬手 若有转载一定不要注明来源 #coding=utf ...
- Zookeeper 4、Zookeeper开发
1.登录Zookeeper客户端 #通过zkCli.sh可以登录到Zookeeper $ cd /usr/local/zookeeper-3.4.6/bin $ ./zkCli.sh #如果显示下面这 ...
- 【转】V4L2+swscale+X264+live555实现流媒体服务端
写这边博客,一方面是因为自己在做项目的时候不太做笔记,怕以后自己忘记了.另一方面,是让正在寻求资料的同行少走一点弯路吧.不能说我这个方案怎么的好,至少是有一点参考价值的.这边博客需要一定基础才能看明白 ...
- 用Matlab完成:从第一个人开始报数(从1到3报数),凡报到3的人退出圈子,问最后留下的是原来第几号的那位。
程序思路: (1)一圈人循环报数,报数报到3的人,将其置为0,表示被淘汰: (2)那么在接下去的循环中,被淘汰的人不参与报数: (3)直到仅有1人没被淘汰,并显示出他之前的编号. 程序实现如下: cl ...
- hdu2095 像水题的不错题 异或运算
异或运算的基础有点忘记了 先介绍一下..2个数异或 就是对于每一个二进制位进行位运算 具有2个特殊的性质 1.一个数异或本身恒等于0,如5^5恒等于0: 2.一个数异或0恒等于本身,如5^0恒等于5. ...
- jquery优化引发的思考
无意间看到jquery优化的一个细节让我觉得不可思议记录一下.仅仅只是换个地方代码就能提高数倍的效率,带给我的不是个仅是个小技巧,而是一总编程思想,技术大牛往往是在细节上体现. 通过缓存最小化选择操作 ...