如何從jquery-ui對話框派生自定義小部件

Question

我想構建一個jquery-ui小部件，但我不確定如何處理這個問題。

小部件將管理jQueryUI對話框中託管的一些數據的狀態。

我應該建立一個自定義小部件，在小部件創建函數中爲小部件目標添加一些元素，然後調用我的小部件目標上的對話框小部件。

或者

有沒有辦法從jQuery UI的對話框繼承，只是重寫它的內容的一部分？

Answer 1

有延長其他部件的方式：

$.widget("ui.customwidget", $.ui.dialog, { 
    options: { 
     // your options 
    }, 

    _create: function() { 
     $.ui.dialog.prototype._create.apply(this); 
     // constructor 
    }, 

    destroy: function() { 
     // destructor 
     $.ui.dialog.prototype.destroy.apply(this); 
    }, 

    _setOption: function(key, value) { 
     $.ui.dialog.prototype._setOption.apply(this, arguments); 
     // process the setting of options 
    } 
    // other methods 
}); 

但是我不鼓勵使用它在一個對話框，滑塊等，因爲如buttonset依賴於按鈕小部件的存在，並且將（並且可以）不識別該元素是否是擴展按鈕的小部件的實例。因此它只是創建新的純按鈕小部件，導致佈局和DOM混亂。覆蓋小部件也很關鍵：小部件的擴展機制在很久以前就被引入，當時一些小部件已經存在。他們的開發人員並沒有考慮到這一點，所以可能仍然存在問題。 我彙總我的小部件（您的第一個選項）：只需擴展$.Widget並將該元素設置爲對話框即可。然後爲需要在對話框和您的自定義小部件之間同步的屬性添加事件偵聽器。

$.widget("ui.customwidget", $.Widget, { 
    // ... 
    _create: function() { 
     $.Widget.prototype._create.apply(this); 
     this.element.dialog(); 
    } 
    // ... 
}); 

這種方式比擴展其他小部件（除了你構建父項並知道你在做什麼）更健壯，但它也有缺點。例如。你是否也接受設置聚合小部件的選項，或只是部分？或者你沒有做這些，強制用戶調用對話框來處理你的自定義小部件中沒有處理的所有內容？我更喜歡第二種選擇：至少是誠實的，因爲你的小部件並不承諾它不能容納的東西，但它也很難看，因爲你可能曾經稱過一個，然後是另一個部件。

我對我的解決方案仍然不滿意，但是擴展小部件讓我面對一大堆新問題，他們的解決方案可能是修補jQuery UI源代碼或寫一個醜陋的黑客。

（我剛剛注意到這個問題是一歲左右，提問者可能不再有這個問題了，但我已經寫了所有以上的東西，認爲沒有那麼壞，不會發布）