在UpdatePanel内jquery easyui效果失效的解决方法


Posted in Javascript onApril 11, 2010

使用easyui 的好处除了界面还不错之外,也因为使用方便。

<div class="easyui-tabs" style="width: 300px"> 
<div title="搜索"> ...</div> 
<div title="选择">...</div> 
<div title="返回">...</div> 
</div>

只要给他定义个相应的class 就能实现各种效果。
在UpdatePanel内jquery easyui效果失效的解决方法
但是,把它放在updatepanel里面,且不是首次就让他显示出来的话就出故障了。
<asp:MultiView ID="MultiView1" runat="server"> 
<asp:View ID="View1" runat="server"> 
<div class="easyui-tabs" style="width: 300px"> 
<div title="搜索"> 
...</div> 
<div title="选择"> 
...</div> 
<div title="返回"> 
...</div> 
</div> 
</asp:View> 
<asp:View ID="View2" runat="server"> 
<div class="easyui-tabs" style="width: 300px"> 
<div title="搜索"> 
...</div> 
<div title="选择"> 
...</div> 
<div title="返回"> 
...</div> 
</div> 
</asp:View> 
</asp:MultiView>

在multipleView里面定义两个一样的view,内容也一样。并把 MultiView1放到updatepanel里面。

然后设置他显示第一个view

MultiView1.ActiveViewIndex =0;

浏览一下。显示正常。但是当我们改变view的显示时,例如把上面的改成 MultiView1.ActiveViewIndex =1;那么第二个veiw的效果就全无了。

到jquery.easyui.min.js 里找原因。看到了这么一句

r=$(".easyui-tabs",_1ec); 
if(r.length){ 
    r.tabs();

大概就是在网页加载完后,寻找class定义为easyui-tabs 的层。并把效果附加给他。

那么可以想象,当页面加载时,我们显示的是第一个view,那么js就找到view里的层,并赋予其效果。
然后我们在updatepanel里更新了显示的view,内容虽然切换到了第二个view了。但是页面没有重新加载,上面的js代码没有对新的view执行改变。
所以决策就是当updatepanel回发后重新执行js代码。
在页面定义一个重新绑定的函数。

function EndRequestHandler() { 
$(".easyui-tabs").tabs(); 
}

再定义一个事件。
function reload() { 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
}

add_endRequest
PageRequestManager 类是一个管理浏览器中服务器 UpdatePanel 控件的部分页更新。此外,还定义一些属性、事件和方法,用以通过客户端脚本对网页进行自定义。通过调用 getInstance 方法来得到 PageRequestManager 类的实例。然后通过 add_endRequest 方法来绑定 endRequest 事件(异步回发完成,并且控制权返回到浏览器之后引发)。这样以后,每次updatepanel发生回调后,都会触发EndRequestHandler()函数。重新绑定一次效果。$(document).ready(function() { reload(); })
失效问题就解决了。
Javascript 相关文章推荐
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
JavaScript调用Activex控件的事件的实现方法
Apr 11 #Javascript
javascript dom 基本操作小结
Apr 11 #Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 #Javascript
一个js的tab切换效果代码[代码分离]
Apr 11 #Javascript
YUI的Tab切换实现代码
Apr 11 #Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 #Javascript
可以将word转成html的js代码
Apr 11 #Javascript
You might like
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
php MessagePack介绍
2013/10/06 PHP
Laravel框架表单验证详解
2014/09/04 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
php中this关键字用法分析
2016/12/07 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
JS的反射问题
2010/04/07 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
python for循环remove同一个list过程解析
2019/08/14 Python
Python新手学习raise用法
2020/06/03 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
工厂车间标语
2014/06/19 职场文书
环境日宣传活动总结
2014/07/09 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书