easyui页签更新

1.首先引入这个js文件 <script src="/Scripts/tabs.js" type="text/javascript"></script>我直接贴js源码

/*
Author:张浩华
Date:2011.12.27 1:18
*/

/* 打开一个标签 */
function OpenTab(title, url, icon){
/**
如果这个标题的标签存在,则选择该标签
否则添加一个标签到标签组
*/
if($("#tabs").tabs(‘exists‘, title)){
$("#tabs").tabs(‘select‘, title);
}else{
$("#tabs").tabs(‘add‘,{
title: title,
content: createTabContent(url),
closable: true,
icon: icon
});
}
}

/* 生成标签内容 */
function createTabContent(url){
return ‘<iframe style="width:100%;height:100%;" scrolling="auto" frameborder="0" src="‘ + url + ‘"></iframe>‘;
}

$(function(){

//刷新
$("#m-refresh").click(function(){
var currTab = $(‘#tabs‘).tabs(‘getSelected‘); //获取选中的标签项
var url = $(currTab.panel(‘options‘).content).attr(‘src‘); //获取该选项卡中内容标签(iframe)的 src 属性
/* 重新设置该标签 */
$(‘#tabs‘).tabs(‘update‘,{
tab:currTab,
options:{
content: createTabContent(url)
}
})
});

//关闭所有
$("#m-closeall").click(function(){
$(".tabs li").each(function(i, n){
var title = $(n).text();
$(‘#tabs‘).tabs(‘close‘,title);
});
});

//除当前之外关闭所有
$("#m-closeother").click(function(){
var currTab = $(‘#tabs‘).tabs(‘getSelected‘);
currTitle = currTab.panel(‘options‘).title;

$(".tabs li").each(function(i, n){
var title = $(n).text();

if(currTitle != title){
$(‘#tabs‘).tabs(‘close‘,title);
}
});
});

//关闭当前
$("#m-close").click(function(){
var currTab = $(‘#tabs‘).tabs(‘getSelected‘);
currTitle = currTab.panel(‘options‘).title;
$(‘#tabs‘).tabs(‘close‘, currTitle);
});
});

2.父页面html调用位置

<div class="easyui-tabs" fit="true" border="false" id="tabs">
<div title="首页">
<iframe frameborder="0" width="100%" src="about:blank" height="600" id="topPage"
name="topPage"></iframe>
</div>
</div>

3.//下面因为是在子页面打开的页签所以加了个parent

function Open(text, url, height) {

if (parent.$(‘#tabs‘).tabs(‘exists‘, text)) {
var tab = $(‘#tabs‘).tabs(‘getSelected‘);
alert(33);
$("#tabs").tabs(‘update‘, {
tab: tab,
options: {

href: url
}
});
tab.panel(‘refresh‘);
// parent.$(‘#tabs‘).tabs(‘close‘, text);
// parent.$(‘#tabs‘).tabs(‘add‘, {
// title: text,
// closable: true,
// content: createTabContent(url),
// url: url
// });
//parent.$(‘#tabs‘).tabs(‘select‘, text);
} else {
parent.$(‘#tabs‘).tabs(‘add‘, {
title: text,
closable: true,
content: createTabContent(url),
url: url
});
}
}

子页面调用语句:Open("收藏夹管理", "/Favorites/FavoritesMenuManage.aspx");

时间: 2024-10-01 22:04:05

easyui页签更新的相关文章

ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 在点击左侧菜单中的选项时,我希望有Extjs.EasyUI等中类似的tab页签功能,因为这样可以支持多个页面的浏览,有时候我们可能需要同时打开多个页

JavaScript选项卡/页签/Tab的实现

选项卡,也称页签,英文用Tab(Module-Tabs)表示.Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的. Tab可以在相同的空间里展示更多的信息,它把相似的主题分为一类,用户更好理解.Tab的应用可以缩短页面屏长,降低信息的显示密度,同时又不牺牲信息量.在这种趋势下,Tab这种交互元素成为了一个越来越普遍的应用. Web里Tab可能最早2005年是amazon.com的首页引入的,如今各大门户,电商及各色网站的首页都采用了Tab表现形式.当前Sina和网易首

1、CRM2011编程实战——清空指定页签下面的所有选项,并对页签下面的指定控件进行操作

需求:当页面加载时,"呼叫编号"保持不变,"任务号"自动更新,"接报时间"和"发生日期"自动设置为当天日期和时间,其它选项全部恢复为初始状态. 字段说明: 控件名称 值 控件名称 值 控件名称 值 反馈单登录 tab_4 任务号 hxcs_ftaskcode 接报时间 hxcs_fdatetimeofcasehappended 发生日期 hxcs_fdatetimeofcasehappended 呼叫编号 hxcs_fcall

记一次基于vue的spa多页签实践经验

前言 最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下: 要求通用性高,需要在后期四十多个子项目中使用,所以大部分地方都做成可配置的. 要求做成脚手架的形式.可以 npm 安装 要求实现多页签,并且可以通过浏览器 url 回显多页签.而且页签内要维护一个历史记录,可以后退 组件要求异步加载,减少首屏加载时间. 很明显,这就是一个 类 ERP 的应用. 做过 JSP 等后台的同学,对多页签应该都很熟悉吧. 那接下来我们就来谈谈实现. 通用性高

高仿富途牛牛-组件化(一)-支持页签拖拽、增删、小工具

目录 一.概述 二.效果展示 三.实现方案分析 1.第一阶段 2.第二阶段 3.第三阶段 一.概述 好久没有做业务相关的UI功能了,比较炫酷的交互效果也写的少了,最近花了2天时间写了一个简易的高仿富途牛牛组件化的功能,当然了这只是一个初步的效果,而且没有做贴图.美化等工作,但是基本的功能已经有了.本篇文章只是作为组件化的一个开始,后续还会陆续引入更多关于组件化的介绍,相信功能也会越来越丰富.除此之外,富途牛牛的一些其他高级功能也会陆续引入,不乏有k线.分时.五日.指标.自选这样的复杂功能. 自选

office如何去除多页签

写文档会遇到同时打开多个文档,偶尔可能需要对比,而有时office会出现跟浏览器类似的多页签界面.如何去除多页签,office本身没有此加载项,一般都是作为插件或组件形式另外安装,导致我们不知道从哪里设置.不废话,上图: 1.文件 2.选项 3.加载项 4.转到... 5.从可用加载项中找到“document tab”项,去掉前边的勾选项即可.

带分类页签搜索框的实现

需求:类似于淘宝搜索框,可以根据选择不同的分类进行帅选查询,效果图如下: aspx代码如下: <div id="divSearch" class="form-wrapper"> <div class="tab_area"> <div id="divWaterMeterCode" class="tab hover"><span onclick="setSea

android123 zhihuibeijing 新闻中心-新闻 页签 ViewPagerIndicator实现

## ViewPagerIndicator ## 使用导入ViewPagerIndicator库的方式相当于可以改源码,打包编译Eclips可以自动完成. ViewPager指针项目,在使用ViewPager的时候能够指示ViewPager所在的位置,就像Google Play中切换的效果一样,还能使用在应用初始化的介绍页面 1. 引入ViewPagerIndicator库 2. 编写布局文件 <com.viewpagerindicator.TabPageIndicator android:id

EBS OAF开发中如何实现功能页签(Global Tab)

(版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处:否则请与本人联系,违者必究) 功能页签的实现不需要任何编码,和subTab不一样,可以和subTab共存.其主要实现是靠配置,步骤如下: 1.      建立两个OAF页面的Function. 2.      为每个function分别建立一个HTML Tab 类型的菜单,并把相应的Function加入到菜单中,但不要声明Prompt,如下: 3.      建立一个Home Page类型的菜单,并把上面建立的两个HTM