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

2016-08-15 / JSN / 0 Comments / 1,060 次瀏覽

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

一般安裝

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

<script src="src/jquery.vpage.min.js"></script>

 

透過 Bower 安裝

  1. 在你的專案目錄底下建立 bower.json 
    {
    "name": "你的專案名稱",
    "version": "你的版本編號",
    "dependencies": {
        "vpage.js" : "*"
    }
}
  2. 接著打上 bower install 執行安裝

 

範例

$(selector).vpage({
    name: 'my_button', // 該模型的唯一名稱
    event: 'click', // 綁定的事件，參考 jQuery 的 .on() 方法
    url_get_onload_key: 'call_vpage_name', // 提供網址一個觸發 vpage 的 GET 參數鍵如 ?call_vpage_name=my_button
    prepare: function (param){
        // 事件觸發前的動作
    },
    do: function (param){
        // 事件觸發
    },
    onload: function (){
        // 畫面進入後要觸發的事件
        // 例如偵測到網址 ?call_vpage_name=my_button 會觸發
    },
    onpop: function (){
        // 上下頁切換觸發的事件
    }
})

 

詳細範例

 

方法

$.vpage.get_url_param(key)

取得網址的 GET 參數

參數 型態 說明
key string GET的鍵

 

// http://domain.com?onload=hello_world&type=news
$.vpage.get_url_param("onload"); // hello_world
$.vpage.get_url_param("type"); // news

 

$.vpage.listen()

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

 

$.vpage.trigger(name, type);

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

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

 

$.vpage.trigger("my_button", "onload"); // 觸發 vpage = my_button 的 onload 方法

 

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

設定參數

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

 

$.vpage.set("my_button", "url", "?onload=my_button&type=news");

 

$.vpage.get(name, key)

取得參數

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

 

$(".item").vpage({
    name: 'my_button',
    prepare: function (param){
        $.vpage.set("my_button", "url", "?call_vpage_name=my_button^type=news");
    },
    do: function (){
        var url = $.vpage.get("my_button", "url"); // ?call_vpage_name=my_button^type=news
    }
    ......
})

 

$.vpage.default()

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

$(".item").vpage({
    ......
    name: "frame",
    ......
})

$(".box").vpage({
    ......
    name: "box",
    url_get_onload_key: "vp",
    ......
})

// www.domain.com?onload=frame  =>  不會觸發
// www.domain.com?vp=box        =>  不會觸發
// www.domain.com?id=77         =>  觸發
// www.domain.com               =>  觸發
$.vpage.default = function (){
    // 初始畫面的樣式
}

 

$(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 參數，那麼選擇氣的位置保持空白即可

$().vpage({
    //...
    parent: ".header",
    child: ".item",
    event: "click",
    //...
});

事件上的綁定也就等同於

$(".header").on("click", ".item", function (){})

 

動態替換網址的建議方法

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

$(".item").vpage({
    ......
    prepare: function (param){
        $.vpage.set("my_button", "url", "?onload=my_button&type=news");
    },
    ......
})

也可以使用標籤的寫法

<a href="?onload=my_button&type=news" class="item news">最新消息</a>

 

更多範例

 

 

 

發表迴響