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

流年茶蘼

流年茶蘼

2016-02-19 13:09

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享在UpdatePanel内jquery easyui效果失效的解决方法的教程,热爱PS的朋友们快点看过来吧!
使用easyui 的好处除了界面还不错之外,也因为使用方便。

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
div
div title="搜索" .../div
div title="选择".../div
div title="返回".../div
/div

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

但是,把它放在updatepanel里面,且不是首次就让他显示出来的话就出故障了。

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
asp:MultiView runat="server"
asp:View runat="server"
div
div title="搜索"
.../div
div title="选择"
.../div
div title="返回"
.../div
/div
/asp:View
asp:View runat="server"
div
div title="搜索"
.../div
div title="选择"
.../div
div title="返回"
.../div
/div
/asp:View
/asp:MultiView

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

然后设置他显示第一个view

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
MultiView1.ActiveViewIndex =0;

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

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

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
r=$(".easyui-tabs",_1ec);
if(r.length){
r.tabs();

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

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

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
function EndRequestHandler() {
$(".easyui-tabs").tabs();
}

再定义一个事件。

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
function reload() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}

add_endRequest
PageRequestManager 类是一个管理浏览器中服务器 UpdatePanel 控件的部分页更新。此外,还定义一些属性、事件和方法,用以通过客户端脚本对网页进行自定义。通过调用 getInstance 方法来得到 PageRequestManager 类的实例。然后通过 add_endRequest 方法来绑定 endRequest 事件(异步回发完成,并且控制权返回到浏览器之后引发)。这样以后,每次updatepanel发生回调后,都会触发EndRequestHandler()函数。重新绑定一次效果。$(document).ready(function() { reload(); })
失效问题就解决了。
展开更多 50%)
分享

猜你喜欢

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

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

解决jquery .ajax 在IE下卡死问题的解决方法

Web开发
解决jquery .ajax 在IE下卡死问题的解决方法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery提示 object expected的解决方法

Web开发
jquery提示 object expected的解决方法

jQuery 美元符冲突的解决方法

Web开发
jQuery 美元符冲突的解决方法

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Session对象失效的客户端解决方法

Web开发
Session对象失效的客户端解决方法

Jquery在IE7下无法使用 $.ajax解决方法

Web开发
Jquery在IE7下无法使用 $.ajax解决方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

基于JQuery的cookie插件

基于JQuery的cookie插件

java读取配置文件例子

java读取配置文件例子
下拉加载更多内容 ↓