用jQuery封裝UI組件

我正在構建一個涉及創建幾個獨特的UI「窗口小部件」的應用程序，並且我很難找出用jQuery封裝這些UI組件背後的邏輯的良好實踐。這些主要是一次性組件，不會在應用程序中的多個地方重複使用。用jQuery封裝UI組件

我一直在試驗lowpro plugin，雖然它確實允許我想要的更多或更少，但我覺得我會通過使用它來反對「jQuery方式」。

爲了提供一些上下文，下面是使用lowpro編寫的內容的簡短摘錄。這是一個可排序的列表，其他元素可以用藥。當它初始化爲空時，它顯示一個佔位符。

FieldList = $.klass({ 
    initialize: function() { 
    this.placeholder = $('#get-started-placeholder'); 
    if (this.items().length == 0) { 
     this.deactivateList(); 
    } else { 
     this.activateList(); 
    } 
    }, 

    items: function() { 
    return this.element.children('li:visible'); 
    }, 

    deactivateList: function() { 
    this.element.hide(); 
    this.element.sortable('destroy'); 
    this.placeholder.show(); 
    var instance = this; 
    this.placeholder.droppable({ 
     hoverClass: 'hovered', 
     drop: function(e, ui) { instance.receiveFirstField(ui.helper); } 
    }); 
    }, 

    activateList: function() { 
    this.placeholder.hide(); 
    this.placeholder.droppable('destroy'); 
    this.element.show(); 
    var instance = this; 
    this.element.sortable({ 
     placeholder: 'placeholder', 
     forcePlaceholderSize: false, 
     tolerance: 'pointer', 
     handle: 'h4', 
     opacity: 0.9, 
     zIndex: 90, 
     stop: function(e, ui) { instance.receiveField(ui.item); } 
    }); 
    }, 

    receiveFirstField: function(element) { 
    ... 
    this.activateList(); 
    }, 

    receiveField: function(element) { 
    ... 
    } 
}); 

$(function() { 
    $('ol#fields').attach(FieldList); 
}

請注意，我有一點的狀態會在這裏，而且我希望我能做出一些實例方法私人等，所以，任何jQuery的利弊，有可以告訴我，他們怎麼可以這樣做而不依賴像lowpro這樣的東西，這可能會使Javsacript變成它不應該是的東西？我有一種感覺，有一種乾淨的方式來完成這樣的模塊模式，我看到提到in this thread，但這些作品並沒有真正爲我而來。

謝謝！

來源

2010-01-10 Brent Dillingham

使用jQuery UI "widget factory"。這是所有其他UI小部件（手風琴，對話等）使用的。

有一個確定的，但有點混淆的教程here。（這是最好的一個，我發現。）

基本上，你在一個更jQuery的方式定義窗口小部件，如：

$.widget("ui.myCustomWidget", { 
    _init: function(){ 
     //initialize your function 
    }, 

    somethingElse: function(){ 
    //do something else here 
    } 
});

下劃線函數名前會使其私有。您還可以設置窗口小部件功能集成到一個對象，並訪問變量，如果這就是你想要的東西：

var foo = { 
    _init: function(){ 
    //yada yada 
    }, 
    somethingElse: function(){ 
    //do something else here 
    } 
}; 

$.widget("ui.myCustomWidget", foo);

然後你只需「創造」你的widget創建的任何其他UI插件的一樣：

$('div#myWidget').myCustomWidget();

多種選項和內置的jQuery工具，允許您構建自己的小部件。不過，我不會讓它成爲教程，而是讓你自己閱讀所有關於它們的內容。快樂的插件！

來源

2010-01-11 07:21:44 munch

用jQuery封裝UI組件

回答

相關問題