jQuery – vpage.js 快速切換網址與對應事件

  • vpage 是一個 jQuery 的 plugin 掛件
  • 透過簡單的寫法,設計出與網址對應的動態事件
  • 能讓瀏覽器的上下頁切換 (window.onpopstate)、重新整理頁面後 (偽 history.state) 觸發指定的事件或動畫
  • vpage 不包含 AJAX 處理
  • 可應用在分享網址時,自動打開分享時的動畫階段,不必讓使用者重新操作

一般安裝

前往 GitHub,將壓縮檔下載後放到指定目錄

 

透過 Bower 安裝

  1. 在你的專案目錄底下建立 bower.json
  2. 接著打上 bower install 執行安裝

 

範例

 

詳細範例

 

方法

$.vpage.get_url_param(key)

取得網址的 GET 參數

參數 型態 說明
key string GET的鍵

 

 

$.vpage.listen()

須要放置在所有的 vpage 最後。用來監聽 vpage 設定的頁面讀取事件(onload)與上下頁切換事件 (onpop)。

 

$.vpage.trigger(name, type);

提供手動觸發 vpage 的 onload() 與 onpop()

參數 型態 說明
name string vpage 的名稱
type string onload | onpop

 

 

$.vpage.set(name, key, val)

設定參數

參數 型態 說明
name string vpage 的名稱
key string 參數鍵
val string 參數值

 

 

$.vpage.get(name, key)

取得參數

參數 型態 說明
name string (選)vpage 的名稱,不指定返回全部
key string (選)參數的鍵,不指定返回全部

 

 

$.vpage.default()

當網址不存在任何已定義的 vpage 時,將會觸發該方法。例如多款 vpage 混合使用,我們會希望定義一個最原始的畫面。

 

$(selector).vpage(param);

針對元素綁定事件

參數 型態 說明
param.name string 為該模型命名
param.event string 在元素綁定 on 的事件
param.do(param) function 觸發時的動作
param.onload function 畫面進入時所觸發的事件
param.onpop function 切換上下頁面所觸發的事件
param.parent string (選)on 的父元素, param.parent 與 param.child 同時使用,等於取代選擇器使用
param.child string (選)on 的子元素, param.parent 與 param.child 同時使用,等於取代選擇器使用
param.state object (選)history.pushState 物件
param.prepare(param) function (選)觸發事件前的準備動作
param.title string (選)變更的網頁標題
param.url_get_onload_key string (選)提供 onload 辨識的鍵,預設 onload

 

使用 parent 與 child 的情況

如果使用 parent 與 child 參數,那麼選擇氣的位置保持空白即可

事件上的綁定也就等同於

 

動態替換網址的建議方法

請不要直接使用 JavaScript 原生的 history.pushState() 切換網址,應該配合 $.vpage.set() 的方式指定才能有效操作。

也可以使用標籤的寫法

 

更多範例

 

 

 

發表迴響