Question

我正在开发一个网站，我使用自定义构建jQuery小部件将数据加载到多个div中。

这是小部件的代码：

(function ($, window, document, undefined) {

    $.widget ("my.contentloader", {

        options: {

            loading_message: true

        },

        _create: function () {

            var that = this;

            $.ajax ({

                type: "POST", 

                url: that.options.url, 

                data: {data: that.options.formdata, limit: that.options.limit, offset: that.options.offset},

                beforeSend: function (html) {

                    if (that.options.loading_message) {

                        $(that.options.target_area).html ("<div id='loading'>Loading</div>");

                    }

                },

                success: function (html) {

                    if (that.options.loading_message) {

                        $('#loading').remove ();

                    }

                    $(that.options.target_area).html (html);

                },

                error: function (html) {

                    $(that.options.error_area).html (html);

                }

            });

        },

        _setOption: function (key, value) {

            this.options[key] = value;

            $.Widget.prototype._setOption.apply (this, arguments);

    }

    });

})(jQuery, window, document);

我使用小部件加载数据，如下所示：

$('#targetdiv').contentloader ({

 url: '<?php echo $action_url; ?>',

 target_area: '#popup_box',

 formdata: {'username' : username_email, 'password' : password}

});

我在同一页面上加载多个实例时遇到问题。有没有办法不在这样的特定div上实例化小部件？

$('#targetdiv').contentloader

Answer 1

我认为您需要将每个实例分配给变量。这样，您可以控制每个实例，或者编写一个迭代实例数组的函数。

var contentLoaders = [];
$('.target-div').each(function(i, data) {
    contentLoaders[i] = $.widget("my.contentloader", { ... });
});

那么你应该能够独立地操作每个加载器，例如：

for (var i in contentLoaders) {
    var contentLoader = contentLoaders[i];
    contentLoader.option( ... );
}

此外，您正在为窗口小部件的多个实例使用DOM ID $（'#loading'）。这是错的。您需要为每个窗口小部件使用单独的加载器，或者检查ID是否存在，并且仅在新节点不存在时插入新节点。删除它同样如此。

**我已经添加了这个示例块，希望它有所帮助：**

//
// This is a way to do it if you want to explicitly define each contentloader.
// Below that, I'll write out a way to define the contentloaders in a loop.
//


var contentLoader1 = $('#targetdiv1').contentloader ({
 url: '<?php echo $action_url; ?>',
 target_area: '#popup_box',
 formdata: {'username' : username_email, 'password' : password}
});
contentLoader1.option('url', 'http://google.com');

var contentLoader2 = $('#targetdiv2').contentloader ({
 url: '<?php echo $action_url; ?>',
 target_area: '#popup_box',
 formdata: {'username' : username_email, 'password' : password}
});
contentLoader2.option('url', 'http:/apple.com');

// Push each widget instance into an array of widget objects
var contentLoaders = [];
contentLoaders.push(contentLoader1);
contentLoaders.push(contentLoader2);
for (var i in contentLoaders) {
    console.log(i, contentLoaders[i].option('url'));
}
// Should print:
// 0 http://google.com
// 1 http://apple.com



//
//
// How to set a bunch of widgets at once from an array of content loader data
//
//

var contentLoaderData = [
    {
        divid: '#targetDiv1',
        url: 'google.com',
        formdata: {
            username: 'joeshmo',
            password: 'joeshmo1'
        }
    },
    {
        divid: '#targetDiv2',
        url: 'apple.com',
        formdata: {
            username: 'plainjane',
            password: 'plainjane1'
        }
    }
];

// Array of widget instances
var contentLoaders = [];
$.each(contentLoaderData, function(index, value) {
    var contentLoader = $(this.divid).contentloader({
        url: this.url,
        target_area: '#popup_box',
        formdata: {'username' : this.formdata.username, 'password' : this.formdata.password}
    });
    // Push each contentLoader instance into the contentLoaders array
    contentLoaders.push(contentLoader);
});
for (var i in contentLoaders) {
    console.log(i, contentLoaders[i].option('url'));
}
// Should print:
// 0 http://google.com
// 1 http://apple.com

在单个页面上定义jquery ui小部件的多个实例

1 个答案: