无法禁用jQuery UI选项卡

时间:2011-12-09 09:13:55

标签: jquery-ui jquery-ui-tabs

API说您无法禁用我认为是问题症结的活动标签。

我在一个UI标签中有六个标签。在ajax调用之后,其中一个选项卡有时是空的,以便根据用户点击新的UI Accordion选项为所有选项卡填充数据。每当用户进行新选择时,我都会使用“零”选项卡作为默认选定选项卡。

我使用以下代码在php文件中编码,该文件加载有时空的选项卡以禁用标签为空时。除非用户在单击新的UI Accordion选项时选择了此选项卡,否则它可以正常工作。仅在这种情况下,空选项卡将保持启用状态。

?>
    <script type="text/javascript">
      $(document).ready(function() {
          $( "#tabs" ).tabs( "option", "disabled", false);
      });
    </script>
<?php
}else{ 
?>
    <script type="text/javascript">
      $(document).ready(function() {
          $( "#tabs" ).tabs( "option", "disabled", [2]);
      });
    </script>

有人可以提出一个策略吗?

以下是包含ajax调用的脚本:

<script type="text/javascript">                
    $('.stallion').live('click', function(){
 var id = parseInt(this.id);  // Get stallion_ID from clicked "a" tag id.
 activestallion(id);  // Function to indicate clicked Stallion in Stallion Accordion
        // Start loading Overview Tab
        var request = $.ajax({
            url: "stalliondetails.php",
            type: "GET",
            data: {stallion_ID : id}
        });
        request.done( function(html){
            $("#tabs-1").html(html);
            $( "#tabs" ).tabs( "option", "selected", 0 );
            $(".activehorse").fadeOut('1000', function(){
            document.getElementById("activehorsename").innerHTML
                 =document.getElementById(id).innerHTML;
            $(".activehorse").fadeIn('1000');
            });
            $("#tabs").tabs( "select" , 0 );
        });
        // Overview Tab load finished.
        //Pedigree Tab load starting.
        var request = $.ajax({
        url: "pedigreedetails.php",
        type: "GET",
        data: {stallion_ID : id},
        success: function(html){
        $("#tabs-2").html(html);
        }
        });    
        //Pedigree Tab load finished.
        //Progeny Tab load starting.
        var request = $.ajax({
        url: "progenydetails.php",
        type: "GET",
        data: {stallion_ID : id},
        success: function(html){
        $("#tabs-3").html(html);
        }
        });    
        //Progeny Tab load finished.
        //News Tab load starting.
        var request = $.ajax({
        url: "newsdetails.php",
        type: "GET",
        data: {stallion_ID : id},
        success: function(html){
        $("#tabs-4").html(html);
        }
        });    
        //News Tab load finished.
        //Race Record Tab load starting.
        var request = $.ajax({
        url: "racerecorddetails.php",
        type: "GET",
        data: {stallion_ID : id},
        success: function(html){
        $("#tabs-5").html(html);
        }
        });    
        //Race Record Tab load finished.
        //Analysis Tab load starting.
        var request = $.ajax({
        url: "analysisdetails.php",
        type: "GET",
        data: {stallion_ID : id},
        success: function(html){
        $("#tabs-6").html(html);
        }
        });    
        //Analysis Tab load finished.
        //Update the Seasons Request form to this Stallion.
        updateseasons(id);
        $( "#tabs" ).tabs( "option", "selected", 0 );
        $("button").button() ;       
  });
</script>

感谢您的帮助。

2 个答案:

答案 0 :(得分:6)

为了帮助其他人关注此帖子,我想发布最终修复此问题的内容。

我正在使用

$("#tabs").tabs("option", "disabled", [2]);

当我切换到

$("#tabs").tabs("disable", 2);

问题已得到纠正。

感谢巴特和威廉的帮助。

答案 1 :(得分:3)

尝试

<script type="text/javascript">
  $(document).ready(function() {
      $( "#tabs" ).tabs( "option", "disabled", 2);
  });
</script>

或多次禁用

 <script type="text/javascript">
  $(document).ready(function() {
      $( "#tabs" ).tabs('option','disabled', [1, 2, 3, 4]);
  });
</script>

而不是

<script type="text/javascript">
  $(document).ready(function() {
      $( "#tabs" ).tabs( "option", "disabled", [2]);
  });
</script>

启用标签并移至使用

  $( "#tabs" ).tabs( "enable" , 1 )
  $( "#tabs" ).tabs( "select" , 1 )

*计数从0开始