在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 相关文章推荐
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
window.open()实现post传递参数
Mar 12 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 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 cookie使用方法学习笔记分享
2013/11/07 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
Linux中为php配置伪静态
2014/12/17 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
php通过各种函数判断0和空
2020/07/04 PHP
JS 分号引起的一段调试问题
2009/06/18 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
Vue shopCart 组件开发详解
2018/01/26 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
pandas 读取各种格式文件的方法
2018/06/22 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
Hotels.com南非:酒店预订
2017/11/02 全球购物
创联软件面试题笔试题
2012/10/07 面试题
计算机大学生的自我评价
2013/10/15 职场文书
捐款倡议书范文
2014/02/02 职场文书
人民调解员培训方案
2014/06/05 职场文书
庆七一活动简报
2015/07/20 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python