1

前と次のボタンのみで操作される Jquery UI タブを使用しています。最初のタブには選択ボックスがあり、先に進むには選択ボックスからオプションを選択する必要があります。私の懸念は、Tab#2 にあります。さらに先に進む前に、ユーザーに入力してもらいたい 3 つの入力フィールドがあります。

[次へ] ボタンを無効にして、ユーザーが次のタブに進む前に入力フィールドへの入力を強制されるようにするにはどうすればよいですか? 例

JS- 次/前

<script>
        $(function() {

                var $tabs = $('#tabs').tabs({
                    disabled: [0, 1]
                });

                $(".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 tabIndex = $(this).attr("rel");
                    if (
                        /*(1)*/ $('#tabs').tabs('option', 'selected') > 0 ||
                        /*(2)*/ ($('.update.last').length > 0 && parseInt($('.update.last').val(), 10) > 0)
                    ) {
                        $tabs.tabs('enable', tabIndex)
                            .tabs('select', tabIndex)
                            .tabs("option","disabled", [0, 1]);
                    }
                    return false;
                });

        });
</script>

HTML

<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">
  <label for="title"> Title: *</label>
    <input type="text"  id="title" name="title" class="" size="33" autocomplete="off" value="<? $title ?>"/><br>
    <label for="price"> Price: *</label>             
      <input type="text" name="price" class="" size="8" maxlength="9" id="price" autocomplete="off" value="<? $price ?>" /><br>
           <label for="description"> Description: *</label> 
         <textarea id="description" name="description" class=""><? $description ?></textarea><br />

</div>
4

3 に答える 3

3

次のボタンまたは前のボタンのタブのみを変更する場合

  • （A）前へボタンがクリックされたか
  • （B）現在のタブが最初のタブであり、実際に最後の選択が存在し、オプションが選択されているか、
  • （C）現在のタブは2番目のタブであり、すべての（トリミングされた）テキスト値は空ではありません。

次のテストされていない拡張機能は次のとおりです。

$('.next-tab, .prev-tab').click(function() {
    var tabIndex = $(this).attr("rel");
    if (
        $(this).hasClass('prev-tab') ||                          /*(A)*/
        (
            $('#tabs').tabs('option', 'selected') == 0 &&        /*(B)*/
            $('.update.last').length > 0 && 
            parseInt($('.update.last').val(), 10) > 0
        ) ||
        (
            $('#tabs').tabs('option', 'selected') == 1 &&        /*(C)*/ 
            $.trim($('#title').val()).length > 0 && 
            $.trim($('#price').val()).length > 0 &&
            $.trim($('#description').val()).length > 0
        )
    ) {
        $tabs.tabs('enable', tabIndex)
            .tabs('select', tabIndex)
            .tabs("option","disabled", [0, 1]);
    }
    return false;
});

===更新===

タブ固有のアラートを追加しました：

$('.next-tab, .prev-tab').click(function() {
    var prev = $(this).hasClass('prev-tab');
    var currentTab = $('#tabs').tabs('option', 'selected');
    if (
        prev ||                                                  /*(A)*/
        (
            currentTab == 0 &&                                   /*(B)*/
            $('.update.last').length > 0 &&
            parseInt($('.update.last').val(), 10) > 0
        ) ||
        (
            currentTab == 1 &&                                   /*(C)*/
            $.trim($('#title').val()).length > 0 &&
            $.trim($('#price').val()).length > 0 &&
            $.trim($('#description').val()).length > 0
        )
    ) {
        var tabIndex = $(this).attr("rel");
        $tabs.tabs('enable', tabIndex)
            .tabs('select', tabIndex)
            .tabs("option","disabled", [0, 1]);
    } else if (!prev) {
        switch (currentTab) {
            case 0:
                alert('Please choose an option.');
                break;
            case 1:
            case 2:
                alert('Please fill out all form inputs.');
                break;
        }
    }
    return false;
});
于 2012-07-27T05:29:25.573 に答える
1

クリック イベント ハンドラーを変更します。

$('.next-tab, .prev-tab').click(function() {
  var $t = $(this), tabIndex = $t.attr("rel");
  if ($t.hasClass("prev-tab")) {
    if ($("input").filter('[value=""]').length) {
      alert("Please fill out all form inputs.");
      return false;
    }
  }
...

それが役立つことを願っています。

于 2012-07-26T22:22:36.350 に答える
0

選択したタブを調べてから、次に有効にするために入力する必要がある項目を確認する検証関数を作成できます。この関数は、入力が必要な各項目の変更時にバインドできます。

于 2012-07-26T22:09:29.197 に答える