如何使用html和Jquery创建多页应用程序_Jquery_Iphone_Html_Xml_Cordova

如何使用html和Jquery创建多页应用程序

jquery iphone html xml cordova

如何使用html和Jquery创建多页应用程序,jquery,iphone,html,xml,cordova,Jquery,Iphone,Html,Xml,Cordova,我正在为iphone开发一个本机应用程序。此应用程序从XML读取内容。我有许多从XML读取内容的链接和按钮。除了“后退”按钮，一切都很好。因为，我创建了一个单页应用程序，所以后退按钮不起作用。我想把这个应用程序转换成多页。但我不确定使用jquery、XML和html的最佳方式是什么。我已经阅读了xml并将所有值放入数组中，然后处理数组我正在使用 <html> <head> <script> $(documen

我正在为iphone开发一个本机应用程序。此应用程序从XML读取内容。我有许多从XML读取内容的链接和按钮。除了“后退”按钮，一切都很好。因为，我创建了一个单页应用程序，所以后退按钮不起作用。我想把这个应用程序转换成多页。但我不确定使用jquery、XML和html的最佳方式是什么。我已经阅读了xml并将所有值放入数组中，然后处理数组

我正在使用

<html>
    <head>
        <script>
            $(document).ready(function() {
                var meetingName = [];
                var buildingName = [];
                var floorInfo = [];
                var officeContact = [];
                var roomEmail = [];
                var capacity = [];
                var phoneNotes = [];
                var pdfName = [];
                var pdfRoomName=[];
                var myHTMLOutput = '';
                var indexVal='';
                $('#menu').hide();
                var location='';

                // Open the IMRM.xml file
                $.get("xml/IMRM.xml",{},function(xml) {

                    // Build an HTML string
                    // Run the function for each Room tag in the XML file
                    $('Room',xml).each(function(i) {
                        meetingName[i] = $(this).find("meetingRoomName").text();
                        buildingName[i] = $(this).find("buildingName").text();
                        floorInfo[i] = $(this).find("floorInfo").text();
                        officeContact[i] = $(this).find("officeContact").text();
                        roomEmail[i] = $(this).find("roomEmail").text();
                        capacity[i] = $(this).find("capacity").text();
                        phoneNotes[i] = $(this).find("phoneNotes").text();
                        pdfName[i] = $(this).find("pdfName").text();
                        pdfRoomName[i] = $(this).find("pdfRoomName").text();
                    }
                );
                document.getElementById("title").innerHTML = "Muncipal Building";               

                //Capture button click and show information for each room
                $(".left").click(function() {
                    buttonClick($(this).attr("data-value"));
                });
            }
        </script>
    </head>
    <body >
        <div id="wrapper" class="imr">    
            <div data-role="page" data-theme="bu" id="imr">      
                <div data-role="header" data-theme="bk" class="ui-header" role="banner">
                    <a href="#" data-rel="back" data-add-back-btn="true"  data-back-btn-text="Back" data-theme="bk" class="header-btn-bk back-btn" id="back"></a>
                    <h1 class="font-narrow font-bold imr-header-title" id= "title"></h1>
                    <a href= "Terms_of_use.html" data-theme="bk" class="header-btn-bk info-btn"></a>
                </div>          

                <div data-role="content" data-theme="bu" class="content">  
                    <div id="information" >
                        <!-- <a class = "policy" href= "Terms_of_use.html" style="display:inline"> Terms of Use </a> -->
                    </div>            

                    <div id= "main" style="display:none">
                        <div id= "inputArea">
                            <input type="text" id ="roomInput" /> <input id= "cancel" type="button" value ="Cancel" disabled/>
                            <ul id= "auto_suggest" data-role="listview" data-insert="true"> </ul>
                        </div>
                        <div class="floor-btn">    
                            <a href= "#" data-role="button" class="left" data-ajax= "false" data-value="1"> 1 <span class="floor-btn-bgtxt"></span></a>
                            <a href= "#" data-role="button" class="right" data-ajax= "false" data-value="2"> 2 <span class="floor-btn-bgtxt"></span></a>
                            <a href= "#" data-role="button"class="left" data-ajax= "false" data-value="3"> 3 <span class="floor-btn-bgtxt"></span></a>
                            <a href= "#" data-role="button" class="right" data-ajax= "false" data-value="4"> 4 <span class="floor-btn-bgtxt"></span></a>
                            <a href= "#" data-role="button"class="left" data-ajax= "false" data-value="5"> 5 <span class="floor-btn-bgtxt"></span></a>
                            <a href= "#" data-role="button" class="right" data-ajax= "false" data-value="6"> 6 <span class="floor-btn-bgtxt"></span></a>
                            <a href= "#" data-role="button"class="left" data-ajax= "false" data-value="7"> 7 <span class="floor-btn-bgtxt"></span></a>
                            <a href= "#"  data-role="button" class="right" data-ajax= "false" data-value="8"> 8 <span class="floor-btn-bgtxt"></span></a>
                            <a href= "#" data-role="button"class="left" data-ajax= "false" data-value="9"> 9 <span class="floor-btn-bgtxt"></span></a>
                            <a href= "#" data-role="button" class="right" data-ajax= "false" data-value="10"> 10 <span class="floor-btn-bgtxt"></span></a>
                            <a href= "#" data-role="button"class="left" data-ajax= "false" data-value="11"> 11 <span class="floor-btn-bgtxt"></span></a>
                            <a href= "#" data-role="button" class="right" data-ajax= "false" data-value="12"> 12 <span class="floor-btn-bgtxt"></span></a>
                            <a href= "#" data-role="button" class="left" data-ajax= "false" data-value="B"> B <span class="floor-btn-bgtxt"></span></a>
                        </div> 
                    </div>
                </div><!-- End: content -->  
            </div><!-- End: page -->
        </div><!-- End: wrapper -->
    </body>   
</html>

在本文中，我读取xml并将每个节点保存到一个数组中。在HTML中，我有几个从1到12的按钮，自动完成文本框，这些链接可以从JS中的数组中获取点击内容。这一切都发生在一个HTML页面中，并使用一个XML页面。现在，如果我点击按钮1，它会显示一个链接列表，如果我点击，它会给出一些信息

随函附上结构图，请参见： index.html have->Button1、button2、button3等单击Button1->显示链接列表a1、a2、a3等单击a1->显示一些信息

所有这些都发生在index.html页面上，并相应地显示或隐藏内容。因为它只是一个页面，URL没有变化，所以后退按钮不起作用。我想在单击后退按钮时显示最后一个状态。例如：在最后一个信息页面上，如果我点击后退按钮，它将带我进入链接列表页面

由于那个问题，我想使用多页应用程序。但是它从XML中读取所有内容，因此我不确定在不同的html页面上读取XML的最佳方式是什么。我发现了不同的方法，比如使用cookie或使用JSON来获取值。但我不确定在iphone本机应用程序中使用它们中的任何一个是否好

请告诉我什么是使我的应用程序成为多页应用程序的最佳方式。我对jquery相当陌生

任何建议都将不胜感激

我已经用cookies处理了这个问题。我已经将所有状态保存在cookies中，并在单击后退按钮时调用所有这些状态

因此，我不需要将我的应用程序设置为多页应用程序

非常感谢你

这个问题过于宽泛，没有正确地描述您最初是如何构建它的，因此没有人能够真正建议如何以不同的方式进行构建。您所说的多页应用程序是什么意思？您希望在应用程序中添加一个或多个页面。从一个页面导航到另一个页面完全取决于您的应用程序流。请以更好的方式描述您的问题，以获得更好的回答。我已用我的代码更新了我的问题。希望这能让你更清楚一些。谢谢