- 浏览: 5777059 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (890)
- WindowsPhone (0)
- android (88)
- android快速迭代 (17)
- android基础 (34)
- android进阶 (172)
- android高级 (0)
- android拾遗 (85)
- android动画&效果 (68)
- Material Design (13)
- LUA (5)
- j2me (32)
- jQuery (39)
- spring (26)
- hibernate (20)
- struts (26)
- tomcat (9)
- javascript+css+html (62)
- jsp+servlet+javabean (14)
- java (37)
- velocity+FCKeditor (13)
- linux+批处理 (9)
- mysql (19)
- MyEclipse (9)
- ajax (7)
- wap (8)
- j2ee+apache (24)
- 其他 (13)
- phonegap (35)
最新评论
-
Memories_NC:
本地lua脚本终于执行成功了,虽然不是通过redis
java中调用lua脚本语言1 -
ZHOU452840622:
大神://处理返回的接收状态 这个好像没有监听到 遇 ...
android 发送短信的两种方式 -
PXY:
拦截部分地址,怎么写的for(int i=0;i<lis ...
判断是否登录的拦截器SessionFilter -
maotou1988:
Android控件之带清空按钮(功能)的AutoComplet ...
自定义AutoCompleteTextView -
yangmaolinpl:
希望有表例子更好。。。,不过也看明白了。
浅谈onInterceptTouchEvent、onTouchEvent与onTouch
在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,难理解,不使用也罢.
发表评论
-
JQ插件:radiosToSlider
2014-09-11 17:43 1327demo: http://rubentd.com/radios ... -
Javascript常用正则表达式集合
2014-09-06 22:08 14491.匹配正整数:/^[0-9]*[1-9][0-9]*$/ 2 ... -
关于CSS细节集合
2014-09-05 12:23 1363以后可能会用到,记一下 原址:http://www.iteye ... -
cordova插件InAppBrowser在iPhone上显示url和Done、Back/Forward键的问题
2014-09-02 14:11 11988I am currently building a News ... -
CSS实现简单动态渐变闪烁效果
2014-08-28 15:57 4039CSS练习用例: .event { border ... -
JQ插件:nicescroll自定义滚动条
2014-08-27 15:53 2058参考: http://www.areaaperta.com/n ... -
jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码
2014-08-27 14:55 1656<!DOCTYPE html PUBLIC &quo ... -
JQ插件:qrcode生成二维码
2014-08-27 14:51 7504jquery.qrcode.js 是把它用jquery方式封装 ... -
JQ插件:日期时间选择器date picker
2014-08-27 13:59 2383这个控件关键是它能支持在mobile中显示。iPhone和an ... -
JQ插件:Knob旋钮按钮
2014-08-27 10:33 2478在线演示 用法介绍: 分享一款超棒的jQuery旋钮插件 ... -
使用google map显示地图,并标注InfoWindow
2014-08-22 17:53 8120首先导入google map JS(需要VPN): <s ... -
各种JS jQuery CSS资源等
2014-08-15 23:53 13142014年最酷的30个JavaScript库 http://w ... -
CSS将图片和文字垂直居中
2014-08-15 16:56 1197这个问题说起来有点惭 ... -
jQuery 中使用 JSON
2014-08-15 11:29 3218在 jQuery 中已经提供了对于解析 JSON 的内在支持, ... -
JQM Toggle switch、selectmenu动态设置默认选中值时没有效果的问题
2014-08-14 13:21 2118静态时,ok,没问题,如下: <label for=&q ... -
cordova读写文件(2)
2014-08-13 17:53 3098上一篇讲的是如何将数据写入文件 这篇讲如何读取文件。 v ... -
cordova读写文件(1)
2014-08-13 17:44 23517使用cordova可以很方便的在手机sdcard中读写文件。 ... -
JQM自动提示插件autoComplete.js
2014-08-11 17:33 1326JQM自动提示插件: https://github.com/c ... -
Jquery mobile 新手问题总汇
2014-08-05 14:43 1479http://www.wglong.com/main/arti ... -
JQM控件之Navbar和Tabs
2014-08-01 15:49 6337在JQM中使用导航栏Navbar是简单的。 只需要将data ...
相关推荐
jQM:jQM文档的免费社区应用程序的源代码
JQM,是一个队列管理器。 它有三个目标: 通过使用配置丰富的队列来优化和简化作业的执行,无论它们是什么 使工作管理变得简单 易于包含或嵌入到大多数环境中。 结果是一个占用空间小、易于使用的网格执行系统,它...
jqm中文时间控件,在手机web开发上应该有所帮助
jqm模仿iPhone桌面菜单,jqm实战开发,jqm开发例子Demo jqm模仿iPhone jqmDemo jqm例子 jqm实战开发 jqm选项卡 使用jqm实现iPhone桌面功能,jQuery Mobile实现选项卡功能
Booking_Movies jQueryMobile关于预订电影Sour Leangchhean设计
jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo
一个jqm的实例,一个前端的运用,有关播放器的
JQM1.4.5-DEMOS JQM 移动演示 1.4.5
将常用的组件分类成page页面、content内容、Form表单,其中page页面包括header头部、navbar导航、footer底部、grid网格、panel面析、collapsible折叠层,content内容image图片、audio音频、video视频、button按钮、...
JQM 的使命是向所有主流移动浏览器提供一种统一体验,使整个 Internet 上的内容更加丰富 — 不管使用哪种查看设备。 JQM 的目标是在一个统一的 UI 中交付超级 JavaScript 功能,跨最流行的智能手机和平板电脑设备...
jqm-内联-多选一个插件,可让您使用复选框组在 jquery mobile 中表示多选。 演示: : 为什么? 我有一个存在于弹出窗口中的 jQM 表单,我需要在这里使用多选。 多选需要使用 jQM 样式,但这是不可能的,因为 jQM 将...
样品101 示例 jqm 模板
http://blog.csdn.net/chelen_jak/article/details/19397569 源码
《jQuery Mobile实战》源码
jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解
JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片.pdf
JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片[汇编].pdf
drupal-app-jqm-phonegap drupal-app-ajax-jqm-phonegap
jQM Autocomplete是一个自动提示相关内容的jQuery Mobile搜索插件。用户在搜索框输入前几个字母或是汉字的时候,Autocomplete就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,...
jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮jQueryMobile jqm jqm按钮隐藏 jqm按钮显示 jqm按钮事件 jQuery Mobile(jqm)input按钮的隐藏和显示 a标签的隐藏和显示 圆角按钮的css样式控制