《jQuery、jQuery UI及jQuery Mobile技巧與示例》——9.10 技巧：生成回退按鈕

本節書摘來自異步社群《jquery、jquery ui及jquery mobile技巧與示例》一書中的第9章，第9.10節，作者：【荷】adriaan de jonge , 【美】phil dutson著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

當使用者在頁面間浏覽時，有時候他會想傳回到之前的頁面。很明顯web浏覽器為此提供了标準的回退按鈕。

是以，有很好的理由在你的web應用程式中也提供回退按鈕。一個理由是當你的web應用程式在全屏運作時，浏覽器的回退按鈕可能無法使用。更重要的是，jquery mobile應用程式模拟了原生應用程式的外觀。在原生的應用程式中，回退按鈕被放置在螢幕的左上角。

代碼清單9-11示範了jquery mobile是如何使“在需要時添加回退按鈕”變得非常簡單的。

代碼清單9-11　導航至第二張頁面時帶上可用的回退按鈕

當打開這個代碼示例時，你首先發現的是沒有回退按鈕。這是講得通的，因為你仍然在第一張頁面上，還沒有要回退的曆史記錄呢。這也是可以了解的，因為在第一張頁面上沒有定義data-add-back-button="true"屬性。你可以試着在第一張頁面添加這個屬性，看看會發生什麼。

當你浏覽至第二張頁面時，在左上角會出現一個回退按鈕。可是第31～33行并沒有包含對按鈕的引用。

你也可以在錨标記上使用data-rel="back"屬性，這會把頁面回退至（曆史記錄中的）一張頁面。當這麼做的時候，請確定在href屬性中提供了正确的連結，這樣較老的浏覽器和裝置仍然能夠去到你想它們去的頁面。