10

无法找到一种方法来悬赏我的旧问题，所以我重新发布它，因为它可能是一个错误。

简短版本：我希望 PhoneGap+JQM 应用程序中的持久页眉在页面转换之间保持原位（从不移动），就像页脚可以设计的那样。

长版：首先，我对 jQuery 和 JQM 完全陌生，所以请指出我犯的任何新手错误。

我正在尝试获取在应用程序的不同页面之间持续存在的标题。它必须像当用户在页面之间转换时保持在原地的持久页脚。持久页脚是使用 data-role="footer" data-id="(一些一致的 id)" data-position="fixed" 实现的。它工作得相当好（随机故障，它放错了位置，然后在几秒钟后自动修复）。有关我正在寻找的更多信息，请参阅此处的“持久页脚”：http: //jquerymobile.com/test/docs/#/test/docs/toolbars/docs-footers.html

并在下面的链接中查看持久页脚的示例。查看在页脚中选择一个项目如何转换到一个全新的页面，但页脚不会移动：http: //jquerymobile.com/test/docs/#/test/docs/toolbars/footer-persist-a.html

现在我正在尝试做同样的事情，但我希望它位于应用程序的顶部而不是底部。我尝试了以下事情：

  • 将页脚移动到页面顶部（不知道在 jQuery 中要捕获什么标签。尝试使用几个 jQuery 类的 div.（jQuery 类），但没有一个工作。我使用 FireBug 确定它是“顶部”CSS 属性这需要改变。

每个页面上的 HTML：

<div data-role="footer" data-position="fixed" data-id="header">
<img src="images/bgheader.png" />
</div>

JavaScript：

$('div.ui-footer').css('top', '0px');
$('div.ui-footer-fixed').css('top', '0px');
$('div.fade').css('top', '0px');
$('div.ui-fixed-overlay').css('top', '0px');
$('div.ui-bar-a').css('top', '0px');
  • 使用 data-role="header" （不像页脚那样持续存在）。此方法将创建我想要的标题（因为我覆盖了一些 CSS），但是当我在页面之间转换时，它不会将标题保持在顶部。JQM 文档也没有声明它们支持持久标头，但它确实声明它支持持久页脚：

每个页面上的 HTML：

<div data-role="header" data-position="fixed" data-id="header" id="header" data-backbtn="false">
<img src="images/bgheader.png" />
</div>
4

10 回答 10

2

一点点jquery就可以了

<script type="text/javascript">
    $(document).ready(function() {
      $('#lpage1:first').addClass('ui-btn-active'); //set the first tab as active   
      firstContent=$('#content1'); //defining selectors
      secondContent=$('#content2'); 
      secondContent.hide(); //hide the second content division
    });

    // show only the first content div
    function showContent1() { 
        firstContent.show();
        secondContent.hide();
    }
    function showContent2() {
        firstContent.hide();
        secondContent.show();
    }

    //clicking on tab 2 
    $('#lpage2').live('tap',function(event){
        //alert("click");
        showContent2();
    });
</script>
<body> 
<!-- Start of first page -->
<div data-role="page" id="page1">

    <div data-role="header" data-position="fixed">
        <h1>Foo</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#" id="lpage1" data-transition="pop">Home<br/>&nbsp;</a></li>
                <li><a href="#" id="lpage2" data-transition="pop">My<br/>Profile</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->

    <!-- page1 -->
    <div data-role="content" id="content1"> 
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content -->

    <!-- page2 -->
    <div data-role="content" id="content2"> 
        <p>I'm second in the source order so I'm shown as the page.</p>     
        <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
于 2011-08-25T02:26:38.807 回答
2

几天来，我一直在努力解决这个问题，这一次谷歌没有帮助。我终于想出了以下解决方案。它在转换开始之前将标头 HTML 复制到新页面上，然后在转换完成后从前一页面中删除代码。页眉和页脚仍会随着页面转换而移动，但即使在导航嵌套列表时它们也会持续存在。

// dynamically move the header and footer between pages on load events
$('div.ui-page').live('pagebeforeshow', function(event, ui) {
    // avoid duplicating the header on the first page load
    if (ui.prevPage.length == 0) return;

    // remove the jQuery Mobile-generated header
    $('.ui-header').addClass('to-remove-now');
    $('#header').removeClass('to-remove-now');
    $('.to-remove-now').remove();

    // grab the code from the current header and footer
    header = $('#header')[0].outerHTML;
    footer = $('#footer')[0].outerHTML;

    // mark the existing header and footer for deletion
    $('#header').addClass('to-remove');
    $('#footer').addClass('to-remove');

    // prepend the header and append the footer to the generated HTML
    event.currentTarget.innerHTML = header + event.currentTarget.innerHTML + footer;
});

