关于jquery mobile转场效果的问题寻求高手解答！~_IT百科

一直看的英文的api,最近看到有两个人问转场了,不知道转场是翻译的什么东西.

不过你说的这种类似于模板页,header和footer不变的效果可以用 jqm的fix position来解决,然后通过在一个container中切换page实现

刚开始项目只是选择了iscroll框架实现滚动翻页，后来和jQuery mobile（jqm）框架整合后，界面没法使用

在网上搜索了很多资料，各种尝试后还是问题很多。最后在老外的网站上发现了jquery-mobile-iscrollview框架，用于整合jquery mobile和iscroll的一个开源框架，处理了很多jquery mobile和iscroll整合中出现的问题。

1、jquery-mobile-iscrollview下载地址：https://github.com/watusi/jquery-mobile-iscrollview

解压后的\jquery-mobile-iscrollview-master\jquery-mobile-iscrollview-master\demo\source路径下是需要引用的js和css文件

\jquery-mobile-iscrollview-master\jquery-mobile-iscrollview-master\demo\build路径下是各个jquery mobile版本下的列表和滚动翻页的例子

在该路径下，我选择了pull_14.html文件，用chrome打开后，发现下面的导航栏变形，将

去掉后，下面的导航栏正常了

页面中引用的pull-example.js文件是上拉、下拉事件的处理，只需要将gotPullDownData和gotPullUpData函数修改一下即可实现自己需要加载的数据

2、直接测试该功能没有什么问题，当把该翻页的页面链接到其他页面上时，通过链接打开该页面，下面的导航栏又出现了问题

后来发现，这是问题可能是由于jqm的外部页面链接引起的错。jqm在使用外部链接打开另一个页面时，会使用ajax读取需要打开的文件，然后将该文件动态加载到已经打开的页面的后面，jqm只加载文档中取出的第一个页面（第一个带有role="page"的div），其他内容都将被忽略。

后来，将列表页面(b.html)所有加载的css和js的标签放到链接该页面的页面(a.html)的<head>标签中。

[html] view plain copy

content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

rel="stylesheet" type="text/css" />

media="screen" rel="stylesheet" type="text/css" />

$(document).bind("mobileinit", function(){

//容许ajax跨域访问

$.mobile.allowCrossDomainPages = true

})

</script>

type="text/javascript"></script>

type="text/javascript"></script>

当链接打开该页面后，列表页面稳定了

3、jquery-mobile-iscrollview中引用的jqm框架的版本没有项目中的高，试着将jqm的版本替换为项目中使用的版本后，该功能依旧没有出现问题

html5实现地图上定位导航路线方法如下：

1.先通过百度拾取坐标系统获得点位的坐标。

http://api.map.baidu.com/lbsapi/getpoint/index.html

2.在网页的<head>中插入百度API引用脚本。

key=&v=1.1&services=true"></script>

3.在网页的</body>之后</html>之前插入地图显示代码。

4.设置显示地图的div的id为“dituContent”，即添加 id="dituContent"

由于jqm的div的高度都是根据内容自由放大的，所以为了地图能正常显示，还需要

增加一个高度值，一般情况600px就可以，完成。

欢迎分享，转载请注明来源：内存溢出

关于jquery mobile转场效果的问题寻求高手解答！~