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

阅读更多
在JQM运用中想固定Header与Footer,当然Footer有个NavBar导航菜单,

 
header

 
这里是内容

 
footer



格式如上,点击相应的结构菜单的时候希望它只替换
.......       

中的内容,然而它却是以页面的形式替换了整个一个"Page"。

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

我google了一下(不要baidu,baidu估计搜索不到类似的问题),老外的解决办法其实和我之前的办法一样,就是在每个page中都重复写一个navbar,具体见下面的html:

Home

Back

Page 1

Page 1 content

Back

Page 2

Page 2 content

Back

Page 3

Page 3 content



他只不过是把页面跳转的效果去掉(默认是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,难理解,不使用也罢.

你可能感兴趣的:(javascript,jquery,mobile)