方向更改后如何设置按钮位置固定

时间:2013-04-03 09:03:08

标签: html jquery-mobile

我有一个在平板电脑上运行的JQuery移动应用程序。但我的问题是我的按钮(SEARCH)丢失位置,如果我想在平板电脑方向处于风景中时看到它,我将不得不拖动屏幕。如何确保它在potrait和景观中仍然可见?

<div id="divBody" data-role="page" data-theme="c">

            <div data-role="header" class="hesto">         
                  <h1>Weld Splice </h1>
            </div>

            <div data-role="content">   
                  <div> <input type="text" name="text-1" id="txtBarcode"      class="barcodeTxt"  placeholder="Scan barcode" value=""/></div> 
                  <div id="divButton"> <a href="#" id="btnBarcode" data-role="button"   data-iconpos="right" data-inline="true">Search</a></div> 
            </div>

            <div id="divFooter" data-role="footer" >

            </div>

</div>

2 个答案:

答案 0 :(得分:2)

使用divui-grid-solo

包裹每一个 - 输入和按钮
<div class="ui-grid-solo">
 <input type="text" name="text-1" id="txtBarcode" class="barcodeTxt" placeholder="Scan barcode" value="" />
</div>
<div class="ui-grid-solo">
 <div id="divButton"><a href="#" id="btnBarcode" data-role="button" data-iconpos="right" data-inline="true" data-icon="search">Search</a>
 </div>
</div>

答案 1 :(得分:0)

如果按下按钮,为什么不将它放在标题栏中?

如果你对方法没问题,可以改变以下内容

<div id="divBody" data-role="page" data-theme="c">
    <div data-role="header" class="hesto">
         <h1>Weld Splice </h1>
 <a href="#" id="btnBarcode" data-role="button" data-iconpos="right" class="ui-btn-right">Search</a>

    </div>
    <div data-role="content">
        <div>
            <input type="text" name="text-1" id="txtBarcode" class="barcodeTxt" placeholder="Scan barcode" value="" />
        </div>
        <div id="divButton"></div>
    </div>
    <div id="divFooter" data-role="footer"></div>
</div>

http://jsfiddle.net/mayooresan/DuReF/

查看现场小提琴