1. 昨天开始搭后台框架，到晚上的时候遇到了一个现在觉得挺可笑但是当时一直很纠结很纠结的问题，这个问题刚刚解决出来，把它拿出来说说，让自己长点儿记性，希望大家不要犯我这个错误啊
  2. 在backstage.jsp页面中我写了一个方法，用于在指定位置添加面板（id为msg的地方）
  3. function addTab(t,h){
  4. if($('#msg').tabs('exists',t)){
  5. $('#msg').tabs('select',t);
  6. }else{
  7. $('#msg').tabs('add',{
  8. title:t,
  9. href:h
  10. });
  11. }
  12. }
  13. 在body方法中有一个超连接
  14. <a id="admins">查看管理员信息</a>
  15. 方法调用
  16. $("#admins").click(function(){
  17. addTab('管理员信息','${ pageContext.request.contextPath}/backstage/admins/findAdmins.jsp');
  18. });
  19. findAdmins.jsp
  20. <head>
  21. <script>
  22. $(function(){
  23. alert("------");
  24. });
  25. </script>
  26. </head>
  27. <body>
  28. 这是findAdmins.jsp页面，事件触发啦
  29. <body>
  30. 我遇到的问题就是，当添加面板时，findAdmins.jsp中body中的内容都会显示，但head中的方法就是不执行，刚开始觉得是路径问题，但如果是路径问题的话为什么body中的内容能够正确显示呢？
  31. 这个问题想得我头疼啊，到底是为什么呢，就是想不明白
  32. 下面我来回答一个我自己的这个问题吧，其发生这种事情的主要原因还是因为我很多东西都不知道，看的东西也比较少。
  33. Href方式加载数据有几个特点：
  34. 第一个就是被加载的页面只有body元素内部的内容才会被加载，也就是jQuery的ajax请求的只是html片段。（各位包括我自己，这种问题一定要注意啊）还有就是在加载远程url时有遮罩效果，也就是“等待中……”效果，用户体验较好。
  35. 但是当加载的页面布局较为复杂，或者有较多的js脚本需要运行的时候，编码往往就需要谨慎了，容易出问题。下面说一些在网上找到的一个href的常见问题
  36. 1.href只加载目标URL的html片段
  37. 这个特性是由jQuery封装的ajax请求处理机制所决定的，所以目标URL页面里不需要有html,head,body等标签，即使有这些元素，也会被忽略，所以放在head标签里面的任何脚本也不会被引入或者执行。
  38. 2.短暂的页面混乱：
  39. href链接的页面比较复杂的时候，easyui对其渲染往往需要一个较长的过程，这时候，加载进来的html片段毫无布局可以，过一会自动会好，这时候easyui已经完成对它的渲染。如何避免这个混乱的过程呢，还得靠easyui的一个基础插件——解析器(Parser)。
  40. Parser有个onComplete事件，这个事件就是指easyui对页面完成渲染时触发，这样思路就很清晰了：用一个div遮罩住让被加载进来的html片段，在onComplete事件中，让这个div淡出，这时候渲染好的html片段就能美人出浴了，同时还整了个等待中的效果，一举两得。这样要做两件事：
  41. 第一是在要加载的html片段中放一个遮罩用的div：
  42. <div id='loading' style="position:absolute;z-index:1000;top:0px;left:0px;width:100%;height:100%;background:#DDDDDB;text-align:center;padding-top: 20%;">
  43. <image src='style/images/loading.gif'/>
  44. </div>
  45. 第二是在被加载的html片段尾部处理相关事件：
  46. <script>
  47. function show(){
  48. $("#loading").fadeOut("normal", function(){
  49. $(this).remove();
  50. });
  51. }
  52. var delayTime;
  53. $.parser.onComplete = function(){
  54. if(delayTime)
  55. clearTimeout(delayTime);
  56. delayTime = setTimeout(show,500);
  57. }
  58. </script>
  59. 需要注意的是，如果多个tab页面都使用了onComplete事件，当前定义的会覆盖之前定义的。其实每次easyui渲染完成均会调用onComplete事件，所以每打开一个包含easyui控件的tab页，onComplete事件就会被调用。
  60. 3.html片段的easyui组件相关脚本莫名地报错：
  61. 其实这个现象是跟第一个现象的原因一样的，easyui完成对html片段渲染需要一定的时间，页面越复杂，耗时越长，这时候难以避免html存在的脚本存在对easyui某些插件的调用，比如datagrid等，这个时候就会报错，解决方案同上，将这些脚本放到onComplete事件里处理，也就保证了渲染完成前，不会被执行。
  62. 4.放在window里面表单验证的提示信息会乱串：
  63. 这个现象应该是插件自身的bug，对位置的计算没有考虑到这些特殊的事情，解决方式可以投机取巧，在打开window后，让表单不符合验证的input获得焦点就可以了。
  64. content方式加载数据的特点：
  65. 1.  比较灵活，你可以在脚本里面拼写html代码，然后赋值给tab的content属性，不过这种写法会使得代码易读性变差。
  66. 2.  可以把iframe赋给content，把一个iframe嵌入也就没有什么不能完成的了。
  67. 3.  使用iframe会造成客户端js重复加载，浪费资源，比如说你主页面要引用easyui的库，你的iframe也要引用，浪费就产生了。
  68. 希望能对大家有点儿帮助，不要再犯这种错误啦！！

