1. 程式人生 > >jquery mobile href超連結 單擊顯示error loading page

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

在a標籤裡新增

data-ajax="false"


rel="external"

屬性

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

詳解:

外部頁面連結


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


預設景象下,當你點選一個連結時會指向一個外部頁面(如.products.html), 然則框架會解析該連結的 href屬性然後發出一個ajax懇求(Hijax)並顯示正在載入的提示.


若是ajax懇求成功,新頁面內容會新增到DOM傍邊,所有mobile widget都是主動初始化的,然後新頁面會動畫過渡顯示出來.


若是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發出的懇求能解析正確的頁面.