jquery - 次/前のボタンを備えたブートストラップ モーダル フォーム

Question

私はブートストラップが初めてで、jQueryUI から来て、スクロールするビューポートのアイデア全体を回避するために、次/前のフォーム インターフェイスを誰かが作成したかどうか疑問に思っていました。

過去には、次の作業を行いました。

http://css-tricks.com/jquery-ui-tabs-with-nextprevious/

そのため、始める前に、検証などに関する懸念事項についても確認したいと思いました.

Answer 1

それはテストされていませんが、基本的なアイデアは、モーダルボディにタブ可能なナビゲーションを含め、次のようなすべてのタブコンテンツに前/次のボタンを追加することです:

<form action="">
     <div class="tabbable">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
          <li class=""><a href="#tab2" data-toggle="tab">Section 2</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane" id="tab1">
            <p>Form for section one</p>
            <a href="#tab2" data-toggle="tab" class="btn pull-right">Next</a>
          </div>
          <div class="tab-pane" id="tab2">
            <p>Next form part</p>
            <a href="#tab2" data-toggle="tab" class="btn pull-left">Prev</a>
          </div>
        </div>
      </div>
</form>

別のオプションは、<ul>-Tag を非表示にして、前/次のボタンをモーダル フッターに配置することです。

Answer 2

<div class="tab-pane" id="tab1">

する必要があります

<div class="tab-pane active" id="tab1">