jQuery MiniUI

标题: 关于tab的onactivechanged事件所遇到的问题 [打印本页]
作者: wangyanjun001    时间: 2015-11-4 14:51:41     标题: 关于tab的onactivechanged事件所遇到的问题

[attach]6755[/attach][attach]6754[/attach]

<div id="tabs1" class="mini-tabs" style="width:100%;height: 100%"  onbeforeactivechanged="onchangeTab" >
       <div name="first0"  title="送修原始记录" style="width:100%;height:100%;">
                       <div id="firstDiv0" style="overflow:scroll">

                        </div>
                  </div>
       <div name="first"  title="原始记录" style="width:100%;height:100%;">
          <div id="firstDiv" style="overflow:scroll">
            
           </div>
       </div>

</div>
在切换前我会进行判断，如果tabname 是first ，我会保存数据。切换完成后会加载相应tab的记录。问题来了:
如果点击保存的时候 ，当前页面在 送修原始记录，我需要首先将 tabname为 first的tab进行激活，进行判断，然后赋值一些操作，然后提交。在 激活的时候 就会调用onactivechanged这个事件，问题是这个事件还没有进去，接下来的判断、赋值操作就已经开始走了。。，等走完了，才在onactivechanged弹出东西来，这是为什么，你们的 onactivechanged 事件有时间延迟么:
最终弹出顺序为：11--22--33--come--，我想要的是：11--come--22--33
搜索
作者: felt    时间: 2015-11-4 15:36:31

请提供页面重现你说的问题，截图的代码和html代码有什么联系？
作者: wangyanjun001    时间: 2015-11-4 16:28:23

felt 发表于 2015-11-4 15:36
请提供页面重现你说的问题，截图的代码和html代码有什么联系？

<a id="savedata"   class="mini-button"  iconCls="icon-save"  plain="true" visible="true">提交</a>
               
<div id="tabs1" class="mini-tabs" style="width:100%;height: 100%" onbeforeactivechanged="onchangeTab">

       <div id="first0" name="first0" title="原始记录旧" style="width:100%;height:100%;"  >
              <div id="firstDiv0" style="overflow:scroll">
                          原始记录旧
              </div>        
       </div>
       <div id="first" name="first" title="原始记录最新" style="width:100%;height:100%;"  >
              <div id="firstDiv" style="overflow:scroll">
                         原始记录最新
              </div>        
       </div>

</div>

        <script type="text/javascript">
            mini.parse();
            var tabs = mini.get("tabs1");
            //onbeforeactivechanged
            function onchangeTab()
            {
            }
            //onactivechanged
            function openJDFile()
            {
              alert("come");
            }
            //激活tab
            function activeJDTab()
            {
                var nowtab = tabs.getActiveTab();
                        if(nowtab.name!="first")
                        {
                            var tab = tabs.getTab("first");
                            onchangeTab();
                            alert(11);
                        tabs.activeTab(tab);
                        alert(22);
                        }
            }
            //提交
            function saveData()
            {
                  activeJDTab();//激活原始记录 tab
                  alert("33");
            }      
               
    </script>搜索
作者: wangyanjun001    时间: 2015-11-4 16:30:30

wangyanjun001 发表于 2015-11-4 16:28
提交
               

点击提交按钮：弹出的顺序为 11---22---33---come，可是我希望的顺序是  11--come--22--33
作者: felt    时间: 2015-11-4 16:39:16

wangyanjun001 发表于 2015-11-4 16:30
点击提交按钮：弹出的顺序为 11---22---33---come，可是我希望的顺序是  11--come--22--33 ...

请提供一个完整html页面来重现
回复高级模式可以上传文件
不要贴一段段的代码
作者: wangyanjun001    时间: 2015-11-4 17:04:18

