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 に答える