jQuery mobile中的页眉高度变化以响应单击 [英] Header height changes in jQuery mobile in response to click

问题描述

我在jQuery mobilegap应用程序中有一个页面，它的行为很奇怪.每当我单击正文(内容)时，标题增加的就是高度.通过检查元素，H1标题似乎随着单击而向右和向下移动，与左侧图标的距离增加了.我使用带有 nativeDroid 2.2.0 的jquery mobile 1.3.2.我的代码如下:

I have a page in a jQuery mobile phonegap application, and it behaves strangely. Whenever I click the body (content) the header increases is height. From examining the elements, it seems the H1 title moves to the right and bottom in response to the click, increasing its distance from the icon on the left. I use jquery mobile 1.3.2, with nativeDroid 2.2.0. My code is as follows:

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

即使其他页面包含列表视图(具有静态内容，而不包含链接)，它也会在其他页面上发生.

It happens on other pages as well, even though they contain listview (with static content, not links).

这是页面的外观:

这是单击文本后发生的事情.注意标题已移至右侧和底部

Here is what happens after clicking on the text. Notice the title has moved to the right and bottom

再次单击可将尺寸恢复到原始位置.我该如何预防呢?

A second click restores the size to the original position. How I can I prevent this?

推荐答案

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

jQM seems to toggle a class called ui-fixed-hidden in the header when you click the text. Try adding the following CSS to override that added padding:

.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

UPDATE: added css to keep icon in place, and fixed bottom border CSS to keep width constant. Here is a fiddle demo: DEMO

更新2:

除了上面的CSS修复程序之外，您还可以尝试在标头或javascript中使用data-tap-toggle="false"属性:

Instead of the CSS fix above, you can try the data-tap-toggle="false" attribute on your header, or in javascript:

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

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

Here is the API documentation:http://api.jquerymobile.com/fixedtoolbar/#option-tapToggle and here is the updated demo: DEMO 2

这篇关于jQuery mobile中的页眉高度变化以响应单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！