jQuery mobile中的标题高度更改以响应单击

时间:2013-11-13 15:03:59

标签: jquery jquery-mobile cordova nativedroid

我在jQuery移动电话空闲应用程序中有一个页面,它表现得很奇怪。每当我点击主体(内容)时,标题增加的是高度。从检查元素开始,似乎H1标题在响应点击时向右和向下移动,增加了与左侧图标的距离。我使用jquery mobile 1.3.2,nativeDroid 2.2.0。我的代码如下:

<div data-role="page" id="feedbackPage" data-theme="b">

    <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Feedback</h1>
        <a href="#feedbackPagePanel" data-icon='reorder' data-iconpos="notext"></a>
    </div>
    <div data-role="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <form>
            <textarea cols="40" rows="8" name="feedback" id="feedback"></textarea>
            <button type="submit" name="submitfeedback" id="submitfeedback">Send</button>
        </form>
        </p>
    </div>

    <div data-role="panel" id="feedbackPagePanel">
        <ul data-role="listview">
            <li data-icon="home"><a href="#homePage">Home</a></li>
            <li data-icon="envelope"><a href="#feedbackPage">Feedback</a></li>
            <li data-icon="cog"><a href="#settingsPage">Settings</a></li>
            <li data-icon="info"><a href="#aboutPage">About</a></li>
        </ul>
    </div>
    <!-- /panel -->
</div>

它也会发生在其他页面上,即使它们包含listview(包含静态内容,而不是链接)。

以下是页面的外观:

Good behavior

点击文字后会发生这种情况。请注意,标题已移至右侧和底部

Bad behavior

第二次单击会将大小恢复为原始位置。我怎么能阻止这个?

1 个答案:

答案 0 :(得分:4)

当您单击文本时,jQM似乎在标题中切换了一个名为ui-fixed-hidden的类。尝试添加以下CSS以覆盖添加的填充:

.ui-header.ui-fixed-hidden {
    padding: 0;
    border-top-width: 1px;
    border-bottom-width: 2px;
}
.ui-header-fixed > .ui-btn-icon-notext{
    top:6px
} 

更新:添加了css以保持图标到位,并修复了底部边框CSS以保持宽度不变。 这是一个小提琴演示: DEMO

更新2:

您可以在标头上或javascript中尝试data-tap-toggle="false"属性,而不是上面的CSS修补程序:

$( ".selector" ).fixedtoolbar({ tapToggle: false });

以下是API文档:http://api.jquerymobile.com/fixedtoolbar/#option-tapToggle 这是更新的演示: DEMO 2