Question

我有一个在平板电脑上运行的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>

Answer 1

使用div类ui-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>

参考： Grids - JQM v1.3.0

Answer 2

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

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

<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/

查看现场小提琴

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

2 个答案: