您的位置: 首页  >  技术问答  >  如何使用html和Jquery创建多页面应用程序

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

分类: 技术问答 • 2022-08-16 17:24:28
问题描述：

我正在研究iphone的本机应用程序。此应用程序从XML读取内容。我有很多链接和从XML读取内容的按钮。 除了后退按钮，一切都很好。因为我创建了单页面应用程序，所以后退按钮不起作用。我以为将这个应用程序转换成多页。但我不确定使用jQuery，XML和html这样做的最佳方法是什么。我已经阅读了XML，并把所有的值在数组中，并处理数组。如何使用html和Jquery创建多页面应用程序

我使用

<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和保存每个节点阵列读取XML。在HTML中，我有几个按钮（命名从1到12），自动完成文本框，从JS中的这些数组获取点击内容的链接。这一切都发生在一个HTML页面中，并使用一个XML页面。现在，如果我点击按钮1，并显示链接列表和链接，如果我点击它给出一些信息。

封闭式请参阅结构：
index.html的（有） - >出Button1，Button2 BUTTON3等（点击按钮1） - >显示链接A1的列表，A2，A3等（点击a1） - >显示一些信息。

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

由于这个问题，我以为使用多个页面应用程序。但是它正在读取来自XML的所有内容，因此我不确定在不同的html页面上读取XML的最佳方式是什么。我发现像使用Cookie或使用JSON来获取值的不同方式。但我不确定在iphone本地应用程序中使用它们中的任何一个是否合适。

请给我建议什么是使我的应用程序作为多页面应用程序的最佳方式。我对jQuery相当陌生。

任何建议将不胜感激！

+0

这个问题过于宽泛，并没有正确描述你是如何建立它的，因此没有人能真正建议如何以不同的方式做它。 –

+0

多页面应用程序是什么意思？它的所有希望在应用程序中添加一个或多个页面。并且从一个页面导航到另一个页面取决于您的应用程序流程。请用更好的方式描述你的问题/问题以获得更好的回应。 – Rahul

+0

我用我的代码更新了我的问题。希望这会更清晰。谢谢！！ – NewGirlInCalgary

答

我已通过使用Cookie处理该问题。 我已经将所有状态保存在Cookie中，并且在返回按钮单击时调用所有这些状态。

因此，我不需要将我的应用程序作为多个页面应用程序。

尽管多谢！

相关推荐