felt 发表于 2015-11-4 16:39
请提供一个完整html页面来重现
回复高级模式可以上传文件
不要贴一段段的代码 ...
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.         pageEncoding="UTF-8" session="false" %>
  3.        
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  5. <html>
  6. <!--
  7.   - Author(s): Administrator
  8.   - Date: 2015-11-04 16:17:01
  9.   - Description:
  10. -->
  11. <head>
  12. <title>test</title>
  13.     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  14.     <script src="../miniui.js" type="text/javascript"></script>
  15.    
  16. </head>
  17. <body>
  18. <a id="savedata"   class="mini-button" onclick="saveData()"  iconCls="icon-save"  plain="true" visible="true">提交</a>
  19.                
  20. <div id="tabs1" class="mini-tabs" style="width:100%;height: 100%" onbeforeactivechanged="onchangeTab" onactivechanged="openJDFile">

  22.        <div id="first0" name="first0" title="原始记录旧" style="width:100%;height:100%;"  >
  23.               <div id="firstDiv0" style="overflow:scroll">
  24.                           原始记录旧
  25.               </div>       
  26.        </div>
  27.        <div id="first" name="first" title="原始记录最新" style="width:100%;height:100%;"  >
  28.               <div id="firstDiv" style="overflow:scroll">
  29.                          原始记录最新
  30.               </div>       
  31.        </div>

  33. </div>

  35.         <script type="text/javascript">
  36.             mini.parse();
  37.             var tabs = mini.get("tabs1");
  38.             //onbeforeactivechanged
  39.             function onchangeTab()
  40.             {
  41.             }
  42.             //onactivechanged
  43.             function openJDFile()
  44.             {
  45.               alert("come");
  46.             }
  47.             //激活tab
  48.             function activeJDTab()
  49.             {
  50.                 var nowtab = tabs.getActiveTab();
  51.                         if(nowtab.name!="first")
  52.                         {
  53.                             var tab = tabs.getTab("first");
  54.                             onchangeTab();
  55.                             alert(11);
  56.                         tabs.activeTab(tab);
  57.                         alert(22);
  58.                         }
  59.             }
  60.             //提交
  61.             function saveData()
  62.             {
  63.                   activeJDTab();//激活原始记录 tab
  64.                   alert("33");
  65.             }      
  66.               
  67.     </script>
  68. </body>
  69. </html>
复制代码

作者: felt    时间: 2015-11-4 17:08:37

wangyanjun001 发表于 2015-11-4 17:04

js不会阻塞代码，
tabs.activeTab(tab);dom元素的渲染绘制有一定的时间开销
作者: wangyanjun001    时间: 2015-11-4 17:23:36

felt 发表于 2015-11-4 17:08
js不会阻塞代码，
tabs.activeTab(tab);dom元素的渲染绘制有一定的时间开销

那怎么解决
作者: berlioz    时间: 2015-11-5 09:20:47

wangyanjun001 发表于 2015-11-4 17:23
那怎么解决

需要切换后执行的都写到onactivechanged里边
作者: felt    时间: 2015-11-5 09:31:52

wangyanjun001 发表于 2015-11-4 17:23
那怎么解决

可以延时执行
作者: wangyanjun001    时间: 2015-11-5 09:48:08

berlioz 发表于 2015-11-5 09:20
需要切换后执行的都写到onactivechanged里边

我是每次切换都要执行onactive那个方法，那个方法体里面是公共的，好多页面用到，不能提炼的话，太麻烦了。。
作者: wangyanjun001    时间: 2015-11-5 09:48:39

felt 发表于 2015-11-5 09:31
可以延时执行

那我先试试
作者: wangyanjun001    时间: 2015-11-5 14:32:20

felt 发表于 2015-11-5 09:31
可以延时执行

<%@ page language="java" contentType="text/html; charset=UTF-8"

        pageEncoding="UTF-8" session="false" %>

        
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<!--
  - Author(s): Administrator

  - Date: 2015-11-04 16:17:01

  - Description:

-->

<head>

<title>test</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <script src="../miniui.js" type="text/javascript"></script>

   
</head>

<body>

<a id="savedata"   class="mini-button"  iconCls="icon-save"  plain="true" visible="true">提交</a>

               
<div id="tabs1" class="mini-tabs" style="width:100%;height: 100%" onbeforeactivechanged="onchangeTab">

       <div id="first0" name="first0" title="原始记录旧" style="width:100%;height:100%;"  >

              <div id="firstDiv0" style="overflow:scroll">

                          原始记录旧

              </div>        
       </div>

       <div id="first" name="first" title="原始记录最新" style="width:100%;height:100%;"  >

              <div id="firstDiv" style="overflow:scroll">

                         原始记录最新
              </div>        
       </div>

</div>

        <script type="text/javascript">

            mini.parse();

            var tabs = mini.get("tabs1");
//初始化
function initData()
     {
          var i=0;
  
            if(i==(1-1))
         {
                var lastActiveTab = tabs.getTab("first");
               
                 tabs.activeTab(lastActiveTab);
         }
        
     }   
            //onbeforeactivechanged

            function onchangeTab()

            {

            }

            //onactivechanged

            function openJDFile()
             {

              var nowtab = tabs.getActiveTab();
           alert("come-----"+nowtab.name);
            }

            //激活tab

            function activeJDTab()

            {

                var nowtab = tabs.getActiveTab();

                        if(nowtab.name!="first")

                        {

                            var tab = tabs.getTab("first");

                            onchangeTab();

                            alert(11);

                        tabs.activeTab(tab);

                        alert(22);

                        }

            }

            //提交

            function saveData()

            {

                  activeJDTab();//激活原始记录 tab

                  alert("33");

            }      

               
    </script>

