0

我正在开发一个网站，我使用自定义构建 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
4

1 回答 1

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
于 2012-05-28T21:59:53.017 回答