如何在jQuery Mobile中将标题设置为全屏模式? [英] How to set header to full screen mode in jQuery Mobile?

问题描述

当我为标题设置属性data-fullscreen="true"时，它可以正常工作.但是，当我收到一些事件时，确实需要在运行时执行此操作.我试过了:

When I set attribute data-fullscreen="true" for header, it works fine. But I do need to do this in runtime, when I receive some event. I tried this:

$(document).ready(function() {
    $("[data-role=header]").attr("data-fullscreen", "true");
});

在Chrome的元素检查中，属性data-fullscreen更改为true，但标头没有任何反应.有人知道另一种方式吗?

In Chrome's element inspection the attribute data-fullscreen changes to true, but nothing happens with header. Does anyone know another way?

推荐答案

这是一个有效的示例: http://jsfiddle.net/Gajotres/HCcUe/

Here's a working example: http://jsfiddle.net/Gajotres/HCcUe/

和代码示例:

$(document).on('pagebeforeshow', '#index', function(){       
    $('[data-role="header"]').attr({'data-fullscreen':'true','data-position':'fixed'}).html('<h3>Test</h3>');
    $('#index').trigger('pagecreate');                                    
});

使用pageshow或pagebeforeshow页面事件来设置此属性.另外，不要在jQuery Mobile中使用准备就绪的文档，在这里您会找到原因: https://stackoverflow.com/a/14469041/1848600

Use pageshow or pagebeforeshow page event to set this attributes. Also do not use document ready with jQuery Mobile, here you will find why: https://stackoverflow.com/a/14469041/1848600

这篇关于如何在jQuery Mobile中将标题设置为全屏模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！