发表新帖
发表新帖

Persistent header in jQuery Mobile

后端 未结
关注
10 751
慢半拍i
慢半拍i 2020-12-16 01:49

Couldn\'t figure out a way to put a bounty on my old question, so I\'m reposting it because maybe it was a bug.

Short version: I want a persistent header in a PhoneG

相关标签:
10条回答
  • 小蘑菇
    2020-12-16 02:26

    1) Besides the jquery.js, jquerymobile.js and .css files download and include: jquery.easing.1.3.js, jquery.mobile.scrollview.js, and scrollview.js. (google)

    2) Standard header, listview, and footer with style attribue below:

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

    As described in detail here.

    0 讨论(0)
  • 忘了有多久
    2020-12-16 02:31

    A little bit of jquery will do the trick

    <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 -->
    0 讨论(0)
  • 故里飘歌
    2020-12-16 02:31

    There's an example of doing this with a Footer here: http://jquerymobile.com/demos/1.0/docs/toolbars/footer-persist-a.html

    I haven't had a chance to try it out, but it should work the same way with a header.

    0 讨论(0)
  • 隐瞒了意图╮
    2020-12-16 02:33

    Add the following css to your page or to the bottom of the css file

    Please note I have not tested this code on mobile devices..

     <style type="text/css">
    .ui-header {
        position: fixed !important;
        top: 0 !important;
        z-index: 99;
    }
    .ui-content {
        margin-top: 35px;
    }
</style>
    0 讨论(0)
 看不清?
提交回复
热议问题