UI bileşenlerini jQuery ile kapsülleme

Question

Birkaç benzersiz UI "widget" yaratmayı içeren bir uygulama yapıyorum ve bu UI bileşenlerinin arkasındaki mantığı jQuery ile kapsüllemek için iyi bir uygulama bulmakta zorlanıyorum. Bunlar, uygulamada çeşitli yerlerde tekrar kullanılmayan, adete tekabul eden bileşenler olan 'dır.

lowpro plugin ile denemeler yapıyorum ve istediğim kadar ya da daha az izin verirken, onu kullanarak "jQuery yolu" na karşı gidiyorum gibi hissediyorum.

Bazı bağlamları sağlamak için, burada lowpro kullanarak yazdığım bir şeyin kısaltılmış özü. Diğer elementlerin ilaç haline gelebileceği sıralanabilir bir liste. Boşaldığında, bir yer tutucu gösterir.

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); 
} 

Ben devletin biraz burada olacak Bildirim ve ben yapmak istediğim bazı örnek yöntemler özel, vb Yani, bana söyleyebilir orada herhangi jQuery lehte bu yapardım nasıl Javascript'i belki de olmaması gereken bir şeye dönüştüren lowpro gibi bir şeye güvenmeksizin? in this thread'u gördüğüm Modül Kalıbı ile böyle bir şeyi başarmanın temiz bir yolunun olduğunu hissediyorum, ancak parçalar benim için gerçekten bir araya gelmiyor.

Teşekkürler!

Answer 1

jQuery UI "widget factory"'u kullanın. Diğer tüm UI widget'ları (Akordeon, Diyalog, vb.) Kullanımı budur.

Tamam, ama biraz kafa karıştırıcı öğretici var here. (Bu bulduğum en iyi biri.)

Temel olarak, gibi, çok daha jQuery şekilde Widget'ınızı tanımlayın: işlev adı, özel yapacak önce

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

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

bir vurgulamaktadır.

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

:

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

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

Sonra sadece widget başka UI widget oluşturmak aynı şekilde "yaratmak": eğer istediğin buysa Ayrıca, bir nesnenin içine Widget fonksiyonlarını ayarlamak ve değişken erişebilir

Tonlarca seçenek ve kendi widget'larınızı oluşturmanıza izin veren jQuery araçlarında bulunur. Bunu bir öğretici yapmaktan ziyade, kendiniz hakkında her şeyi okumanıza izin vereceğim. Mutlu aletler!