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





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章