今天用到jquery easyui 的tab组件,看看demo发现挺好用的。
demo里提供了3个方法分别是:
addTab()
getSelected()
update()
而我在开发中遇到一个问题,就是这个tab组件右上角有个小叉号可以关闭tab选项卡,
但是它没提供删除tab的方法,也就是说他把删除tab选项卡的方法封装了。
(当你打开一个tab页,再点击打开时要给出提示,它已经打开了,而不是再打开同样的tab,
否则会重复打开,所以我需要在打开tab时记录打开的tab,关闭tab时再从记录中删除它,
这样我就能保证一个tab只能打开一次,不要重复显示)
这大概是所有开发者最头疼的问题,你封装了,而我确实需要这个方法,总不能去研究你的源码吧?
如果源码写的很大,超过500行就不要去研究了,那样会更费时间。
我选择了另辟蹊径。
我可以声明一个数组,在添加tab页时,把这个tab的id加到数组中。
当次页面未关闭,用户又点击打开次tab时,我先处理这个数组,循环寻找每个id是否存在,
(不存在表明此tab已经关闭,从数组删除此id)
如果此元素存在,表明页面已经打开此tab,这时不要再打开了,要给用户提示已经打开了。
看看代码:
var isshow=new Array();
function validateShow(){
for(var i=0;i<isshow.length;i++){
var temp=isshow[i];
if(document.getElementById(temp)){
}else{
isshow.splice(i,1);
}
}
}
function isexisttab(id){
validateShow();
var falg=false;
for(var i=0;i<isshow.length;i++){
var temp=isshow[i];
if(temp==id){
falg=true;
}else{
falg=false;
}
}
return falg;
}
function createTab(id,pId,name,url){
//alert(id+pId+name+"jjj"+url);
//alert("here--"+id+"--"+pId+"--"+name);
if(isexisttab(id)){
alert("此页面已经打开");
}else{
$('#page2').tabs('add',{
title:name ,
content:'<div title=\"'+name+'\" id=\"'+id+'\" closable="true" style="overflow:hidden;width:100%;height:100%;" \><iframe scrolling="yes" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe></div>',
iconCls:'icon-save',
closable:true
});
isshow.push(id);
}
//////
}
这里我要说js中从数组删除元素的方法 .splice(i,1);
arrayObj.splice(deletePos,deleteCount);//删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素
如果我们再for中遍历,删除当前元素就是.splice(i,1);
从前没用到过删除方法,今天一查,居然js没有数组删除元素的remove方法!!!
太令我惊讶了,不过可以.splice(i,1);实现同样效果,在此写博客记录下来。
分享到:
相关推荐
jQuery EasyUI EasyUI 组件范例
jquery-easyui-1.2.2jquery-easyui-1.2.2jquery-easyui-1.2.2
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解...
jQuery EasyUI 常用UI组件.RARjQuery EasyUI 常用UI组件.RARjQuery EasyUI 常用UI组件.RAR
jqueryEasyUI 下载,及api下载 jqueryEasyUI 下载,及api下载
jquery-easyui-1.7.0 官方文档以及源码,演示demo,内容详细
jquery-easyui-1.3.3源码 未压缩,包含完整源文件,方便大家学习。
jQuery EasyUI jquery-easyui-1.5.5.6 版 API 中文版 PDF和chm版本,jQuery
这里面是 jQuery-easyUI的引用 以及引用的示例,里面有一份教程文档 可以参照着学习和借鉴
该资源为jquery-easyui-1.5.5版本,包含easyui插件所依赖的js和css
jquery-easyui-1.3.3
jquery-easyui-1.3.3+jQuery1.12.4未压缩混淆版,研究IE8下最后一个兼容版本的easyui未混淆源码的最佳选择,学习javascript的捷径。
jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档...
jquery EasyUI的API,方便使用easyui查看。。。。。。
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
jquery-easyui-1.2.4文档及文件,内有demo
jquery-easyui-1.4.4包含css和js 及一些案例,easyui1.4.4
jquery-easyui-1.3.5打包下载
jQuery EasyUI 官方API文档中文版 version 1.4.2 Build 1 作者:王锦阳 CSDN账号:richie696 EasyUI专题 http://download.csdn.net/album/detail/343 文档 EasyUI每个组件的属性,方法和事件。用户可以很容易地扩展...