Question

我正在使用jquery mobile来设计我的应用。

我的设计是：在文件Index.html中，我在标题中有一个导航栏，每个选项在导航栏下方加载不同的外部页面。

在每个外部页面中，我将加载标题列表以供阅读。当我单击列表的每个标题行时，它将显示带有转换的标题内容：“幻灯片”并仍然在标题中保留导航栏。

我能这样做吗？我工作了两天仍然没有解决方案。

main.js + index.html

var pagesHistory = [];
var currentPage = {};
var path = "";
  
function wlCommonInit(){
	// Common initialization code goes here
	$("#pagePort").load("pages/Page1.html", function(){
		$.getScript(path + "js/Page1.js", function() {
			if (currentPage.init) {
				currentPage.init();
			}
		});
	});
}
   
function loadPage1(){
    $("#pagePort").load("pages/Page1.html");
};
function loadPage2(){
    $("#pagePort").load("pages/Page2.html");
};
function loadPage3(){
    $("#pagePort").load("pages/Page3.html");
};

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>NavBar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/main.css">
    <script>window.$ = window.jQuery = WLJQ;</script>
    <script src="libs/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
    <link rel="stylesheet" href="libs/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css"> 
</head>
<body style="display: none;">
    <!--application UI goes here-->
    <article data-role="page">
        <div data-role="header">
            <div data-role="navbar">
                <ul>
                    <li><a href="#page-1" data-role="tab" data-icon="grid" onclick="loadPage1();">Page 1</a></li>
                    <li><a href="#page-2" data-role="tab" data-icon="grid" onclick="loadPage2();">Page 2</a></li>
                    <li><a href="#page-3" data-role="tab" data-icon="grid" onclick="loadPage3();">Page 3</a></li>
                    <li><a href="#page-1" data-role="tab" data-icon="grid" onclick="loadPage1();">Page 1</a></li>
                    <li><a href="#page-2" data-role="tab" data-icon="grid" onclick="loadPage2();">Page 2</a></li>
                </ul>
            </div>
        </div>
        <!-- This is a placeholder for dynamic page content -->
        <div data-role="content" class="ui-content">
            <div id="pagePort"></div>
        </div>
    </article>
    <script src="js/initOptions.js"></script>
    <script src="js/main.js"></script>
    <script src="js/messages.js"></script>
</body>
</html>

Page1.js + Page1.html

currentPage = {};
currentPage.init = function(){
    WL.Logger.debug("MainPage :: init");
    $("#pagePort").pagecontainer({defaults: true});
};

currentPage.loadPage = function(){
WL.Logger.debug("MainPage :: loadPage 1:: ");
$.mobile.pageContainer.pagecontainer("change","pages/Page2.html", {transition:slide},true,true);
};

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <!--
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
    -->
    <link rel="stylesheet" href="css/main.css">
    <script>window.$ = window.jQuery = WLJQ;</script>
    <script>
    $.getScript(path + "js/Page1.js");
    </script>
</head>
<body>
    <div data-role="content" >
        <p id="currentPage">
            Currently <b>Page1.html</b> page is loaded.
            Day la content 1
        </p>
        <input type="button" id="loadPage2Button" class="appButton" value="Load Page2.html" onclick="currentPage.loadPage();" />
        <input type="button" id="loadPageContent" class="appButton" value="Load Content.html" onclick="currentPage.loadPageContent();" />
    </div>
</body>
</html>

无法通过转换更改页面

0 个答案: