在a標簽里添加
data-ajax="false"
或rel="external"
屬性
例:<a data-ajax="false" href="http://www.***.com/help/***.zip">點擊下載</a>
詳解:
JQuery Mobile 主動化了創(chuàng)建ajax站點和法度的過程.
默認景象下,當你點擊一個鏈接時會指向一個外部頁面(如.products.html), 然則框架會解析該鏈接的 href屬性然后發(fā)出一個ajax懇求(Hijax)并顯示正在加載的提示.
若是ajax懇求成功,新頁面內(nèi)容會添加到DOM傍邊,所有mobile widget都是主動初始化的,然后新頁面會動畫過渡顯示出來.
若是ajax懇求失敗,框架會顯示一個小小的錯誤消息提示(""e""調(diào)板的樣式),并會在一小段時候內(nèi)消散, 并且不會破損當前的導航流(譯注:即頁面不會刷新也不會對進步撤退猬縮按鈕有影響)
單個HTML文檔可以包含多個""page"",只須要在一個頁面包含 多個data-role="page"
的div即可,每個pagediv必須由一個獨一的ID (id="foo"
) ,而鏈接到響應頁面應用錨記即可(href="#foo"
).當點擊一個鏈接時, 框架會尋找id為錨記href的內(nèi)部""page""并顯示到當前界面中.
要重視若是你正在經(jīng)由過程ajax從一個mobile頁面鏈接到一個含有多個內(nèi)部頁面的頁面,你須要為該鏈接添加一個 rel="external"
或者 data-ajax="false"
. 該屬性告訴框架對頁面進行從頭加載 ,url hash也將清零.這點十分關鍵,因為ajax 頁面應用 hash(#)來追蹤ajax汗青,當含有多個內(nèi)部page的頁面應用hash 來指導內(nèi)部page時會產(chǎn)生沖突.
舉例來說,一個指向含有多個內(nèi)部page的頁面的鏈接會像如許:
<a href="multipage.html" rel="external">Multi-page link</a>
這兒有個2 ""page""頁面的例子,由兩個jQuery Mobile div構建,每個div由其ID來導航,要重視 這些page上的ID只須要支撐內(nèi)部的頁面鏈接,若是每個頁面是分別的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"" 追蹤汗青記錄,現(xiàn)今朝來說, 在一個jQuery Mobile page里還不成能把鏈接作為通俗的錨記(index.html#foo
), 因為框架會尋找一個 ID
為#foo
""page"" 來跳轉(zhuǎn),而不是像通俗HTML頁面那樣遷移轉(zhuǎn)變含有該ID的內(nèi)容.
若是你對一個a標簽應用 data-rel="back"
屬性,任安在上方的點擊都邑模仿撤退猬縮按鈕,而忽視它的href屬性. 這點在鏈接回一個已定名的頁面十分有效,比如當有一個到""home""鏈接或者當用javascript生成一個撤退猬縮按鈕時, 或者一個按鈕用來封閉一個對話框.當在你的源代碼應用這個特點的時辰,必然要供給一個有意義的href實際指出引用頁面的URL (這會使得該特點也能在C級瀏覽器中也能起感化). 同樣,請記住若是你只是純真應用一個撤退猬縮過渡而不在汗青記錄中真正撤退猬縮,你可以應用 data-direction="reverse"
來調(diào)換.
當鏈接至一個目次地址時(比如用 href="typesofcats/"來調(diào)換 href="typesofcats/index.html"), 你必須供給一個后置 斜杠.這是因為jQuery Mobile假定在url中最后一個"/" 后面的項目組是一個文件名,jQuery Mobile會移除該項目組,以便 在將來有頁面被引用時創(chuàng)建基地址.
然而,你可以經(jīng)由過程返回已經(jīng)指定了data-url
屬性的page div來解決該題目. jQuery Mobile會應用該屬性的值來更新URL來調(diào)換疇昔懇求的那個頁面. 這也容許你返回url的更改來作為重定向的成果,舉例來說,你可以提交一個表單到"/login.html",然則成功提交后返回一個 url "/account". 該對象容許你在一些程度上把握jQuery Mobile 的汗青記錄棧,以下是一些例子:
這個鏈接指向"docs-links-urltest/index.html",該鏈接是一個目次里的索引頁 : Test Link 返回的頁面會用"docs/pages/docs-links-urltest/"(包含后置斜杠)來更新hash,這是經(jīng)由過程那個頁面的data-url的值來完成的. 謹記這個值會調(diào)換全部hash,是否調(diào)換取決于你本身,當刷新或者深切鏈接時URL發(fā)出的懇求能解析正確的頁面.