2012-10-21 88 views
3

而不是在下拉菜单中使用锚点或按钮,我想为每个项目都有一个表单。该表单包含一些隐藏的字段和一个提交按钮。当我在表格的每个<li>中放置表单时,UI已经搞乱了。 Bootstrap本身支持这个吗?如果不是,我将重新编写我的应用程序以使用链接。Twitter 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。

+0

你能告诉我们什么它看起来就像'

'代码被添加到下拉菜单中一样? – Ollie

+0

@Ollie - 更新。 – StackOverflowNewbie

回答

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; 

} 
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>