6

Twitter ブートストラップを使用すると、検索スタイルの入力ウィジェットを作成するのは非常に簡単です。

ここに画像の説明を入力

また、x は Twitter ブートストラップで実行可能ですが、その場所に x を配置するには、CSS の微調整が必​​要です。

その位置に x を入れることができましたが、あまり信頼できません。レスポンシブ デザインとさまざまな解像度では、x が完全に移動します。

.filter-close {
    float: none;
    position: relative;
    left: 5em;
    top: 1.25em;
    z-index: 3;
}

<form action="." method="get" class="form-search">
 <a class="close filter-close" href="#">x</a>                                           
    <div class="input-append">                  
        {{filter_form.last_name}}<button type="submit" class="btn"><i class='icon-filter'> </i></button>                </div>                          
</form>

車輪の再発明を試みる前に、入力をxボタンで入力できる既存のjavascriptライブラリはありますか? この目的のためにChosen.jsのようなものはありますか? または、これをより良い方法で行うためのアドバイスはありますか?

どうもありがとう、

4

3 に答える 3

6

この投稿をチェックしてください

このフィドルは、基本的にあなたが探していることを行います。

あなたは正しい方向に向かっています。

于 2012-10-03T22:27:31.800 に答える
1

いくつかのブートストラップ コードと小さな JavaScript を変更することで、これを実現できます。実際、必要なコントロールをテキスト ボックス内に配置できます。次に例を示します。

ここに画像の説明を入力

そして、これを生成するために使用される最終的なマークアップは次のとおりです。

<div class="composite-input">
    <span class="focus-input">Filter:</span> 
    <input type="text" /> 
    <span>×</span>
</div>

完全なコードについては、この投稿をチェックしてください: http://www.simplygoodcode.com/2013/08/placing-text-and-controls-inside-text.html

于 2013-08-21T22:49:13.003 に答える