标签: jquery-mobile-pageshow
PhoneGap + JQuery Mobile + Google Maps v3:地图显示左上角的瓷砖？
我有一个PhoneGap应用程序,它使用JQuery mobile在页面之间导航.
当我从主页面导航到包含Google地图的页面时,地图左上角一次只显示一个图块,如下所示:
这可能是什么原因？
**
源代码: 以下脚本位于我的页面的头部
<script>
$(document).on("pageinit", "#stores", function () {
var centerLocation = new google.maps.LatLng('57.77828', '14.17200');
var myOptions = {
center: centerLocation,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
callback: function () { alert('callback'); }
};
map_element = document.getElementById("map_canvas");
map = new google.maps.Map(map_element, myOptions);
var mapwidth = $(window).width();
var mapheight = $(window).height();
$("#map_canvas").height(mapheight);
$("#map_canvas").width(mapwidth);
google.maps.event.trigger(map, 'resize');
});
</script>
我的页面是这样的
<!-- Home -->
<div data-role="page" id="home">
.
.
.
</div>
<div data-role="page" id="stores">
<div data-role="content" id="map_canvas"></div>
</div>
我从家里导航到地图页面,如下所示:
<a href="#stores">Stores</a>
应用Gajotres解决方案后 …
android google-maps-api-3 jquery-mobile cordova jquery-mobile-pageshow
推荐指数
解决办法
查看次数
JQuery Mobile-pageinit vs pageshow
对这些方法的使用感到困惑.我知道在初始化期间会调用pageinit,但是在页面呈现期间每次都会调用pageshow.
我有一个主页,使用$ .ajax()为某些部分加载数据.我在pageinit中加载数据.我也只在pageinit中绑定点击和滑动事件.而且,我也注意到当你从另一个页面回来时没有调用pageinit.
还有一个问题,我们使用swipe.js使用轮播.使用pageinit方法时,它无法正确加载.但是,在pageshow方法中加载时工作正常.当我们使用浏览器后退按钮时,可能会调用pageinit的原因是什么.
此外,在确定加载数据,绑定事件等逻辑的位置时,缓存是否有任何作用.最好是有人可以解释说加载主页数据,然后导航并从另一个页面返回.
javascript jquery jquery-mobile cordova jquery-mobile-pageshow
推荐指数
解决办法
查看次数
Swiper无法在Jquery Mobile中工作
我正在使用带有Jquery Mobile 的idangero.us的Swiper ...
这里我使用Scroll Container Swiper作为内容滑块......
只是面对很多将代码嵌入到一起的问题......
http://jsfiddle.net/keuKu/4/embedded/result/
滚动条没有显示为演示中的滚动条,滚动条也没有粘贴到我留下的标记处...
$(function(){
/* Scroll container: */
var sScroll = $('.swiper-scroll-container').swiper({
scrollContainer : true,
scrollbar : {
container : '.swiper-scrollbar'
}
})
})
推荐指数
解决办法
查看次数
jQPlot图表无法在jquery mobile弹出窗口中运行
我有一个使用jQPlot的折线图,需要在点击jquery移动弹出窗口时显示.不幸的是它没有出现..下面是我的代码.
<!DOCTYPE html>
<html>
<head>
<title>Line Charts and Options</title>
<link class="include" rel="stylesheet" type="text/css" href="jquery.mobile-1.3.0.css" />
<link class="include" rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.canvasAxisLabelRenderer.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<img src="downarrow_Green.svg" onclick="openpopup()"/>
<div id="mychartshow" style="height:150px; width:150px;"></div>
<div data-role="popup" id="ExchangeRate_graph" data-theme="c" align="left">
<div class="ui-grid-d">
<div class="ui-block-a" align="left">
<span>1y</span>
</div>
<div class="ui-block-b" align="left">
<span>6m</span>
</div>
<div class="ui-block-c" align="left">
<span>3m</span>
</div>
<div class="ui-block-d" align="left">
<span>1m</span>
</div>
<div class="ui-block-e" align="left"> …推荐指数
解决办法
查看次数