开发者

jQuery plugin: publicly accessible functions?

I am modifying a jQuery plugin.

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.

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.

to initialize it you call

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

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

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

to get the list of 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);


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");


not sure if this will work, but you could try this within $.fn.tagit:

el.tags = function () {
    return tags;
}

which should then return the tags array.


The least obtrusive way is to just attach tags as data on the element:

// Inside the plugin
var tags = [];
this.data('tagit-tags', tags);

Then to use it:

// Initialise, as you had before
$('#id').tagit({availableTags: 'tags.php'});
// Get tags
var tags = $('#id').data('tagit-tags');
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