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; 
      });