jquery - 带有下一个/上一个按钮的引导模式表单

Question

我是 bootstrap 的新手，来自 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">

Answer 3

我有一个教程，使用 Bootstrap http://fearlessflyer.com/next-and-previous-buttons-bootstrap-photo-gallery/将上一个/下一个按钮添加到照片库

也许您可以使用相同的技术 - 使用 $(this).index()。