首页 > 代码库 > JQM:如何点击footer中的navbar在只切换content的内容
JQM:如何点击footer中的navbar在只切换content的内容
在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的通病。
<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=http://www.mamicode.com/"#page-1">Page 1 >
他只不过是把页面跳转的效果去掉(默认是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,难理解,不使用也罢.JQM:如何点击footer中的navbar在只切换content的内容
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。