Jquery UI Tabs选项卡二次点击行为修改?

Kensky 发布于 2013/03/12 14:48
阅读 1K+
收藏 0

@12qw90op 你好,想跟你请教个问题:关于Jquery UI Tabs组件问题,最新的1.10.0版本,我使用ajax的方式加载选项卡内容,我想让已经点击激活的选项卡再次点击时重新加载当前面板的ajax内容,请问要怎么定义方法呢,我的代码如下:

<div class="mainTabs" id="mainTab">
  <div class="tabNav">
      <ul>
         <li><a href="#mainTabs_1">home</a></li>
         <li><a href="ajax/mPage1.asp">information</a></li>
         <li><a href="ajax/mPage2.asp">project</a></li>
         <li><a href="ajax/mPage3.asp">hr</a></li>
         <li><a href="ajax/mPage4.asp">other</a></li>
         <li><a href="ajax/mPage5.asp">control panel</a></li>
      </ul>
  </div>
  <div class="mainTabContent">
   <div id="mainTabs_1" class="mainHome">html content</div>
  </div>


js代码:

$( "#mainTab" ).tabs({
    beforeLoad: function( event,ui ) {    

        ui.panel.html("loading...");
      });
      ui.jqXHR.error(function() {
        ui.panel.html("load page failed");      
      });
    },
    show: {effect: "fade",duration: 200},
    hide: {effect: "fade",duration: 200},
    active:0,
    collapsible: false   
  });

加载中
0
5W1H-
5W1H-

@Kensky 可以这样子实现:
    1.首先再绑定一个select事件:
$("#mainTab").tabs({
    select : function(event, ui) {
       reloadFn();
    }
});
    2.将需要重新加载的页面定义在一个方法中:
function reloadFn(){
    ......
}


返回顶部
顶部