Easyui tabs的herf和content属性

在backstage.jsp页面中我写了一个方法,用于在指定位置添加面板(id为msg的地方)
function addTab(t,h){
if($(‘#msg‘).tabs(‘exists‘,t)){
$(‘#msg‘).tabs(‘select‘,t);
}else{
$(‘#msg‘).tabs(‘add‘,{
title:t,
href:h
});
}
}
在body方法中有一个超连接
<a id="admins">查看管理员信息</a>
方法调用
$("#admins").click(function(){
addTab(‘管理员信息‘,‘${ pageContext.request.contextPath}/backstage/admins/findAdmins.jsp‘);
});
findAdmins.jsp
<head>
<script>
$(function(){
alert("------");
});
</script>
</head>
<body>
这是findAdmins.jsp页面,事件触发啦
<body>
我遇到的问题就是,当添加面板时,findAdmins.jsp中body中的内容都会显示,但head中的方法就是不执行,刚开始觉得是路径问题,但如果是路径问题的话为什么body中的内容能够正确显示呢?
这个问题想得我头疼啊,到底是为什么呢,就是想不明白
下面我来回答一个我自己的这个问题吧,其发生这种事情的主要原因还是因为我很多东西都不知道,看的东西也比较少。
Href方式加载数据有几个特点:
第一个就是被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是html片段。(各位包括我自己,这种问题一定要注意啊)还有就是在加载远程url时有遮罩效果,也就是“等待中……”效果,用户体验较好。
但是当加载的页面布局较为复杂,或者有较多的js脚本需要运行的时候,编码往往就需要谨慎了,容易出问题。下面说一些在网上找到的一个href的常见问题
1.href只加载目标URL的html片段
这个特性是由jQuery封装的ajax请求处理机制所决定的,所以目标URL页面里不需要有html,head,body等标签,即使有这些元素,也会被忽略,所以放在head标签里面的任何脚本也不会被引入或者执行。
2.短暂的页面混乱:
href链接的页面比较复杂的时候,easyui对其渲染往往需要一个较长的过程,这时候,加载进来的html片段毫无布局可以,过一会自动会好,这时候easyui已经完成对它的渲染。如何避免这个混乱的过程呢,还得靠easyui的一个基础插件——解析器(Parser)。
Parser有个onComplete事件,这个事件就是指easyui对页面完成渲染时触发,这样思路就很清晰了:用一个div遮罩住让被加载进来的html片段,在onComplete事件中,让这个div淡出,这时候渲染好的html片段就能美人出浴了,同时还整了个等待中的效果,一举两得。这样要做两件事:
第一是在要加载的html片段中放一个遮罩用的div:
<div id=‘loading‘ style="position:absolute;z-index:1000;top:0px;left:0px;width:100%;height:100%;background:#DDDDDB;text-align:center;padding-top: 20%;">
<image src=‘style/images/loading.gif‘/>
</div>
第二是在被加载的html片段尾部处理相关事件:
<script>
function show(){
$("#loading").fadeOut("normal", function(){
$(this).remove();
});
}
var delayTime;
$.parser.onComplete = function(){
if(delayTime)
clearTimeout(delayTime);
delayTime = setTimeout(show,500);
}
</script>
需要注意的是,如果多个tab页面都使用了onComplete事件,当前定义的会覆盖之前定义的。其实每次easyui渲染完成均会调用onComplete事件,所以每打开一个包含easyui控件的tab页,onComplete事件就会被调用。
3.html片段的easyui组件相关脚本莫名地报错:
其实这个现象是跟第一个现象的原因一样的,easyui完成对html片段渲染需要一定的时间,页面越复杂,耗时越长,这时候难以避免html存在的脚本存在对easyui某些插件的调用,比如datagrid等,这个时候就会报错,解决方案同上,将这些脚本放到onComplete事件里处理,也就保证了渲染完成前,不会被执行。
4.放在window里面表单验证的提示信息会乱串:
这个现象应该是插件自身的bug,对位置的计算没有考虑到这些特殊的事情,解决方式可以投机取巧,在打开window后,让表单不符合验证的input获得焦点就可以了。
content方式加载数据的特点:
1. 比较灵活,你可以在脚本里面拼写html代码,然后赋值给tab的content属性,不过这种写法会使得代码易读性变差。
2. 可以把iframe赋给content,把一个iframe嵌入也就没有什么不能完成的了。
3. 使用iframe会造成客户端js重复加载,浪费资源,比如说你主页面要引用easyui的库,你的iframe也要引用,浪费就产生了。
希望能对大家有点儿帮助,不要再犯这种错误啦!!!

Easyui tabs的herf和content属性

时间: 2024-11-14 17:40:26

Easyui tabs的herf和content属性的相关文章

浅谈 easyui tabs 的href和content属性

众所周知,jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”,本文就两种方式的优缺点进行简单分析和思考. 两者特点: href方式加载数据的特点: 被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是html片段. 加载远程url时有遮罩效果,也就是“等待中……”效果,用户体验较好. 当加载的页面布局较为复杂,或者有较多的js脚本需要运行的时候,编码往往就需要谨慎了,容易出问题

解决easyui tabs中href无法跨域跳转

<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="author" content="blog.anchen8.net" /> <script type="text/javascript" src=&q

Jquery EasyUI tabs处理

一 获取选中的 Tab 1.   // 获取选中的 tab panel 和它的 tab 对象 2.  var pp = $('#tt').tabs('getSelected'); 3.  var tab = pp.panel('options').tab;    // 相应的 tab 对象 注:根据指定tab的title 获取tab对象接口使用方式如下: var tab = $('#tt').tabs('getTab','title'), 二 更新特定的选项卡面板 可使用update方法,par

jquery.easyui.tabs 中的首个tabs被最后tabs覆盖的问题解决方法

这是由于tabs对href重载的的问题导致,因此我们需要将href更改为其它自定义的属性即可避免此问题的发生. 解决方法如下: 第一步页面端: 循环体开始 <li> <div><a target="tagFrame" href="@n.Url" ><span class="icon icon-sys"> </span>@n.Title</a></div> <

EasyUI Tabs + Yii2.0实现iframe方式打开页面(解决共用静态文件引入加载的问题)

在项目实际开发中,有将打开的各个链接页面隔离的需求(防止静态资源起冲突),这个时候常规思路就是使用iframe来实现!但遇到一个比较棘手的问题,当用easyui Tabs打开一个iframe页面时,怎么解决原有共用静态资源引入的问题.有人建议可以考虑将共用静态资源文件放到一个php文件中,然后每次渲染页面时加载即可,这个时候很多朋友会想到PHP的include()方式,但是每个iframe页面都要include一次,岂不是很麻烦.而且项目的要求是iframe打开和easyui tabs href

content属性的4种用途

content属性浏览器支持情况,兼容到IE8浏览器,IE7及以下不支持 用途一.配合:before及:after伪元素插入文本 <div>     <p>伪元素</p> </div> p:before{     content:'CSS3';     color:#4bb;     font-weight:bold;     margin-right:20px;     background:#f0f0f0;     /*如果要设置宽高的话,就必须变成块级

#学习记录#——CSS content 属性

CSS content 属性常结合:before 和:after 这两个伪类一起使用,给指定的元素添加内容来丰富页面. 1. 添加文本内容 html: <h1>给末尾添加内容. </h1> <h2>给末尾不添加内容. </h2> css: <style> h1:after{ content: “hello world!!” } h2:after{ content: none } </style> 所要添加的内容用双引号引起来,若不添加

Easyui Tabs 添加怎么添加。

function addPanel(url, title) { if ($("#mainTabs").tabs("exists", title)) { $("#mainTabs").tabs("select", title); //var tab = $('#mainTabs').tabs('getSelected');  // 获取选择的面板tab.panel('refresh', 'get_content.php'); /

easyui tabs getSelected

var index = $('#centerTag').tabs('getTabIndex',$('#centerTag').tabs('getSelected')); 在easyui tabs中,根据选中的页签,获取对应的index值. ps:今儿才得以发现博客园开通啦,这应该是首篇博客园的博文啦撒,哈哈...偶把今儿学到的有关easyui tabs控件的方法写下来,以示纪念啦.