jQuery插件:可公开访问的功能? [英] jQuery plugin: publicly accessible functions?

问题描述

我正在修改jQuery插件.

I am modifying a jQuery plugin.

该插件是一个标记系统，具有基于jQuery ui的自动完成功能的自动完成功能.

The plugin is a tag system, with autcomplete based on jQuery ui's autocomplete.

目前，除了解析创建的列表项之外，似乎没有其他方法来找出已选择的标签.

Currently there seems to be no way (other than parsing the list items created) to find out what tags have been selected.

我已经修改了插件，以便它管理一个名为tag的数组，其中包含列表.

I have modified the plugin so that it manages an array called tags which contains the list.

但是现在我需要一种方法来访问数组.

However now I need a way to get to the array.

调用它初始化

$('#id').tagit({availableTags: 'tags.php'});

我想做的就是打电话给类似的人

What I want to be able to do is call something like

$('#id').tagit('tags');或$('#id').tagit().tags();

获取标签列表.

我将如何修改此代码以添加该功能?

How would I modify this code to add that functionality?

(function($) {

    $.fn.tagit = function(options) {

        var tags = [];

        var defaults = {
            availableTags: [],
            allowSpace:    false
        };

        var options = $.extend(defaults, options);

        var el = this;

        const BACKSPACE = 8;
        const ENTER = 13;
        const SPACE = 32;
        const COMMA = 44;

        // add the tagit CSS class.
        el.addClass("tagit");

        // create the input field.
        var html_input_field = "<li class=\"tagit-new\"><input class=\"tagit-input\" type=\"text\" /></li>\n";
        el.html(html_input_field);

        tag_input = el.children(".tagit-new").children(".tagit-input");

        $(this).click(function(e) {
            if (e.target.tagName == 'A') {
                // Removes a tag when the little 'x' is clicked.
                // Event is binded to the UL, otherwise a new tag (LI > A) wouldn't have this event attached to it.
                $(e.target).parent().remove();
            }
            else {
                // Sets the focus() to the input field, if the user clicks anywhere inside the UL.
                // This is needed because the input field needs to be of a small size.
                tag_input.focus();
            }
        });

        tag_input.keydown(function(event) {
            if (event.which == BACKSPACE) {
                if (tag_input.val() == "") {
                    // When backspace is pressed, the last tag is deleted.
                    tags.pop();
                    $(el).children(".tagit-choice:last").remove();
                }
            }
            // Comma/Space/Enter are all valid delimiters for new tags.
            else if (event.which == COMMA || (event.which == SPACE && !options.allowSpace) || event.which == ENTER) {
                event.preventDefault();

                var typed = tag_input.val();
                typed = typed.replace(/,+$/, "");
                typed = typed.trim();

                if (typed != "") {
                    if (is_new(typed)) {
                        create_choice(typed);
                    }
                    // Cleaning the input.
                    tag_input.val("");
                }
            }
        });

        tag_input.autocomplete({
            source: options.availableTags,
            select: function(event, ui) {
                if (is_new(ui.item.value)) {
                    create_choice(ui.item.value);
                }
                // Cleaning the input.
                tag_input.val("");

                // Preventing the tag input to be update with the chosen value.
                return false;
            }
        });

        function is_new(value) {
            if (value in oc(tags))
                return false;
            return true;
        }

        function create_choice(value) {
            var el = "";
            el = "<li class=\"tagit-choice\">\n";
            el += value + "\n";
            el += "<a class=\"tagit-close\">x</a>\n";
            el += "<input type=\"hidden\" style=\"display:none;\" value=\"" + value + "\" name=\"item[tags][]\">\n";
            el += "</li>\n";
            var li_search_tags = this.tag_input.parent();
            $(el).insertBefore(li_search_tags);
            this.tag_input.val("");
            tags.push(value);
        }

        function oc(a) {
            var o = {};
            for (var i = 0; i < a.length; i++) {
                o[a[i]] = '';
            }
            return o;
        }
    };

    String.prototype.trim = function() {
        return this.replace(/^\s+|\s+$/g, "");
    };

})(jQuery);

推荐答案

花点力气，但是尝试在jQuery UI中构建插件-它会维护各个组件的状态，在创建后提供公共方法，并发布事件.相当容易使用:

Bit more of an effort, but try building your plugin in jQuery UI - it'll maintain state on individual components, provides public methods after creation, and publishes events. It's pretty easy to use:

http://jqueryui.com/docs/Developer_Guide

您获得的代码如下所示:

Your get code would look something like this:

$('#id').tagit("getTags");

这篇关于jQuery插件:可公开访问的功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！