0

jquery タブを使用して、ユーザーが情報を入力できるようにしています。そのため、現在、5 つのタブもあり、各タブにはいくつかのフィールドがあります。多くのフィールドには、クライアント側の jquery 検証が使用されています。そして、各タブで共通の保存ボタンを使用しました。

ユーザーがTAB 2を使用していて、保存しようとしたが、TAB 1の検証が失敗したとします。そのような場合、TAB 1に検証エラーがあり、修正する必要があることをユーザーに伝えたいと思います。

そのため、タブに検証エラーがあるたびに、タブ名の横にエラーアイコンを追加することを計画していました。

タブ ヘッダーにアイコンを追加するにはどうすればよいですか?

私の問題に使用できる他のより良いアイデアはありますか。ご意見をお聞かせください。

4

3 に答える 3

1

以下は、Drixson Oseñaがコメントで共有したフィドルの助けを借りて、私が使用したものです。これが他の人にも役立つことを願っています:)

フィドルの更新: http://jsfiddle.net/yrshaikh/rcgAX/2/

HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor<span id="tab1" class="boing">!</span></a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab1</p>
  </div>
  <div id="tabs-2">
    <p>Tab2</p>
  </div>
  <div id="tabs-3">
    <p>Tab3</p>
  </div>
</div>

<input type="button" value="Show Error on Tab2" id="add" />
<input type="button" value="Hide Error on Tab2" id="remove" />

Jクエリ 

$(document).ready(function(){

    $( "#tabs" ).tabs();

    $("#add").click(function(){
    $("#tab1").css('visibility',  'visible');
    });    

    $("#remove").click(function(){
    $("#tab1").css('visibility',  'hidden');
    });

});

CSS 

.boing {
    margin-left:5px;
    color:red;
    visibility: hidden;
}
于 2013-08-05T04:24:50.960 に答える
0

あなたのケースで私の以前の仕事からのアイデアを共有すると、ウィザードフォームを使用しようとするかもしれません. これをチェックしてくださいJquery Smart Wizard

于 2013-08-02T06:09:36.627 に答える