</body>

</html>
搜索
作者: wangyanjun001    时间: 2015-11-5 14:35:39

felt 发表于 2015-11-5 09:31
可以延时执行

进入tab页面，首先初始化，默认选中最新原始记录的tab页，会在onactivechanged事件里面弹出2次 ，这事为什么
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"

  3.         pageEncoding="UTF-8" session="false" %>

  5.         
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  8. <html>

  10. <!--
  11.   - Author(s): Administrator

  13.   - Date: 2015-11-04 16:17:01

  15.   - Description:

  17. -->

  19. <head>

  21. <title>test</title>

  23.     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  25.     <script src="../miniui.js" type="text/javascript"></script>

  27.    
  28. </head>

  30. <body onload="initData()">

  32. <a id="savedata"   class="mini-button" onclick="saveData()"  iconCls="icon-save"  plain="true" visible="true">提交</a>

  34.                
  35. <div id="tabs1" class="mini-tabs" style="width:100%;height: 100%" onbeforeactivechanged="onchangeTab" onactivechanged="openJDFile">


  38.        <div id="first0" name="first0" title="原始记录旧" style="width:100%;height:100%;"  >

  40.               <div id="firstDiv0" style="overflow:scroll">

  42.                           原始记录旧

  44.               </div>        
  45.        </div>

  47.        <div id="first" name="first" title="原始记录最新" style="width:100%;height:100%;"  >

  49.               <div id="firstDiv" style="overflow:scroll">

  51.                          原始记录最新
  52.               </div>        
  53.        </div>


  56. </div>


  59.         <script type="text/javascript">

  61.             mini.parse();

  63.             var tabs = mini.get("tabs1");

  65. //初始化
  66. function initData()
  67.      {
  68.           var i=0;
  69.   
  70.             if(i==(1-1))
  71.          {
  72.                 var lastActiveTab = tabs.getTab("first");
  73.                
  74.                  tabs.activeTab(lastActiveTab);
  75.          }
  76.         
  77.      }   
  78.             //onbeforeactivechanged

  80.             function onchangeTab()

  82.             {

  84.             }

  86.             //onactivechanged

  88.             function openJDFile()
  89.              {

  91.               var nowtab = tabs.getActiveTab();
  92.            alert("come-----"+nowtab.name);
  93.             }

  95.             //激活tab

  97.             function activeJDTab()

  99.             {

  101.                 var nowtab = tabs.getActiveTab();

  103.                         if(nowtab.name!="first")

  105.                         {

  107.                             var tab = tabs.getTab("first");

  109.                             onchangeTab();

  111.                             alert(11);

  113.                         tabs.activeTab(tab);

  115.                         alert(22);

  117.                         }

  119.             }

  121.             //提交

  123.             function saveData()

  125.             {

  127.                   activeJDTab();//激活原始记录 tab

  129.                   alert("33");

  131.             }      

  133.                
  134.     </script>

  136. </body>

  138. </html>
复制代码

作者: felt    时间: 2015-11-5 15:34:06

wangyanjun001 发表于 2015-11-5 14:35
进入tab页面，首先初始化，默认选中最新原始记录的tab页，会在onactivechanged事件里面弹出2次 ，这事为 ...

初始化会触发一次
回复高级模式可以上传文件，请不要直接粘贴大量代码
作者: wangyanjun001    时间: 2015-11-5 15:37:07

felt 发表于 2015-11-5 15:34
初始化会触发一次
回复高级模式可以上传文件，请不要直接粘贴大量代码

代码请看14楼。。，如果是初始化会切换，那当我把需要选中的tab页放在第一位，就不会弹出2次了，可是业务要求需要选中的tab页不在第一位，那这种情况，怎么避免弹出两次？？
作者: wangyanjun001    时间: 2015-11-5 15:39:25

wangyanjun001 发表于 2015-11-5 15:37
代码请看14楼。。，如果是初始化会切换，那当我把需要选中的tab页放在第一位，就不会弹出2次了，可是业务 ...

参见附件
作者: felt    时间: 2015-11-5 15:42:21

wangyanjun001 发表于 2015-11-5 15:39
参见附件

肯定会触发，用个变量控制吧，第一次进入就阻止掉



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2