在 jquery 移动设备中制作内联控件

Question

我正在动态生成一个可折叠集，其中有一个文本框和用于搜索目的的搜索按钮。

我正在遍历方法的结果并将动态生成的可折叠集绑定到 div 。我的问题仅与搜索部分对齐有关

当我在大屏幕手机上查看时，搜索文本框和按钮之间出现 space，而当我在小屏幕手机上查看时，按钮环绕在文本框下方。

我的代码是：

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" 和 data-type="horizontal" 仍然没有用。我只想让我的两个按钮固定大小，文本框会随着屏幕的大小而增加。请有人可以帮助我。我也添加了截图

Answer 1

您可以通过将输入和按钮放在单独的 DIV 中然后应用一些 CSS.

来实现此目的

<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;
}

无论是在设计时还是动态添加可折叠项，这都有效。

Working DEMO

在 jquery 移动设备中制作内联控件

Making inline controls in jquery mobile

css

jquery-mobile