// remove header from previous page 
$('div.ui-page').live('pagehide', function(event, ui) {
    $('.to-remove').remove();
});

然后只需添加id="header"到页眉 div 和id="footer"页脚，然后像往常一样将它们放在内容中。

于 2011-10-19T18:58:19.440 回答
1

将以下 css 添加到您的页面或 css 文件的底部

请注意我没有在移动设备上测试过这个代码。。

 <style type="text/css">
    .ui-header {
        position: fixed !important;
        top: 0 !important;
        z-index: 99;
    }
    .ui-content {
        margin-top: 35px;
    }
</style>
于 2011-06-16T13:29:40.450 回答
1

嗨，它可能会迟到，但这对我有用。

[data-role=page]
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    overflow: scroll;
    margin: 0 auto -40px;
}
.footerPlaceHolder
{
    height: 40px;
}
[data-role=footer]{height:40px; bottom:0; position:fixed !important; top: auto !important; width:100%; z-index: 9999;}

你的 html

<div data-role="page">
    ....Your content....
    <div class="footerPlaceHolder"></div>
    <div data-role="footer"> 
        <a href="#" data-icon="arrow-l" class="ui-btn-left">Back</a>
        <a href="#" onclick="settingsClicked(this);" data-icon="gear" class="ui-btn-right">Settings</a> 
    </div>
</div>

PS请注意我不擅长这件事，尤其是css。所有评论将不胜感激。

谢谢。

于 2012-05-21T21:55:33.627 回答
1

这里有一个使用页脚执行此操作的示例：http: //jquerymobile.com/demos/1.0/docs/toolbars/footer-persist-a.html

我还没有机会尝试它，但它应该以与标题相同的方式工作。

于 2012-01-25T17:45:52.653 回答
1

1）除了jquery.js，jquerymobile.js和.css文件下载包括：jquery.easing.1.3.js，jquery.mobile.scrollview.js，scrollview.js。（谷歌）

2) 具有以下样式属性的标准页眉、列表视图和页脚：

<div id="home" data-role="page">...</div>
<div data-role="content"><ul data-role="listview"><li>List item 1</li></ul></div>
<div data-role="footer" style="position: fixed;bottom: 0px;">...</div>

正如这里详细描述的那样。

于 2011-09-16T18:05:56.440 回答
0

我尝试研究 jquery 移动源，我认为持久页脚的魔力发生在这里。

$( document ).delegate( ".ui-page", "pagebeforeshow", function( event, ui ) {
            var page = $( event.target ),
                footer = page.find( ":jqmData(role='footer')" ),
                id = footer.data( "id" ),
                prevPage = ui.prevPage,
                prevFooter = prevPage && prevPage.find( ":jqmData(role='footer')" ),
                prevFooterMatches = prevFooter.length && prevFooter.jqmData( "id" ) === id;

            if ( id && prevFooterMatches ) {
                stickyFooter = footer;
                setTop( stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );
            }
        })
        .delegate( ".ui-page", "pageshow", function( event, ui ) {
            var $this = $( this );

            if ( stickyFooter && stickyFooter.length ) {
                setTimeout(function() {
                    setTop( stickyFooter.appendTo( $this ).addClass( "fade" ) );
                    stickyFooter = null;
                }, 500);
            }

            $.mobile.fixedToolbars.show( true, this );
        });

我正在考虑添加

setTop( page.find( ":jqmData(role='header')").removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );

给它。祝我好运 ...

于 2012-02-03T07:49:09.760 回答
0

如果您可以使用一个共享标题，则可以在主页中提供标题：（注意：不涉及 jQuery，抱歉“只使用 jQuery”家伙 :-p）

<div class="header">
    <div class="logo"></div>
    <div class="menu"></div>
</div>
<div data-role="page" class="page" id="loading">
    <div data-role="content">
        <h1>Your Page</h1>
    </div>
</div>

然后使用 CSS 将每个页面的顶部向下推：

.ui-page{
    top:64px !important;
}

我对那里的!important不满意，但是 jQueryM 在 CSS 中使用的规则在不使用 ID 的情况下具有最高的特异性。如果你知道你所有的 ID，你可能不用它......随意提出其他更好的规则。

于 2013-01-22T00:36:30.760 回答
0

我认为这是最近添加到 JQM 中的。 http://view.jquerymobile.com/1.3.2/dist/demos/widgets/fixed-toolbars/footer-persist-a.html

该链接清楚地表明您可以将 data-id 属性添加到 BOTH。页眉和页脚。但这对我不起作用。

编辑：我注意到，您必须为持久标题打开页面转换。但是过渡太慢了应用程序......

于 2013-08-16T07:11:55.293 回答
-1

检查此示例，在使页脚和页眉持久下。

于 2011-06-14T11:20:33.420 回答