3

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

更新1：屏幕截图

在此处输入图像描述

更新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。

4

2 回答 2

0

或者只是使用 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>
于 2013-01-28T20:50:45.837 回答
0

不太确定我是否理解您关于提交表单被隐藏但标签显示图标的意思但是我能够用图像覆盖按钮。请参阅随附的 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;

}
于 2013-01-09T20:44:04.777 回答