在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 相关文章推荐
javascript 二维数组的实现与应用
Mar 16 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 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
15种PHP Encoder的比较
2007/04/17 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
出纳岗位职责范本
2013/12/01 职场文书
搞笑获奖感言
2014/01/30 职场文书
2016年端午节寄语
2015/12/04 职场文书
openstack云计算keystone组件工作介绍
2022/04/20 Servers