Twitter Bootstrap: используя форму отправки в виде выпадающего меню?

Question

Вместо использования якорей или кнопок в выпадающем меню, я хочу иметь форму для каждого элемента. Форма содержит некоторые скрытые поля и кнопку отправки. Когда я помещал форму в каждую <li> моей марки, пользовательский интерфейс был испорчен. Поддерживает ли Bootstrap это изначально? Если нет, я переконфигурирую свое приложение для работы со ссылками.

Update 1: снимок экрана

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

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