easyui 页签的更多相关文章

  1. easyui页签更新

    1.首先引入这个js文件 <script src="/Scripts/tabs.js" type="text/javascript"></sc ...

  2. easyui tabs页签显示在底部属性

    data-options="tabPosition:'bottom'" 如果没有该属性  页签默认显示在最上面,效果如下 当加上了该属性  ,页签会出现在底部

  3. ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  4. WPF如何实现一个漂亮的页签导航UI

    最近看到一个比较漂亮的UI主界面,该UI是用左边的页签进行导航,比较有特色,就想着尝试用WPF来实现一下.经过一番尝试,基本上将UI设计图的效果用WPF程序进行了实现.下面介绍一下主要的思路: 1 U ...

  5. JavaScript选项卡/页签/Tab的实现

    选项卡,也称页签,英文用Tab(Module-Tabs)表示.Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的. Tab可以在相同的空间里展示更多的信息,它把相似的主题分 ...

  6. C# 重绘tabControl，添加关闭按钮（页签）

    C# 重绘tabControl,添加关闭按钮(页签) 调用方法 参数: /// <summary> /// 初始化 /// </summary> /// <param n ...

  7. 实现TabView(页签)效果

    今天花了点时间,设计了一个网页上用的tabview(页签.tabcontrol)效果.个人觉得实现得比较不错,网页元素用得比较少,js代码也比较精练.测试了一下支持IE.FireFox以及chrome ...

  8. android124 zhihuibeijing 新闻中心-新闻 -北京页签 下拉刷新

    缓存工具类:以url为key,json数据为value, package com.itheima.zhbj52.utils; import com.itheima.zhbj52.global.Glob ...

  9. android123 zhihuibeijing 新闻中心-新闻 页签 ViewPagerIndicator实现

    ## ViewPagerIndicator ## 使用导入ViewPagerIndicator库的方式相当于可以改源码,打包编译Eclips可以自动完成. ViewPager指针项目,在使用ViewP ...

随机推荐

  1. [重点翻译] ASP.NET 4.6的更新 -- 本文只摘录 Web Forms的部分

    原文出处:[重点翻译] ASP.NET 4.6的更新 -- 本文只摘录 Web Forms的部分 http://www.dotblogs.com.tw/mis2000lab/archive/2015/ ...

  2. ios category

    https://github.com/shaojiankui/IOS-Categories

  3. Python数据类型-----数字&字符串

    Python数字类型 int类型表示的范围:-2147483648至2147483648之间,超出这个范围的数字即视为long(长整形) 在Python中不需要事先声明数据类型,它是根据具体的赋值来进 ...

  4. OpenStack:安装Nova

    >安装Nova1. 安装# apt-get install nova-novncproxy novnc nova-api \  nova-ajax-console-proxy nova-cert ...

  5. ASP.NET分页

    [代码][C#]代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...

  6. iOS代码实践总结

    转载地址:http://mobile.51cto.com/hot-492236.htm 最近一个月除了专门抽时间和精力重构之外,还有就是遇到需要添加功能的模块的时候,由于项目中的代码历史因素比较多,第 ...

  7. MVC4.0 WebApi如何自定义返回数据类型

    1.客户端可以通过HTTP Accept消息头来通知服务器客户端想要什么样的MIME类型数据,例如:application/json则代表告诉服务器想要的是Json数据 2.服务器端撇开客户端的请求类 ...

  8. SharePoint 2010 用xsl文件定制列表样式

    有时候我们不希望列表用默认的方式显示,要我们自定义的方式定制.其中有一种方式是使用xsl文件. 在AllItems.aspx页面中,列表是以webpart的形式显示在页面上的,webpart类型是Xs ...

  9. java版大数相乘

    在搞ACM的时候遇到大数相乘的问题,在网上找了一下,看到了一个c++版本的 http://blog.csdn.net/jianzhibeihang/article/details/4948267 用j ...

  10. 测试web数据库的分布式事务atomikos 的三种数据源 SimpleDataSourceBean,AtomikosDataSourceBean,AtomikosNonXADataSourceBean

    这2天学习了atomikos事务控制框架,其中看到有3种数据源,分别是,SimpleDataSourceBean,AtomikosDataSourceBean,AtomikosNonXADataSou ...