1

テキストボックスをクリックすると、さまざまなフィールドの検索条件を入力できる新しいdivが開きます。Gmailのような検索ボックスを作成しています。TextBox（'#searchTextBox）またはテキストボックスを含むdivを検索フォームのdiv（' #gmailSearchBox）にしっかりと添付するにはどうすればよいですか？また、ブートストラップレスポンシブを使用しているため、テキストボックスの場所とサイズが変更されます。したがって、divスタイルのdisplay：blockとdisplay：noneを設定するだけでは機能しません。ありがとう。

HTMLコード：

<div style="border:1px solid grey; border-radius:3px; max-width:300px; padding-right:0px; padding-left:0px;"class="container-fluid">
    <div style="left:0px;right:20px; line-height:inherit; float:left; width:100%; ">
        <input id="searchTextBox" type="text" style="border:none; width:95%; line-height:inherit; padding:0px 0px 0px 0px;"> 
        <a id="showSearchBox" href="#" style="height:20px">
             <span class="caret" style="vertical-align:middle; height:100%"> </span>
        </a>
    </input>
</div>
</div>
<input type="button" value="Search" Class="btn btn-primary" /><br>
Various<br>
Other<br>
Information<br>
Goes <br>
Here<br>
<div id='gmailSearchBox' class="gmailSearchBox" style="position:absolute; display:none; border:1px solid grey">
<form action="" method="post">
    From:<input type="text" id="fromDate">
    <br/>
    To: <input type="text" id="toDate">
    <br/>
    Type:<select id="logType">
            <option>--Select Type--</option>
        </select>
    <br/>
    Text:<input type="text" id="searchText">
    <br/>
    <input type="submit" class="btn btn-primary">
</form>
</div>

Javascriptコード

$('#showSearchBox').click(showSearchBox);
function showSearchBox() {
    $('#gmailSearchBox').css('display','block')
}

JsFiddleリンク-http : //jsfiddle.net/7FBax/

4

2 に答える 2

1

cssでこれを実行したい場合は、おそらくマークアップを少し変更する必要があります。あなたが望むことをする次のフィドルを見てください：http：//jsfiddle.net/97BwC/1/

改訂されたマークアップ：

<div id="search" style=""class="container-fluid">
<div id="searchInputWrapper" style="">
    <input type="text" style=""> <a id="showSearchBox" href="#" style="height:20px">
             <span class="caret" style="vertical-align:middle; height:100%"> </span>
        </a>

    </input>
</div>
<div id='gmailSearchBox' class="gmailSearchBox" style="">
    <form action="" method="post">From:
        <input type="text" id="fromDate">
        <br/>To:
        <input type="text" id="toDate">
        <br/>Type:
        <select id="logType">
            <option>--Select Type--</option>
        </select>
        <br/>Text:
        <input type="text" id="searchText">
        <br/>
        <input type="submit" class="btn btn-primary">
    </form>
</div>

css：

    #search {
        position:relative;
        border:1px solid grey;
        border-radius:3px;
        max-width:300px;
        padding-right:0px;
        padding-left:0px;
    }
    #searchInputWrapper {
        left:0px;
        right:20px;
        line-height:inherit;
        float:left;
        width:100%;
    }
    #searchInputWrapper input {
        border:none;
        width:95%;
        line-height:inherit;
        padding:0px 0px 0px 0px;
    }
    #gmailSearchBox {
        position:absolute;
        bottom:-212px;
        right:0;
        display:none;
        border:1px solid grey;
        background-color:#fff;
    }

アップデート：

検索ボックスの高さが静的でない場合は、JavaScriptを使用して下部オフセットを設定できます。更新されたフィドルは次のとおりです：http：//jsfiddle.net/GPTJ4/2/

そして、これが改訂されたハンドラーです：

$('#showSearchBox').click(showSearchBox);

function showSearchBox() {
    var height = 0,
        $searchBox = $('#gmailSearchBox');

    $searchBox.css({display:'block'});

    //get the height of the search box
    height = $searchBox.height();

    //set the offset equal to the height
    $searchBox.css({bottom:-height +'px'});
}
于 2013-03-09T00:55:59.860 に答える
0

入力を含む同じdivに#gmailSearchBoxを配置すると、意図したとおりに機能します。#gmailSearchBoxにも背景色を設定することをお勧めします。

于 2013-03-09T00:05:48.873 に答える