Widget Factory - Part 3

簡介

這篇談 widget 有關事件觸發及事件處理的部份。首先，在 widget 進行具體化時，預設會觸發一個型態為 create 的事件，觸發的時機在執行完 _create() 之後，執行 _init() 之前。事件觸發後，widget 會先送一個事件給外部程式，然後去 this.options 物件裡找一個和事件型態名稱相同的屬性，以 create 這個事件為例，也就是屬性名為 create 的屬性，如果這個屬性的值正好是一個函式，這個函式就會被當成一個事件處理函式執行。如果找不到對應名稱的屬性，或對應名稱屬性的值不是函式，widget 就當這事件沒有必要處理，繼續往下執行。不只是預設觸發的 create 事件會這麼做，而是所有在 widget 內部觸發的事件，都會走完上述的這一趟程序。

當 widget 觸發一個事件，而將事件送到 widget 外部時，widget 會在訂定的事件型態名稱前面加上 widget 的名稱字串，然後將字串的字母都變成小寫。事件型態的名稱的字串中可以包含文、數字還有符號 "_" 及 "-"。例如： widget 的名稱為 "item"，事件型態為 "create"；此時，外部程式要監聽的事件名稱應為 "itemcreate"。

在 Widget Factory 中有三個跟觸發事件和處理事件相關的內建內部函式，這三個內部函式僅供呼叫使用，無需實作：

_trigger(type [, event ] [, data ])

觸發一個事件。

type: 事件的型態名稱，賦予值為字串，字串中可以包含文、數字及 "_" 和 "-" 兩個符號。在這裡也可以用大寫字母，只是轉成事件型態名時，大寫字母都會被轉成小寫字母；為了避免麻煩，最好一律用小寫字母，反正還有兩個符號可以用來分隔字詞，還是看得清，讀得懂的。要記得在外部監聽 widget 的事件時，事件型態名稱前面還會加上 widget 的名稱，widget 的名稱中如果有大寫字母，也會被轉換成小寫字母。用中文取事件型態名稱也行，還真的可以成功運作，我有試過，感謝 UTF-8。
event: 這是一個選項參數。如果是因為另一個事件的觸發才導致這個事件的觸發，可以將原事件的 event 參數，在此轉發出去給這個事件的處理函式，如果這是原始的觸發事件，就可以不給，但最好給個 null 值。
data: 也是一個選項參數。賦予值是個 Javascript 的物件，可以透過這個物件傳送一些資料給事件處理函式。如果要給這個參數，前一個 event 參數就一定要給，至少要給 null 值。

_on([suppressDisabledCheck ] [, element ], handlers)

用來綁定事件和事件處理函式，綁定的事件可以由 widget 自行觸發，或是外部觸發。

suppressDisabledCheck: 此為選項參數，賦予值為布林值，預設為 false。設定為 true 時，會先行檢查 element 是否處於 disabled 的狀態，如果不是，則執行事件處理函式，如果是，則不執行事件處理函式。
element: 此為選項參數，賦予值為一個 jQuery 物件。不給時，預設為 this.element。給予時則指定派送事件給該物件。
handler: 此為必要參數，參數一定得給；但使用的格式有點奇特。如果觸發事件的元件是 widget 的本身，則直接將事件型態名稱做為屬性名，屬性值為事件處理函式。倘若觸發事件的只是 widget 中的子元件，則屬性名的位置要放入一個字串，字串中以第一個空白字元做區分，第一個空白字元前為事件的型態名稱，第一個空白字元之後則全部都屬於 selector 的部份，語法和 CSS3 的選取器 (selector) 一樣，用來指定觸發事件的視覺元件，但選取的範圍侷限於 widget 的子輩元件。屬性值的部份依然是事件處理函式，這個要看範例程式會更清楚。

_off(element, eventName)

解除監聽事件。

element: 為必要參數，指定要解除監聽的物件。賦予值為一個 jQuery 物件。
eventName: 為必要參數，指定要解除監聽的事件型態。賦予值為一字串，字串中可包含多個事件型態的名稱，以空白字元分隔。

範例

範例中的視覺元件是兩個同心圓，點按內部的圓形，會改變內部圓形的顏色，點按外部的圓形，則不做任何反應。同心圓下有個按鈕，按下按鈕後，會解除內部圓形對 click 事件的監聽，之後再點按內部的圓形時，就不會有任何反應了。
記得開啟「開發者工具」中的「主控台」去查看輸出，可以對事件的處理時機有進一步的瞭解。

CSS

