用 jQuery Address 實現「深連結」

jQuery Address 提供所謂「深連結」(Deep linking) 的功能, 簡單講就是以 # 實現不換頁而標示 (或顯示) 網頁的部份內容。
套現在流行的「微」文化, 應該也可以稱為「微連結」吧 XD。

AS 開發者會覺得這東西很像 SWFAddress, 沒錯兩者目的是一樣的, 而且是同一家公司開發的優質兄弟產品。

jQuery Address 是顧名是 jQuery 的外掛, 使用起來相當方便。
官網: http://www.asual.com/jquery/address/
官方最能說明其功能的範例: http://www.asual.com/jquery/address/samples/api/


<<筆記>>:
◎ 設定初始化功能

$.address.init(function(event) {
    // 初始化時欲執行的程式
});

◎ URL 改變時觸發

$.address.bind('change', function(event) {
    // URL 改變時欲執行的程式
});

◎ 連結的設定方式
● 用 a 標籤的 rel 屬性設定, 以「address:/」開頭

<a href="隋便你要放什麼" rel="address:/">Home</a>

● 深連結的格式。以下 /myPath/ 為路徑, ? 後的 URL-encoded 格式的參數, nofollow 跟連結格式無關, 可以讓瀏覽器不要前往 href 標示的連結

<a href="隋便你要放什麼" rel="address:/myPath/?id=1&name=n1&name=n2 nofollow">myPath</a>

● 呼叫 $.address.value() 改變 URL

<a href="隋便你要放什麼" onclick="$.address.value('/section/2'); return false;">Section 2</a>

● 使用 $.address() 設定 URL

<script type="text/javascript">
    $(function () {
        $('.section-2-1').address(function() {
            return $(this).attr('href');
        });
    });
</script>
<a href="/section/2/1" class="section-2-1">Section 2.1</a>

● 直接設定在 a 標籤的 href 屬性

<a href="#/section/?id=2.2" class="section-2-2">Section 2.2</a>

◎ 在 init 或 change 事件處理器裡 event 物件可以拿到的屬性值
◎ 以「#/section/2/1?id=1&name=n1&name=n2」為例:
● value: "/section/2/1?id=1&name=n1&name=n2"
● queryString: "id=1&name=n1&name=n2"
● path: "/section/2/1"
● pathNames: ["section","2","1"]
● parameters: {id:"1", name:["n1","n2"]}

◎ 可以用對應的方法取值:
● $.address.value() : value
● $.address.queryString() : queryString
● $.address.path() : path
● $.address.pathNames() : pathNames
● $.address.parameterNames() : 無對應 event 的屬性