转型：JQuery Mobile无法识别主题

Question

我正在使用JQuery Mobile 1.4.2创建JQuery Mobile WebApp。加载新页面时，页面转换期间会短暂发生可视错误：

我认为这是在转换过程中没有应用主题的问题，当下一页完全加载时，主题再次正确显示。

以下是两个页面的属性：data-theme="a"

页面声明：

<section id="landmarks" data-role="page" data-theme="a">

后退按钮声明：

<a href="#landmarks" data-transition="slide" data-direction="reverse" data-icon="arrow-l" data-rel="back" data-theme="a">Back</a>

JSFiddle（点击“第2页”按钮，请注意转换过程中导航栏颜色的变化）：http://jsfiddle.net/jakechasan/stNpV/

在渲染页面以正确渲染后退按钮和标题栏文本之前是否应该调用一个函数？

Answer 1

data-id =＆＃34; appHeader＆＃34;在标题中导致问题。删除该属性，你的小提琴工作正常：

  

<强> FIDDLE

<header data-role="header" data-position="fixed" >
    <h1>Page 1</h1>
</header>

如果您需要data属性，请将其重命名为id以外的其他内容，例如

data-appid="appHeader"

如果查看jQM引用（http://api.jquerymobile.com/data-attribute/），您将看到该框架使用了data-id。

Answer 2

您的示例使用旧的jQuery Mobile方式实现永久页脚/标题。

jQuery Mobile使用完全不同的方法。

工作示例：http://jsfiddle.net/Gajotres/stNpV/3/

HTML：

<header data-role="header" data-position="fixed" data-id="appHeader" id="appHeader">
    <h1>Page 1</h1>
</header>

<section data-role="page" data-theme="b" id="page1">    
    <div data-role="content">
        <a href="#page2" data-role="button" data-transition="slide">Page 2</a>
    </div>
</section>

<section data-role="page" data-theme="b" id="page2">    
    <div data-role="content">
        <a href="#page1" data-role="button" data-transition="slide" data-direction="reverse">Page 21</a>
    </div>    
</section>

的JavaScript：

$( document ).ready(function() {
    $('#appHeader').enhanceWithin().toolbar();
});

$(document).on('pagecontainershow', function () {
    activePage = $('body').pagecontainer('getActivePage');
    pageId = activePage.prop('id'); 

    if (pageId === 'page1') {
        activePage.parent().find('.ui-header h1').html('Page 1');
    }

    if (pageId === 'page2') {
        activePage.parent().find('.ui-header h1').html('Page 2');
    }    
});