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

所属分类: 网络编程 / JavaScript 阅读数: 1187
收藏 0 赞 0 分享
使用easyui 的好处除了界面还不错之外,也因为使用方便。
复制代码 代码如下:

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

只要给他定义个相应的class 就能实现各种效果。

但是,把它放在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(); })
失效问题就解决了。
更多精彩内容其他人还在看

深入解析Vue 组件命名那些事

本篇文章主要介绍了深入解析Vue 组件命名那些事,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue学习笔记进阶篇之vue-cli安装及介绍

这篇文章主要介绍了Vue学习笔记进阶篇之vue-cli安装及介绍,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jquery版轮播图效果和extend扩展

这篇文章主要为大家详细介绍了jquery版轮播图效果,以及extend扩展的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jQuery Validate格式验证功能实例代码(包括重名验证)

本文通过实例代码给大家介绍了jQuery Validate格式验证功能,代码中包括重名验证的方法,需要的的朋友参考下吧
收藏 0 赞 0 分享

Angular.js中angular-ui-router的简单实践

本篇文章主要介绍了Angular.js中angular-ui-router的简单实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript实现二维坐标点排序效果

这篇文章主要为大家详细介绍了JavaScript实现二维坐标点排序效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

深入理解vue2.0路由如何配置问题

本篇文章主要介绍了vue2.0路由配置问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

基于bootstrap实现多个下拉框同时搜索功能

这篇文章主要为大家详细介绍了基于bootstrap实现多个下拉框同时搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript 值类型和引用类型的初次研究(推荐)

这篇文章主要介绍了JavaScript 值类型和引用类型的初次研究,需要的朋友可以参考下
收藏 0 赞 0 分享

利用jQuery异步上传文件的插件用法详解

这篇文章主要介绍了利用jQuery异步上传文件的插件用法详解,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多