jQuery UI選項卡 - 將參數設置爲NEXT/PREVIOUS按鈕點擊

Question

我目前正在使用jQuery UI選項卡以及ajax。我共有3個標籤，只能通過「下一步」&「上一個」按鈕進行導航。我已經設置了參數：在tab1中，如果您離開輸入字段car_name，您將收到一條警報消息和類似的參數與tab2。

我的預期設置：如果參數未滿足，則用戶無法前進到下一個選項卡。但是，該部分不起作用。用戶得到一個警告：他們可以忽略，然後再次點擊下一步，然後前進到下一個選項卡。如何在參數（填寫輸入字段）完成之前禁用「下一步」按鈕？ EXAMPLE

謝謝

JS

<script> 
     $(function() { 
      var $tabs = $('#tabs').tabs({ 
       disabled: [0, 1, 2], 
       select: function() { 

       $.ajax({ 
        type: "POST", 
        url: "post_tabs.php", 
        data: { 
        "name": $("#car_name").val(), 
        "title": $("#title").val(), 
        "price": $("#price").val() 

        }, 
        success: function (result) { 
        $("#tab-3").html(result); 
        } 
       }); 
       } 
      }); 

      $(".ui-tabs-panel").each(function (i) { 
       var totalSize = $(".ui-tabs-panel").size() - 1; 
       if (i != totalSize) { 
       next = i + 2; 
       $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>"); 
       } 
       if (i != 0) { 
       prev = i; 
       $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>"); 
       } 
      }); 



      $('.next-tab, .prev-tab').click(function() { 
       var prev = $(this).hasClass('prev-tab'); 
       var currentTab = $('#tabs').tabs('option', 'selected'); 
       if (
       prev || /*(A)*/ (
        currentTab == 0 && /*(B)*/ 
        $.trim($('#car_name').val()).length > 0 

       ) || (
        currentTab == 1 && /*(C)*/ 
        $.trim($('#title').val()).length > 0 && $.trim($('#price').val()).length > 0) 


      ) { 
       var tabIndex = $(this).attr("rel"); 
       $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]); 
       } else if (!prev) { 
       switch (currentTab) { 
        case 0: 
        alert('Please choose an option.', 'Alert Dialog'); 
        break; 
        case 1: 
        alert('Please fill out all the required fields.', 'Alert Dialog'); 
        break; 

       } 
       } 
       return false; 
      }); 


    $('.next-tab, .prev-tab').click(function() { 
      var tabIndex = $(this).attr("rel"); 
      $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]); 
      return false; 
     }); 
}); 
     </script> 

HTML

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide"> 
<label for="car_name">Car Model</label> 
    <input type="text" id="car_name" class="detail" name="car_name" value="" /> <br> 

</div> 

<div id="tab-2" class="ui-tabs-panel ui-tabs-hide"> 

    <label for="title">Title</label> 
    <input type="text" id="title" name="title" size="60" autocomplete="off" value=""/><br> 
    <label for="price">Price</label> 
    <input type="text" id="price" name="price" size="60" autocomplete="off" value=""/><br> 
</div> 

<div id="tab-3" class="ui-tabs-panel ui-tabs-hide"> 

</div> 

Answer 1

也有一些是有點怪在你的代碼。你註冊「next」和「prev」兩次......

這不是你想要的。

你想要的是以下行爲：

1. 如果點擊上頁 - 下僅在必要的字段都滿足去 - 總是去上一個
2. 如果下一個被點擊。

這意味着你應該改變以下

1. 從第一事件刪除.prev-tab選擇 - 並刪除任何提及到prev vairable。該方法只能處理next。
2. 從第二個事件綁定中刪除next，這個應該只處理prev。

那麼你的JavaScript將是這樣的：

$('.next-tab').click(function() { 

       var currentTab = $('#tabs').tabs('option', 'selected'); 
       if (
       (
        currentTab == 0 && /*(B)*/ 
        $.trim($('#car_name').val()).length > 0 

       ) || (
        currentTab == 1 && /*(C)*/ 
        $.trim($('#title').val()).length > 0 && $.trim($('#price').val()).length > 0 
       ) 


      ) { 
       var tabIndex = $(this).attr("rel"); 
       $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]); 
       } else { 
       switch (currentTab) { 
        case 0: 
        alert('Please choose an option.', 'Alert Dialog'); 
        break; 
        case 1: 
        alert('Please fill out all the required fields.', 'Alert Dialog'); 
        break; 

       } 
       } 
       console.log("preventing default"); 

       return false; 
      }); 


    $('.prev-tab').click(function() { 
      var tabIndex = $(this).attr("rel"); 
      $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]); 
      return false; 
     }); 

這應該解決您的問題。

您可以在行動看到這一點，在my site

下載我的資源上面會回答你的問題。

現在，請允許我有機會建議一種方法，讓您的代碼在「下一個」場景中縮短一點。

右行$('.next-tab').click(function() {上面創建下面的函數

function isEmpty(item) { 
    return $.trim(item.val()).length <= 0; 
} 

現在 - 在點擊next時不應該是空的每個輸入字段添加class='required'。

每個選項卡上添加data-alert="The alert message you want to show"

現在的HTML應該是這樣

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide" data-alert="Please choose an option."> 
<label for="car_name">Car Model</label> 
    <input type="text" id="car_name" class="required detail" name="car_name" value="" /> <br> 

</div> 

<div id="tab-2" class="ui-tabs-panel ui-tabs-hide" data-alert="Please fill out all the required fields."> 
    <label for="title">Title</label> 
    <input type="text" id="title" class="required" name="title" size="60" autocomplete="off" value=""/><br> 
    <label for="price">Price</label> 
    <input type="text" id="price" class="required" name="price" size="60" autocomplete="off" value=""/><br> 
</div> 

現在的JS代碼應該是更小，更容易維護，即使您需要的字段添加另一個選項卡（ - 它不應該改變） - 這裏是

$('.next-tab').click(function() { 
       var $tab = $(this).closest(".ui-tabs-panel"); 
       var $requiredFields = $tab.find(".required"); 
       var canContinue = true; 

       $requiredFields.each(function(index,item){ 
       console.log(["checking" , item]); 
       if (canContinue && isEmpty($(item))){ alert($tab.attr("data-alert"), 'Alert Dialog'); canContinue = false; } 

       }); 
       if (canContinue) 
       { 
       var tabIndex = $(this).attr("rel"); 
       $tabs.tabs('enable', tabIndex).tabs('select', tabIndex).tabs("option", "disabled", [0, 1, 2, 3, 4]); 
       } 
       return false; 
      });