JQM:如何点击footer中的navbar只切换content的内容

来源:互联网 发布:购物中心数据分析 编辑:程序博客网 时间:2020/12/04 03:10
在JQM运用中想固定Header与Footer,当然Footer有个NavBar导航菜单,
<div data-role="page">
 <div data-role="header">header</div>
  <div data-role="content">这里是内容</div>
  <div data-role="footer">footer</div>
</div>

格式如上,点击相应的结构菜单的时候希望它只替换
<div data-role="content"> .......        </div>
中的内容,然而它却是以页面的形式替换了整个一个"Page"。

关于这个问题,其实并没有很好的解决办法,这我估计是html的通病。

我google了一下(不要baidu,baidu估计搜索不到类似的问题),老外的解决办法其实和我之前的办法一样,就是在每个page中都重复写一个navbar,具体见下面的html:
<div id="home" data-role="page">    <div data-role="header">        <h1>Home</h1>    </div>    <div data-role="content">        <p>            <a href="#page-1">Page 1</a>        </p>    </div></div><div id="page-1" data-role="page">    <div data-role="header">        <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>        <h1>Page 1</h1>    </div>    <div data-role="content">        <p>Page 1 content</p>    </div>    <div data-role="footer" data-position="fixed">        <div data-role="navbar">            <ul>                <li><a href="#page-1" data-role="tab" data-icon="grid" class="ui-btn-active">Page 1</a></li>                <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li>                <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li>            </ul>        </div>    </div></div><div id="page-2" data-role="page">    <div data-role="header">        <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>        <h1>Page 2</h1>    </div>    <div data-role="content">        <p>Page 2 content</p>    </div>    <div data-role="footer" data-position="fixed">        <div data-role="navbar">            <ul>                <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li>                <li><a href="#page-2" data-role="tab" data-icon="grid" class="ui-btn-active">Page 2</a></li>                <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li>            </ul>        </div>    </div></div><div id="page-3" data-role="page">    <div data-role="header">        <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>        <h1>Page 3</h1>    </div>    <div data-role="content">        <p>Page 3 content</p>    </div>    <div data-role="footer" data-position="fixed">        <div data-role="navbar">            <ul>                <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li>                <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li>                <li><a href="#page-3" data-role="tab" data-icon="grid" class="ui-btn-active">Page 3</a></li>            </ul>        </div>    </div></div>


他只不过是把页面跳转的效果去掉(默认是slide)了,让人感觉没切换page,只改变了中间的content。
具体JS如下:
$("a[data-role=tab]").each(function () {    var anchor = $(this);    anchor.bind("click", function () {        $.mobile.changePage(anchor.attr("href"), {            transition: "none",            changeHash: false        });        return false;    });});$("div[data-role=page]").bind("pagebeforeshow", function (e, data) {    $.mobile.silentScroll(0);    $.mobile.changePage.defaults.transition = 'slide';});


这是目前最好也是最能理解的解决办法。我看见还有一个解决办法,但要写很多JS,难理解,不使用也罢.
0 0
原创粉丝点击