<style>
html {
  width:100%;
  height:auto;
}
body {
  margin:0 auto;
  width:1200px;
  padding-top:20px;
}
#item {
  width:200px;
  height:200px;
  border-radius: 50%;
  background-color:skyblue;
    text-align: center;
}
#itemCore {
    position: relative;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:100px;
    height:100px;
    border-radius: 50%;
    background-color:lightgreen;  
}
</style>

CSS 中 #item{} 用來設定同心圓外部圓形的外觀， #itemCore{} 用來設定同心圓內部圓形的外觀，並讓內部圓形置於外部圓形的正中央。

HTML

<body>
    
    
    
</body>

HTML 中建立兩個 <div> 在流覧器中用圓形表示，還有一個按鈕。

Script

<script>
// widget created by widget factory
(function($, undefined) {
    $.widget( "prod.item", {
        version:"1.0.0",  
        options:{
            product:"Coffee",
            price:80,
            create:$.noop,  // default to no operation
            optionchanged:function(){
                console.log("\thandle optionchanged event in this.options");
            }
        },
        _create:function(){
            console.log("_create start");
            this._on({"click #itemCore":function(evt){
                console.log("\thandle a click event trigger by #itemCore");
                var elem = $("#itemCore")
                if(elem.hasClass("coral")){
                    elem.css("background-color", "lightgreen").removeClass("coral");
                } else {
                    elem.css("background-color", "coral").addClass("coral");
                }
            }});
            this._super();
            console.log("_create end");
        },
        _init:function(){
            console.log("_init start");
            this._super();
            console.log("_init end");
        },
        _setOption:function(key, value){
            this._super(key, value);
            console.log("_setOption");
            this._trigger("optionchanged", null, {key:key, value:value});
        },
        _setOptions:function(opts){
            this._super(opts);
        },
        _destroy:function(){
            this._super();
        },
        removeHandler:function(ent){
            this._off(this.element, "click");
        }
    });
})(jQuery);

  
$(function(){
    var elem = $("#item");
    // here use "item" + "create" as event type
    elem.bind("itemcreate", function(evt){
        console.log("\thandle create event outside of widget");
    });

    // use "item" + "optionchanged" as event type 
    elem.bind("itemoptionchanged", function(evt, data){
        console.log("\thandle optionchanged event outside of widget");
        console.log("\t%o", evt);
        console.log("\t%o", data);
    });

    $("#off").button().click(function(){
        $("#item").item("removeHandler");
    })
    // override create attribute in this.options
    elem.item({
        create:function(){
            console.log("\thandle create event in this.options");
        }
    });

    // trigger an "optionchanged"/"itemoptionchange" event
    elem.item("option", "price", 2.99);
});
</script>

第 6 行，指定 widget 的版本號碼，以便將來維護。
第 9 行，先定一個 create 屬性，預設值為 $.noop ，就是 no operation，不做任何事的意思。由 widget 在具體化時，由參數傳入來改寫參數值。
第 11~12 行，定義 optionchanged 事件的處理函式。
第 16~24 行，綁定由 #itemCore 所觸發的 click 事件，及事件的處理函式，注意第 16 行中，參數的寫法。
第 36 行，在呼叫 _setOption() 時觸發一個事件型態為 optionschanged 的事件，並變更後的屬性名及屬性值以 Javascript 物件的方式，當成參數傳出去。
第 44~47 行，定義一個名為 removeHandler 的外部函式，在函式中呼叫 this._off() 解除對 #itemCore 元件所觸發之 click 事件的監聽。
第 54~56 行，在 widget 外部綁定監聽 itemcreate 事件及其處理函式。
第 59~63 行，在 widget 外部綁定綁定監聽 itemoptionchanged 事件及其處理函式。
第 65~67 行，定義一個 jquery-ui 的按鈕，在觸發 click 事件時，於事件處理函式中呼叫 widget 中的 removeHandler 外部公用函式。,br> 第 69-73 行，具體化名為 item 的 widget，同時傳入一物件做為參數，物件中是對 create 事件的事件處理函式。
第 76 行，呼叫 widget 的 option 函式以觸發一個 optionchanged 的事件。

熊伯的外接硬碟

2016年4月28日星期四

jQuery Widget Factory - part 3

Widget Factory - Part 3

簡介

範例

CSS

HTML

Script

沒有留言:

張貼留言

2016年4月28日 星期四

jQuery Widget Factory - part 3

CSS

HTML

Script

沒有留言:

張貼留言

2016年4月28日星期四