2

我正在尝试将我的一些代码转换为可重用的插件。很多时候，我使用来自 Ajax 请求的动态选项填充选择。

我设法创造了这样的东西：

$.fn.fillSelect = function fillSelect(options) {
var self = this;
options = $.extend({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "Data.asmx/StatusList",
    dataType: "json",
    async: true,
    success: function(data) {
        var list = "";
        $.each(data.d, function(i) {
            list += '<option value='
                          + data.d[i].ID + '>'
                          + data.d[i].Nazwa
                          + '</option>';
        });
        self.filter("select").each(function() {
            $(this).empty();
            $(this).append(list);
            //use selectmenu
            if ($.ui.selectmenu) $(this).selectmenu();
        });
    }//,
    //error: function(result) {
    //    alert("Error loading data!");
    //}
}, options);
$.ajax(options);
return self;
}

这背后的想法是能够通过一个请求多次使用相同的数据填充多个选择。
我有 Ajax 请求的默认选项，但我想为其添加更多选项。
例如：
clear - fill 确定我是否想要新选项来替换现有选项或追加。

此外，我想向我的函数添加一些回调，我可以将它们作为参数传递。如果例如服务器请求将失败，我想指定一个在此错误发生后将调用的函数 - 例如显示警报或禁用我的选择。

我的问题是我应该如何更改我的插件或我应该使用哪种模式（样板）？

我发现的每个样板都是用于创建将“留在”选定项目内的插件，以便以后可以调用该插件的方法。

我需要一个简单的插件，允许用户填写选择，然后它会结束它的生命:)

我的主要想法是对所有元素只向服务器发出一个请求。

这是 jsfiddle 演示：http: //jsfiddle.net/JC7vX/2/

4

2 回答 2

2

一个基本的插件可以如下构建

(function ($){
    $.fn.yourPlugin = function (options){
        // this ensures that function chaining can continue
        return this.each(function (){
            // merge defaults and user defined options
            var params = $.extend({},defaultOptions,options);
            // your plugin code
        });
    }

    /* these options will help define the standard functionality of the plugin,
     * and also serves as a nice reference
     */
    var defaultOptions = {
        someProperty : true
    }
})(jQuery)

您可以做其他事情来扩展插件的功能并提供保留上下文的公共方法，但这对于您的示例来说太过分了。

于 2012-11-21T11:58:37.410 回答
0

这是我的答案版本http://jsfiddle.net/Misiu/ncWEw/

我的插件看起来像这样：

(function($) {
$.fn.ajaxSelect = function(options) {
    var $this = this;
    //options
    var settings = $.extend({}, defaults, options);
    //disable select
    if ($.ui.selectmenu && settings.selectmenu && settings.disableOnLoad) {
        $this.selectmenu('disable');
    }
    //ajax call
    $.ajax({
        type: settings.type,
        contentType: settings.contentType,
        url: settings.url,
        dataType: settings.dataType,
        data: settings.data
    }).done(function(data) {
        var n = data.d || data;
        var list = "";
        $.each(n, function(i) {
            list += '<option value=' + n[i].Id + '>' + n[i].Nazwa + '</option>';
        });
        $this.filter("select").each(function() {
            $(this).empty();
            $(this).append(list);
            if ($.ui.selectmenu && settings.selectmenu) {
                $this.selectmenu();
            }
            settings.success.call(this);
        });
    }).fail(function() {
        settings.error.call(this);
    });

    return this;
};

var defaults = {
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: '/echo/json/',
    dataType: 'json',
    data: null,
    async: true,
    selectmenu: true,
    disableOnLoad: true,
    success: function() {},
    error: function() {}
};
})(jQuery);

我知道它非常简单，但它具有我需要的所有功能：
-您可以一次选择多个元素
-它仅过滤您选择的项目中的选择
-它只向服务器发出一个请求
-首先它构建选项字符串和然后附加它而不是在循环中添加项目
- 您可以指定 2 个回调：一个用于错误，第二个用于成功

这是我的第一个插件，所以还有很多地方需要改进。

一如既往的欢迎评论和提示！

于 2012-11-21T20:28:53.630 回答