Twitter Bootstrap：使用提交表單作爲下拉菜單項？

而不是在下拉菜單中使用錨點或按鈕，我想爲每個項目都有一個表單。該表單包含一些隱藏的字段和一個提交按鈕。當我在表格的每個<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。

來源

2012-10-21 StackOverflowNewbie

你能告訴我們什麼它看起來就像'

@Ollie - 更新。 – StackOverflowNewbie

不太清楚，如果我明白你的意思是隱藏提交表單，但顯示圖標的標籤，但是我可以用圖像覆蓋按鈕。請看附件中的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-09 20:44:04 zmanc

或者只是使用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-28 20:50:45 jsalvata

Twitter Bootstrap：使用提交表單作爲下拉菜單項？

回答

相關問題