phonegap jquery移动页面容器更改
phonegap jquery mobile pagecontainer change
我从Phonegap开始,并尝试将其与jquery mobile相结合。我有这段代码,我找不到任何错误。但它不会改变页面。HTML代码:
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Clever Games Collection</title>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
<h1>Clever Games Collection</h1>
</div>
<div data-role="content">
<table>
<tr>
<td><a href="guess">test</a></td>
<td><a href="activities">test</a></td>
</tr>
<tr>
<td><a href="story">test</a></td>
<td><a href="quiz">test</a></td>
</tr>
</table>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed">
<h1>Header - Page 1</h1>
</div>
<div data-role="content"></div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/libs/jquery.js"></script>
<script type="text/javascript" src="js/libs/jquery-mobile.js"></script>
<script type="text/javascript" src="js/pageController.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
Javascript代码
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
pagesController.onReady();
}
};
var pagesController = {
onReady: function() {
$("a").click(function(event) {
event.preventDefault();
$(':mobile-pagecontainer').pagecontainer('change', '#page2', {
transition: 'flip',
changeHash: false,
reverse: true,
showLoadMsg: true
});
});
}
};
当我点击链接时,它不会切换页面。我在这里找到了很多答案,并尝试了一下,但都不起作用。
谢谢你的帮助。
解决方案是添加到jquery样式表的链接。
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.css" />
相关文章:
- 正在SharePoint 2013母版页中添加JQuery移动文件
- JQuery移动动态分区页面
- jquery移动对齐按钮取决于内容大小
- 在websql成功调用中Jquery移动主题打开按钮
- 通过格式化将jquery移动组件动态添加到列表视图中
- Jquery移动转换复选框在Jquery onclick函数()中第二次选中不起作用
- jQuery移动列表视图和面板
- 将代码从jquery移动到angularjs
- 无法使用谷歌地图获得多页jquery移动版
- jquery移动应用程序无法使用jquryMobile框架JS和css文件的相对路径
- 使用 jQuery(移动)更新多个选择标签
- 如何在页面之间导航后停止jquery移动中的重复数据
- 如果我在jquery移动中使用“onclick”,按钮不会改变颜色
- jQuery 移动内部页面问题
- 在 jquery 移动中离开页面时结束 SetInterval 函数
- jQuery移动显示页面5秒钟,然后重定向
- 如何正确实现Jquery移动路由器插件
- 带有scrollTop的JQuery移动错误
- Jquery移动列表视图图标未正确显示
- 动态更改jQuery移动图标的背景颜色