easyUI Tab href,content区别

来源：互联网发布：os x 安装软件编辑：程序博客网时间：2024/05/29 08:32

easyUI的Tab面板是继承了panel

Tab中js的两种用法：

说明：jsp主页面添加一个id为tab的div，要引入easyUI的相关js、css

</div>

第一种，使用content：

/添加tab，这里有一个name属性

function f_addTab(name,tabId,title,url){

if ($("#tab").tabs('exists', tabId)) {

$('#tab').tabs('select', tabId);

// $('#'+tabId).attr('src',url);//刷新

} else {

$('#tab').tabs('add',{

id:tabId,

title:title,

content:'<iframe name="'+name+'" src="'+url+'" frameborder="0" style="height:100%;width:100%;" "></iframe>',

closable:true ,//tab显示关闭键

cache:true //设置缓存，如果为false，在每次选中所选的tab时，都会加载一次页面内容

});

}

第二种，使用href：

function f_addHref(tabId,title,hrefUrl){

if ($("#tab").tabs('exists', tabId)) {

$('#tab').tabs('select', tabId);

$('#'+tabId).attr('src',url);//刷新

} else {

$('#tab').tabs('add',{

id:tabId,

title:title,

href:hrefUrl,

closable:true ,

cache:true

});

}

第一种和第二种的区别：

content属性是添加整个url请求中完整的jsp页面，而href属性只引入url中的<body></body>中的内容，具体可参考这个网站：

http://www.jeasyuicn.com/post-49.html

如果使用href创建tab，那么使用datagrid时，每个页面的grid的id都不能重名，否则会无法显示，因为href属性是不断在原来的页面插入url中请求的页面内容，一旦datagrid的id重名，那么在第二个datagrid就会无法显示

引入easyUI的相关js文件区别：

如果使用href创建tab，那么只要在主页中引入相关的easyUI的js、css文件就可以了；

如果使用content创建tab，那么每个页面都要引入相关的easyUI的js、css文件

以下是我自己测试出来的结果：

我这里有三个页面，分别为1.jsp 、 2.jsp 、3.jsp，1.jsp是主页

2.jsp中有一个js的f_search()方法，用来刷新id为invendg的datagrid数据

function f_search(){

alert('已调用f_search方法');//href创建tab时，这里可以执行

$('#invendg').datagrid('load',

serializeObject( $("#searchForm").form() ) //将searchForm表单内的元素序列为对象传递到后台

);

console.info($('#invendg'));//href创建tab时，这时火狐控制台打印一个空的对象，即Object[ ]

}

3.jsp是用来增加、修改2.jsp的数据，在3.jsp增加、修改完保存后要刷新1.jsp中grid的数据

使用content创建tab时调用父窗口方法，要加上name属性，子页面可通过这个name属性调用指定的父窗口，如：

window.frames['test'].f_search();

我这里使用了第一种方法创建tab，如果使用parent或window调用，即parent.f_search()，将会调用最上层的方法，即1.jsp中的方法。如果1.jsp找不到这个方法将会报错

使用href创建tab时调用父窗口方法，可以直接调用，但使用父窗口方法时，不能调用到父窗口的对象元素。

如果我3页面使用了2.jsp页面的 f_search()方法，那么将无法找到 $('#invendg')这个对象，这个可以从火狐浏览器的调试控制台查看，利用

console.info($('#invendg'));打印出来是一个空的对象，正常的打印应该是这样的，

可看到object的中括号中有值

我在使用href属性创建tab时，在3.jsp页面直接调用2.jsp页面的方法，即f_search()方法，虽然能执行到父页面方法，但调用不了 $('#invendg')这个对象

注意：在使用href引入页面时还有一个需要注意的问题，就是每个页面都不能有重名的js方法，新建tab时，使用href属性，如果每个tab的页面都使用了同名的js方法，或相同的div的id，那么新的窗口js方法和document元素会覆盖了旧窗口中相同的js方法和document元素。

如有1、2两个页面，1和2 都有一个f_add()方法，如果先打开了1，然后再打开2，这时在1中将不能使用1中原来的f_add()方法，使用的将是2页面中的方法。

初学easyUI，在使用tab面板时遇到了许多问题，暂时将我自己实践出来的经验分享给大家，大家也可以加easyUI的一些QQ群，积累一下经验。

href,content的区别，写得比较详细的一篇文章，大家可参考一下： http://www.easyui.info/archives/164.html

0 0