Question

我是bootstrap的新手，来自jQueryUI我想知道是否有人已经完成了下一个/上一个表单界面来绕过整个滚动视口的想法。

过去我曾经使用过以下内容：

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

因此，在我开始之前，我想问一下 - 还想留意任何关于验证的问题等。

Answer 1

这是未经测试的，但一个基本的想法是将一个tabbable导航包含到你的模态体中，并为每个标签内容添加一个prev / next按钮，如下所示：

<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> - 标记并将您的上一个/下一个按钮放入模态页脚。

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（）。

带有下一个/上一个按钮的Bootstrap模态表单

3 个答案: