发布于 2017-04-27 06:46:34 | 86 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例,程序狗速度看过来!

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。


项目中使用到了 updatePanel 和jquery-easyui 。使用updatepanel的好处自然是页面不刷新,用户感觉比较好,同时也减少了一部分数据量的传输。
使用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(); })
失效问题就解决了。



相关阅读 :
在UpdatePanel内jquery easyui效果失效的解决方法
jquery 删除cookie失效的解决方法
jquery在ie7下选择器的问题导致append失效的解决方法
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jquery修改页面标题title其它JS失效的解决方法
jquery mobile页面跳转后样式丢失js失效的解决方法
jquery load()在firefox(火狐)下显示不正常的解决方法
JQuery插件fancybox无法在弹出层使用左右键的解决办法
一个js导致的jquery失效问题的解决方法
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
jQuery在vs2008及js文件中的无智能提示的解决方法
解决jquery .ajax 在IE下卡死问题的解决方法
最新网友评论  共有(0)条评论 发布评论 返回顶部
月排行榜

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  服务