0

我正在尝试使用 jQuery 小部件工厂来创建插件。我正在创建一个简单的树视图插件，我想在其中实现 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, { }); 声明我从可排序小部件中获得所有选项，但我将如何在我的代码中调用它并确保拥有我需要的所有东西？

/马丁

4

2 回答 2

0

作为一项一般原则，让小部件相互了解听起来并不好。通常，这就是“作为函数的选项”的用途。例如，在这里您可以看到 2 个正在通信的小部件：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 小部件。

于 2013-09-11T23:55:02.110 回答
0 
(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。我还没有测试代码，我是从头开始写的。只是给你设计的想法。

于 2013-09-12T14:26:02.963 回答