Man*_*rra 1 jquery jquery-mobile cordova
我想要这个：使用 jquery mobile 和 phonegap 将 html 文件加载到 data-role=page 中：我的项目有很多带有独立页面的小型 HTML 文件。
我用：
索引.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Inicio :: Autenticacion
</title>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1">
<link rel="stylesheet" href="jsmobile/jquery.mobile-1.2.0.min.css" type="text/css">
<script src="jsmobile/jquery.js" type="text/javascript"></script>
<script src="jsmobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#boton').bind('click', function(event) {
$.mobile.loadPage("Fichero/index.html",{pageContainer:$("#container1")});
});
});
</script>
</head>
<body>
<div data-role="page" id="container0">
<div data-role="content">
<a id="boton" >Change Page</a>
</div>
</div>
<div id="container1">
</div>
</body>
</html>
文件：Fichero/index.html
<div date-role="page" id="micro">
<div data-role="header" >
<h1>Test Heas</h1>
</div><!-- /header -->
<div data-role="content" >
Test here..
</div><!-- /content -->
</div>
当用户单击“更改页面”链接时，我想从容器 1 中的 Fichero/index.html 加载 html 内容，但它不起作用。
它将内容加载到 DIV id="container1" 和 DOM，但不显示/刷新（就像隐藏）。
做一个简单的 html 文件外部加载和 DOM 被刷新和可见的 HTML 代码加载的方法是什么？
提前致谢。
您的 html 与 jquery mobile 所需的结构不匹配，因此您将看不到任何内容。
任何应该可见的 html 都需要在 data-role="content" div 内，在 data-role="page" div 内
如果您只想加载外部 html，只需执行 ajax 调用（但我认为考虑到转换，正确的 jQuery 移动方式更好。示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Inicio :: Autenticacion </title>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).ready(function() {
$('#boton').bind('click', function(event) {
$.get('Fichero/index.html').success(function(html) {
$('#container1').html(html);
});
});
});
</script>
</head>
<body>
<div data-role="page" id="container0">
<div data-role="content">
<a id="boton" >Change Page</a>
<!--
Place the Container here because
jQuery Mobile data-role="page" defines a browser fullscreen page
(the dataroles are rules for formating a page and there can be only one visible page)
-->
<div id="container1"></div>
</div>
</div>
</body>
| 归档时间： |
|
| 查看次数： |
15120 次 |
| 最近记录： |