当前位置: 代码迷 >> Ajax >> 怎么使 jquery ui tabs 的每个tab代表一个非Ajax的链接
  详细解决方案

怎么使 jquery ui tabs 的每个tab代表一个非Ajax的链接

热度:712   发布时间:2012-11-08 08:48:11.0
如何使 jquery ui tabs 的每个tab代表一个非Ajax的链接
你有没有这样朴素的需求?

  用一个Tab Group, 里面放两个tab, 并且每个tab代表一个链接;
  切换tab时,不通过AJAX获得内容,而是重新渲染整个页面;
  渲染后的页面里还是能看到这个Tab Group,只不过现在高亮的tab是另一个了。
 

如何用jquery ui的tabs实现这个东西?  我们一步一步来。
 
  A.页面展现时应该高亮哪个tab? 让服务器端传一个参数过来吧。Tab 0对应的Servlet把这个参数值置为0, Tab 1则置为1.
  
        $("#theTabs").tabs("select", ${tabIndex});
   

  
  B. 分别给两个 tab指定链接
    $("#theTabs").tabs( "url" , 0 , "servlet0.do" );
    $("#theTabs").tabs( "url" , 1 , "servlet1.do" );


  C.为Tab绑定select事件,使之被选中时触发URL跳转。请注意其中的 if(url)这个判断
 
   $("#theTabs").tabs({
     select: function(event, ui) {
        var url = $.data(ui.tab, 'load.tabs');
        if( url ) {
            location.href = url;
            return false;
        }
        return true;

  	  }
    });



把这三段JS代码依次抄到页面里就可以吗?  错了,顺序不应该是这样的。

第一段代码调用了Tab的select方法,这个方法会触发第三段代码中的select事件;
第三段代码中可能会发生URL跳转,而我们只希望用户点击Tab时才跳转,在首次进入页面时肯定不能跳,否则就会导致死循环: 进入页面 -> 跳转到本页面 -> 进入页面 ->跳转到本页面 ->.... ;
为了避免这种情况,就应该保证首次进入页面时,第三段代码中的url变量值为空;也就是说,首次进入页面执行第三段代码时,应保证第二段代码未被执行。


综上所述,最后的代码应为:

//第三段
    $("#theTabs").tabs({
   	 select: function(event, ui) {
		  var url = $.data(ui.tab, 'load.tabs');
        if( url ) {
            location.href = url;
            return false;
        }
        return true;

  	  }
    });
    
//第一段
    $("#theTabs").tabs("select", ${tabIndex} - 1);
    
//第二段
    $("#theTabs").tabs( "url" , 0 , "servlet0.do" );
    $("#theTabs").tabs( "url" , 1 , "servlet1.do" );

  相关解决方案