JQM:如何点击footer中的navbar只切换content的内容
来源:互联网 发布:购物中心数据分析 编辑:程序博客网 时间:2024/04/19 19: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:
他只不过是把页面跳转的效果去掉(默认是slide)了,让人感觉没切换page,只改变了中间的content。
具体JS如下:
这是目前最好也是最能理解的解决办法。我看见还有一个解决办法,但要写很多JS,难理解,不使用也罢.
<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
- JQM:如何点击footer中的navbar只切换content的内容
- 【jquery mobile笔记三】设置jqm的背景色(header,content,footer)
- 我的移动端网页搭建01——简单布局01(header-content-footer-navbar)
- .js footer 点击切换。 用到的是 sohuo/c.js
- JQM控件之Navbar和Tabs
- div 内容点击切换的小技巧
- div 内容点击切换的小技巧
- 如何解决DrawerLayout打开时, main content view 中的按钮仍然可以被点击的问题?
- 修改wordpress的footer内容
- 如何去掉UITableView中的header和footer的粘连效果
- bootstrap navbar-fixed-top遮挡了下面的内容
- 点击UITableViewCell 来回切换内容
- 点击菜单栏实现内容切换
- 点击按钮切换相应的内容,可用于转换图片
- 点击menu导航切换,显示不同的内容模块
- JS—点击链接切换隐藏的内容
- js 点击在同一页切换不同的内容
- CSS3 伪类中content中的内容
- Android OkHttp完全解析 是时候来了解OkHttp了
- 各种JS jQuery CSS资源等
- Android登录页面案例(SharedPreferences的使用)
- LocationListener监听位置变化,当进入到某一距离内时发出提醒
- hdu oj 6020 求给出一串数和一个K任意去点掉k个数能否被三整除(思维)
- JQM:如何点击footer中的navbar只切换content的内容
- 理解JAVA程序逻辑及面向对象编程思想简单总结(3)
- 西方文学名著鉴赏——英文诗歌翻译赏析
- 使用google map显示地图,并标注InfoWindow
- JQ插件:Knob旋钮按钮
- GreenDao教程(2):基本应用
- 缓存之整页缓存
- maven包导入问题(eclipse)
- JQ插件:日期时间选择器date picker