在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 相关文章推荐
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
jquery选择器简述
Aug 31 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
Python生成随机验证码的两种方法
2015/12/22 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
python numpy 反转 reverse示例
2019/12/04 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
全球立体声:World Wide Stereo
2018/09/29 全球购物
保安自我鉴定范文
2013/12/08 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
放弃继承权公证书
2015/01/23 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP