Question

我正在尝试使用jQuery小部件工厂来创建插件。我正在创建一个简单的treeview插件，我想实现ui.sortable小部件，为此我做了类似的事情：

(function ($) {
    $.widget("cms.treeview", $.ui.sortable, {
        // Default options.
        options: {
            useSorting: false
        },

        // Default constructor.
        _create: function(){
            // creating treeview code goes here

            // if useSorting is set to true set sorting
            if (this.options.useSorting){
                // HOW WOULD I CALL THE SORTING HERE
            }
        U
    });
})(jQuery)

现在我将ui.sortable添加到$ .widget（“cms.treeview”，$ .ui.sortable，{}）;声明我从可排序的小部件中获取所有选项，但我如何在我的代码中调用它并确保拥有我需要的所有内容？

/马丁

Answer 1

作为一般原则，让小工具彼此了解并不好听。通常，这就是“作为功能的选项”的用途。例如，在这里您可以看到两个小部件通信： http://msdn.microsoft.com/en-us/library/hh404085.aspx

因此，在您的示例中，您要做的是设置一个名为'makeMeSortable'的选项，例如：

// Default options.
options: {
useSorting: false,
makeMeSortable:$.noop
}

然后你会做类似的事情：

if (this.options.useSorting){
// HOW WOULD I CALL THE SORTING HERE
this._trigger('makeMeSortable', null, { elementToBeSortable: this.yourElementToSort})
}

最后，在创建窗口小部件的实例时，您将为makeMeSortable选项分配一个函数。该函数将接收要排序的元素并调用ui.sortable小部件。

Answer 2

(function ($) {
$.widget("cms.treeview", $.ui.sortable, {
    // Default options.
    options: {
        useSorting: false,
        makeMeSortable:$.noop
    },

    elementToMakeSortable:null,
    // Default constructor.
    _create: function(){
        // creating treeview code goes here
        this.elementToMakeSortable = $(document.createElement('ULorWhateverElement'));
        // if useSorting is set to true set sorting
        if (this.options.useSorting){
            // HOW WOULD I CALL THE SORTING HERE
            this._trigger('makeMeSortable', null, { elementToBeSortable:this.elementToMakeSortable});
        }
});
})(jQuery)

然后，在您的页面上，您有类似的内容：

var yourTreeviewWidgetInstance = $('#someElement').treeview({
    useSorting:true,
//this gets called from treeview widget if userSorting=true
    makeMeSortable: function (event, elementToMakeSortable) { 
    $(elementToMakeSortable).sortable();
}

PS。我没有测试过代码，我是从脑子里写的。只是让你了解设计。

使用jQuery小部件工厂，创建包括ui.sortable的treeview

2 个答案: