在jquery mobile中製作嵌入式控件

我正在生成一個動態可摺疊集，其中包含用於搜索目的的文本框和搜索按鈕。在jquery mobile中製作嵌入式控件

我正在循環一個方法的結果並將動態生成的可摺疊設置綁定到一個div。我的問題與搜索部分對齊只有

當我在較大屏幕手機中查看時，我在搜索文本框和按鈕之間獲得空間，並且當我在較小的屏幕手機中查看它時，按鈕正在包裝在文本框下方。

我的代碼是：

var FillHis = '<div data-role="collapsible-set" data-inset="true" data-theme="b" data-content-theme="b" id="set" data-iconpos="right" class="ag_nomargin" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">'; 
        FillHis += '<div class="ui-field-contain ag_noborder" style="padding-top:0px !important;padding-bottom:5px !important;">'; 
     FillHis += '<div style="width:57%;float: left;position:relative; margin: -5px 0px 0px 1px;"> <input type="search" name="search" id="txtSearchDrug" placeholder="Search drug"></div> '; 
     FillHis += '<div style="width:42; float: right;position:relative; margin: -1px 0px 0px 0px;"><a id="A13" style="height:14px;line-height:12px;padding-right: 6px; padding-left: 6px;float:right" onclick="LoadFillHistory();" href="#" > Show All</a> <a id="A12" style="height:14px;line-height:12px;padding-right: 6px; padding-left: 6px;float:right"onclick="SearchDrug();" href="#" > Go</a></div></div>';

我嘗試使用「controlgroup」和數據類型= 「水平」還沒有使用。我只是想讓我的兩個按鈕固定大小，文本框會隨着屏幕大小而增加。請有人幫助我。我通過將輸入和按鍵在不同的DIV，然後應用一些CSS添加截圖也 Larger screens

enter image description here

來源

2015-04-07 Ajay Philia

事情是這樣的：http://jsfiddle.net/ezanker/x97s3752/？ – ezanker

Thanx for the fiddle .........有沒有辦法在控件組項目之間添加空格... –

我用間隔按鈕創建了一個答案。 – ezanker

你可以做到這一點。

<div data-role="collapsible-set" data-inset="true" data-theme="b" data-content-theme="b" id="set" data-iconpos="right" class="ag_nomargin" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"> 
    <div data-role="collapsible" data-collapsed="false"> 
     <h4>heading</h4> 
     <div> 
      <div class="container"> 
       <div class="right"> 
        <a href="#" data-role="button" data-theme="b" data-inline="true">Show All</a> 
        <a href="#" data-role="button" data-theme="b" data-inline="true">Go</a> 
       </div> 
       <div class="left"> 
        <input type="search" name="search" id="txtSearchDrug" placeholder="Search drug" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 


.container { 
    height: auto; 
    overflow: hidden; 
} 
.right { 
    width: 154px; 
    float: right; 
    text-align: right; 
} 
.right a:first-child { 
    margin-left: 0; 
    margin-right: 1px; 
} 
.right .ui-btn-inner { 
    padding-left: 12px; 
    padding-right: 12px; 
} 
.right a:last-child { 
    margin-left: 1px; 
    margin-right: 0; 
} 
.left { 
    float: none; 
    /* not needed, just for clarification */ 
    /* the next props are meant to keep this block independent from the other floated one */ 
    width: auto; 
    overflow: hidden; 
} 
.left .ui-input-search { 
    margin-top: 10px; 
}

無論是在設計時還是動態添加可摺疊項，這都會起作用。

工作DEMO

來源

2015-04-07 18:07:34 ezanker

感謝這麼多幫助....它幫助了很多！ –

在jquery mobile中製作嵌入式控件

回答

相關問題