jquery mobile href超連接單擊顯示error loading page

時間 2019-11-18

標籤 jquery mobile href 連接單擊顯示 error loading page 欄目 JQuery 简体版

原文原文鏈接

在a標籤裏添加
javascript

data-ajax="false"html

或
java

rel="external"ajax

屬性瀏覽器

例：<a data-ajax="false" href="http://www.***.com/help/***.zip">點擊下載</a>
框架

詳解：
動畫

外部頁面連接

JQuery Mobile 主動化了建立ajax站點和法度的過程.url

默認景象下，當你點擊一個連接時會指向一個外部頁面（如.products.html），然則框架會解析該連接的 href屬性而後發出一個ajax懇求（Hijax）並顯示正在加載的提示.spa

如果ajax懇求成功，新頁面內容會添加到DOM傍邊，全部mobile widget都是主動初始化的，而後新頁面會動畫過渡顯示出來..net

如果ajax懇求失敗，框架會顯示一個小小的錯誤消息提示（""e""調板的樣式），並會在一小段時候內消散，而且不會破損當前的導航流（譯註:即頁面不會刷新也不會對進步撤退蝟縮按鈕有影響）

內部頁面連接

單個HTML文檔能夠包含多個""page""，只需要在一個頁面包含多個data-role="page"的div便可，每一個pagediv必須由一個獨一的ID （id="foo"），而連接到響應頁面應用錨記便可（href="＃foo"）.當點擊一個連接時，框架會尋找id爲錨記href的內部""page""並顯示到當前界面中.

要重視如果你正在經由過程ajax從一個mobile頁面連接到一個含有多個內部頁面的頁面，你需要爲該連接添加一個 rel="external" 或者 data-ajax="false" . 該屬性告訴框架對頁面進行從頭加載，url hash也將清零.這點十分關鍵，由於ajax 頁面應用 hash（＃）來追蹤ajax汗青，當含有多個內部page的頁面應用hash 來指導內部page時會產生衝突.

舉例來講，一個指向含有多個內部page的頁面的連接會像如許:

<a href="multipage.html" rel="external">Multi-page link</a>

這兒有個2 ""page""頁面的例子，由兩個jQuery Mobile div構建，每一個div由其ID來導航，要重視這些page上的ID只需要支撐內部的頁面連接，如果每一個頁面是分別的HTML文檔，這些ID則是可選的. 如下是兩個page，在body 元素裏面.

 <body> <!-- Start of first page --> <div data-role="page" id="foo"> <div data-role="header"> <h1>Foo</h1> </div><!-- /header --> <div data-role="content"> <p>I""m first in the source order so I""m shown as the page.</p> <p>View internal page called <a href="＃bar">bar</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /header --> </div><!-- /page --> <!-- Start of second page --> <div data-role="page" id="bar"> <div data-role="header"> <h1>Bar</h1> </div><!-- /header --> <div data-role="content"> <p>I""m first in the source order so I""m shown as the page.</p> <p><a href="＃foo">Back to foo</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /header --> </div><!-- /page --> </body>

查看多page模板

請重視: 由於咱們應用了hash來爲全部ajax ""page"" 追蹤汗青記錄，現今朝來講，在一個jQuery Mobile page裏還不成能把連接做爲通俗的錨記（index.html＃foo），由於框架會尋找一個 ID 爲＃foo ""page"" 來跳轉，而不是像通俗HTML頁面那樣遷移轉變含有該ID的內容.

撤退蝟縮連接

如果你對一個a標籤應用 data-rel="back" 屬性，任安在上方的點擊都邑模仿撤退蝟縮按鈕，而忽視它的href 屬性. 這點在連接回一個已定名的頁面十分有效，好比當有一個到""home""連接或者當用javascript生成一個撤退蝟縮按鈕時，或者一個按鈕用來封閉一個對話框.當在你的源代碼應用這個特色的時辰，必然要供給一個有意義的href實際指出引用頁面的URL （這會使得該特色也能在C級瀏覽器中也能起感化）. 一樣，請記住如果你只是純真應用一個撤退蝟縮過渡而不在汗青記錄中真正撤退蝟縮，你能夠應用 data-direction="reverse"來調換.

重定向和連接到目次

當連接至一個目次地址時（好比用 href="typesofcats/"來調換 href="typesofcats/index.html"），你必須供給一個後置斜槓.這是由於jQuery Mobile假定在url中最後一個"/" 後面的項目組是一個文件名，jQuery Mobile會移除該項目組，以便在未來有頁面被引用時建立基地址.

然而，你能夠經由過程返回已經指定了data-url屬性的page div來解決該題目. jQuery Mobile會應用該屬性的值來更新URL來調換疇昔懇求的那個頁面. 這也允許你返回url的更改來做爲重定向的成果，舉例來講，你能夠提交一個表單到"/login.html"，然則成功提交後返回一個 url "/account". 該對象允許你在一些程度上把握jQuery Mobile 的汗青記錄棧，如下是一些例子:

這個連接指向"docs-links-urltest/index.html"，該連接是一個目次裏的索引頁 : Test Link 返回的頁面會用"docs/pages/docs-links-urltest/"（包含後置斜槓）來更新hash，這是經由過程那個頁面的 data-url的值來完成的. 謹記這個值會調換所有hash，是否調換取決於你自己，當刷新或者深切連接時URL發出的懇求能解析正確的頁面.

http://blog.csdn.net/xpsharp/article/details/7267596