Question

我希望每个项目都有一个表单，而不是在下拉菜单中使用锚点或按钮。表单包含一些隐藏字段和提交按钮。当我将表单放在我标记的每个<li>时，用户界面就搞砸了。 Bootstrap本身是否支持此功能？如果没有，我将重新编写我的应用程序以使用链接。

更新1：截屏

enter image description here

更新2：加号

  <div class="btn-group open">
    <button class="btn">Action</button>

    <ul class="dropdown-menu">
      <li>
        <form action="#" method="post">
          <fieldset>
            <input type="submit" value="Favorite"/>
          </fieldset>
        </form>
      </li>

      <li><a href="#">Message</a></li>

      <li>
        <form action="#" method="post">
          <fieldset>
            <input type="submit" value="Smile"/>
          </fieldset>
        </form>
      </li>

      <li>
        <form action="#" method="post">
          <fieldset>
            <input type="submit" value="Block"/>
          </fieldset>
        </form>
      </li>

      <li>
        <form action="#" method="post">
          <fieldset>
            <input type="submit" value="Friend"/>
          </fieldset>
        </form>
      </li>

      <li>
        <form action="#" method="post">
          <fieldset>
            <input type="submit" value="Exclude From Future Search Results"/>
          </fieldset>
        </form>
      </li>
    </ul>
  </div>

更新3：图标

我希望提交按钮有一个图标。不知道最好的方法是什么，但这是我的解决方案：

<label for="foo">
   <i class="icon-ok></i> Favorite
</label>
<input id="foo" style="display:none;" type="submit" value="Favorite"/>

隐藏提交表单，标签显示图标，当用户点击标签时，它可以正常工作。不需要JS。

Answer 1

我不太清楚我是否明白你对隐藏的提交表单的意思，但标签显示了一个图标，但我能够用图像覆盖按钮。请参阅随附的jsBin。我是通过在输入的

中添加一个类来实现的

http://jsbin.com/eboqij/1/edit

.button{
background-image:url('http://www.nyanicorn.com/res/img/icon_nyan.png');
    background-repeat:no-repeat;
text-indent:-9999px;
  width:40px!important;

}

Answer 2

或者只是使用Javascript将值存储在隐藏字段中并提交表单 - 您可能正在使用JS来处理下拉列表的打开/关闭。

我遇到了完全相同的问题，我创建了这个新的“提交”插件：

!function ($) {
  "use strict"; // jshint ;_;

  $(document).on('click.submit.data-api', '[data-submit]', function (e) {
    e.preventDefault()

    var form= $('#'+$(this).data('submit'))

    form.find('input[name="'+$(this).data('name')+'"]').val($(this).data('value'))

    form.submit()
  })

}(window.jQuery);

我可以这样使用：

<form id="myform" ...>
  <input type="hidden" name="myparam">
  <div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
      Action
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li>
        <a data-submit="myform" data-name="myfield" data-value="myvalue>
          Click here
        </a>
      </li>
    </ul>
  </div>
</form>

Twitter Bootstrap：使用提交表单作为下拉菜单项？

2 个答案: