關閉菜單和加載頁面

我正在使用jQuery mobile Phonegap。
我創建了一個「母版頁」index.html，用於加載#include另一個html文件。
另外我有一個滑動菜單，我想用於導航。關閉菜單和加載頁面

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Computer World</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/> 
    <!--link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" /--> 
    <link rel="stylesheet" href="css/styles.css"/> 
    <!--script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script--> 
    <!--script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script--> 
    <script type="text/javascript" src="script/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript" src="script/jquery.mobile-1.3.1.min.js"></script> 
    <script type="text/javascript"> 

    function loadPage(page){ 
     $('#content').load(page); 
    } 

    $(document).on('pageinit', function(){ 
     console.log("pageinit"); 
     loadPage('main.html'); 
    }); 

</script> 

</head> 
<body> 
<div data-role="page" id="home" data-theme="b"> 

    <div id="header" data-role="header" data-theme="b"> 
     <a id="bars-button" data-icon="bars" class="ui-btn-right" style="margin-top:10px;" href="#navpanel">Menu</a> 
    </div> 

    <div id="content" data-role="content"> 

    </div> 

    <div data-role="panel" id="navpanel" data-theme="a" data-display="push" data-position="right"> 
     <div data-role="controlgroup" data-corners="false"> 
      <a href="Main.html" data-role="button">Main</a> 
      <a href="#navpanel" onclick="loadPage('business.html')" rel="external">Business</a> 
      <a href="numbers.html" data-role="button">Numbers</a> 
      <a href="money.html" data-role="button">Money</a> 
      <a href="people.html" data-role="button">People</a> 
     </div> 
    </div> 
</div> 
</body> 
</html>

當我使用<a href="Main.html" data-role="button">Main</a>它轉到另一頁
但是當我使用<a href="#navpanel" onclick="loadPage('business.html')" rel="external">Business</a>我的下一個exeption：

Uncaught TypeError: Cannot read property 'options' of undefined 
a 
e.widget._create 
(anonymous function) 
e.Widget._createWidget 
e.widget._createWidget 
(anonymous function) 
e.(anonymous function).(anonymous function) 
(anonymous function) 
b.extend.each 
b.fn.b.each 
e.fn.(anonymous function) 
e.widget.enhance 
(anonymous function) 
e.widget.enhanceWithin 
(anonymous function) 
(anonymous function) 
b.event.dispatch 
v.handle 
b.event.trigger 
(anonymous function) 
b.extend.each 
b.fn.b.each 
b.fn.extend.trigger 
e.Widget._trigger 
e.Widget._createWidget 
e.widget._createWidget 
(anonymous function) 
e.(anonymous function).(anonymous function) 
(anonymous function) 
b.extend.each 
b.fn.b.each 
e.fn.(anonymous function) 
r 
e.mobile.changePage 
e.mobile.gradeA.e.extend.initializePage 
(anonymous function) 
c 
p.fireWith 
b.extend.ready

我試圖做的是加載外部文件的內容#content並關閉菜單。我做錯了什麼？

來源

2013-06-19 NickF

如果您只想將文件加載到同一頁面，爲什麼在這裏使用'data-rel = external'？如果你想將文件加載到內容'$（document）.on（'click'，'#id'，function（）{$（'[data-role = content]'）。load（'file。HTML'）; }）;' – Omar

但是這個Business也會拋出異常，我需要關閉菜單 – NickF

'loadpage'意味着轉到另一個頁面？或加載頁面的內容？ – Omar

這將永遠不會工作，因爲這兩個行動將互相殘殺。在一個方面，你要加載面板本身：

<a href="#navpanel"......

href不能指向自己喜歡這一點，它應該被刪除。

第二件事這個onClick事件：

onclick="loadPage('business.html')"

根本不能用這樣的。 loadPage就像經典的jQuery函數load是異步的方法。基本上改變頁面不能在頁面完全加載之前發生。這就是爲什麼這裏需要使用回調函數的原因。

更不用說使用2種不同的加載程序。在一個點上loadPage被用來通過Ajax和在另一方面rel="external"到另一個頁面加載到DOM告訴jQuery Mobile刷新一切，並打開另一個頁面。

只需使用頁面加載的正常方式：

<a href="business.html">Business</a>

或像這樣：

<div data-role="panel" id="navpanel" data-theme="a" data-display="push" data-position="right"> 
    <div data-role="controlgroup" data-corners="false"> 
     <a href="Main.html" data-role="button">Main</a> 
     <a href="business.html">Business</a> 
     <a href="numbers.html" data-role="button">Numbers</a> 
     <a href="money.html" data-role="button">Money</a> 
     <a href="people.html" data-role="button">People</a> 
    </div> 
</div>

或者還有另一種選擇。可以預取另一個HTML頁面。它可以在官方文檔HERE中找到。

如果你不喜歡這樣寫道：

<a href="business.html" data-prefetch>Business</a>

它將確保buiness.html將立即加載頁面#home處於活動狀態。

來源

2013-06-19 15:52:22 Gajotres

但是在這種情況下，我必須爲所有頁面創建相同的模板？ – NickF

你爲什麼要那樣做？只需打開頁面，發送一些參數並動態生成新內容。最終的解決方案是一樣的。如果您想了解如何在pageas之間發送數據，請查看我的博客文章：http://www.gajotres.net/document-onpageinit-vs-document-ready/查找章節：數據/參數操作頁面轉換之間 – Gajotres

非常好的例子，但我仍然不明白，如果使用多個html文件，我可以創建滑動菜單隻有一次？我需要在所有頁面上使用相同的滑動菜單。 – NickF

關閉菜單和加載頁面

回答

相關問題