Jquery mobile Jquery移动导航页面刷新css已删除
我有两个页面,我计划使用JQM mobile framework进行导航,我计划使用多个页面,为了使代码整洁,我决定将多个页面放在不同的html文件中。导航到下一屏幕页面刷新时,页面CSS未加载Jquery mobile Jquery移动导航页面刷新css已删除,jquery-mobile,Jquery Mobile,我有两个页面,我计划使用JQM mobile framework进行导航,我计划使用多个页面,为了使代码整洁,我决定将多个页面放在不同的html文件中。导航到下一屏幕页面刷新时,页面CSS未加载 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page 1</title> <link rel="stylesheet" href="http
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page 1</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript">
$(document).swipeleft(function() {
$.mobile.changePage("page2.html");
});
</script>
</head>
<body>
<div data-role="page" id="page1" data-dom-cache="true">
<div data-role="header"></div>
<div data-role="content">
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Section 1</h3>
<p><a href="page2.html" data-transition="slide" >I'm the collapsible content for section 1</a></p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div>
<div data-role="footer"></div>
</div>
</body>
</html>
第1页
$(文档).swipleft(函数(){
$.mobile.changePage(“page2.html”);
});
第一节
第二节
我是第2节的可折叠内容
第三节
我是第3节的可折叠内容
第2页:我有下面的代码
<div data-role="page" id="page2" data-dom-cache="true">
<div data-role="header"></div>
<div data-role="content">
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Page 2</h3>
<p>
<a href="page3.html" data-transition="slide">I'm the
collapsible content for section 1</a>
</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div>
<div data-role="footer"></div>
</div>
第2页
第二节
我是第2节的可折叠内容
第三节
我是第3节的可折叠内容
导航会发生,但当我刷新页面时,css会被删除。如何拥有多个页面并在屏幕之间导航。将您的page1.html更改为下面的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1" data-dom-cache="true">
<div data-role="header"></div>
<div data-role="content">
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Section 1</h3>
<p><a href="page2.html" data-transition="slide" >I'm the collapsible content for section 1</a></p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div>
<div data-role="footer"></div>
</div>
<script type="text/javascript">
$('#page1').on('pageshow',function(event){
$("#page1").swiperight(function () {
$.mobile.changePage("page2.html");
});
});
</script>
</body>
</html>
第1页
第一节
第二节
我是第2节的可折叠内容
第三节
我是第3节的可折叠内容
$('page1')。在('pageshow',函数(事件){
$(“#第1页”).SwiperRight(函数(){
$.mobile.changePage(“page2.html”);
});
});
并更改您的page2.html,如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page2" data-dom-cache="true">
<div data-role="header"></div>
<div data-role="content">
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Page 2</h3>
<p>
<a href="page3.html" data-transition="slide">I'm the
collapsible content for section 1</a>
</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div>
<div data-role="footer"></div>
</div>
<script type="text/javascript">
$('#page2').on('pageshow',function(event){
alert('page2 loaded');
});
</script>
</body>
</html>
第1页
第2页
第二节
我是第2节的可折叠内容
第三节
我是第3节的可折叠内容
$('page2')。在('pageshow',函数(事件){
警报(“第2页已加载”);
});
现在应该可以了。请告诉我发生了什么事。我将脚本包装在$('#page2')中代码>。这是我所做的唯一更改。我指的是使用较旧版本JQM的版本
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1 jquery.mobile1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
请向OP解释您提供此更改的原因。它会立即导航到下一页第2页。它不能解决我的问题检查更新的代码。我已将刷卡事件分配给页面ID。请检查此jqm页面。他们只有标准jqm格式页面,但工作正常。即使在refreshMayu中,也感谢您最终找到了它。该站点使用的是较旧版本的JQM。感谢您的时间。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
$(document).on("mobileinit", function () {
$.mobile.pushStateEnabled = false;
});