当单击ios“previous”&时,JQuery标题移动位置“下一步”按钮

时间:2012-05-08 08:16:22

标签: ios jquery-mobile cordova

我使用JQuery 1.1.0和Phonegap构建了一个应用程序。我现在遇到的问题是,当我将文本输入到字段中并点击ios键盘的“上一个”和“下一步”按钮时,标题会从其固定位置移动 - 并且出现在页面上的不同位置。我必须补充说它也是不一致的,因为它不会在其他页面上执行此操作。标题被标记为固定,因此我不知道为什么它们有时会出现,有时不会出现。

多页面的这一部分是“大部分时间都有效”的页面示例,但有时当我在字段之间导航时,标题会在屏幕外滑动。

<div data-role="page" id="accident_detail" data-theme="f">
    <div data-role="header" data-position="fixed">
        <a href="#accident_insured" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"></a>
        <h1>Description</h1>
        <a href="#accident_vehicle" data-icon="arrow-r" data-iconpos="notext"></a>
    </div>
    <div data-role="content">
        <label for="incident_date">Date of Incident:</label>
        <input type="date" name="incident_date" id="incident_date" value="" class="required"/>
        <label for="incident_description">Description of Incident:</label>
        <textarea cols="40" rows="8" name="incident_description" id="incident_description" class="required"></textarea>
        <label for="accident_damage">Damage description:</label>
        <textarea cols="40" rows="8" name="accident_damage" id="accident_damage"></textarea>
        <label for="location_street">Street:</label>
        <input type="text" name="location_street" id="location_street" value="" class="required"/>
        <label for="location_city">City:</label>
        <input type="text" name="location_city" id="location_city" value="" class="required"/></div>
    <div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
        <a href="#accident_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
           style="margin-left: 10px; margin-top: 5px">Done</a>
        <a href="index.html" rel="external" data-icon="home" data-direction="reverse" data-iconpos="notext"
           style="float: right; margin-right: 10px; margin-top: 5px"></a>
    </div>
</div>

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

你可以尝试这个..

<div data-role="page" id="myPage">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
    <a data-icon="back" data-transition="none">Back</a>
    <h1>PAGE TITLE</h1>
</div>
</div>