Javascript jQuery插件:可公开访问的函数?
我正在修改jQuery插件 该插件是一个标签系统,具有基于jQueryUI的自动完成的自动完成功能 目前,除了解析创建的列表项,似乎没有其他方法可以找出选择了哪些标记 我已经修改了插件,以便它管理一个名为tags的数组,其中包含列表 但是现在我需要一种方法来到达阵列 要初始化它,请调用 $'id'.tagit{availableTags:'tags.php'} 我想做的是打电话给 $'id'.tagit'tags';或$'id'.tagit.tags 获取标签列表 如何修改此代码以添加该功能Javascript jQuery插件:可公开访问的函数?,javascript,jquery,plugins,tags,Javascript,Jquery,Plugins,Tags,我正在修改jQuery插件 该插件是一个标签系统,具有基于jQueryUI的自动完成的自动完成功能 目前,除了解析创建的列表项,似乎没有其他方法可以找出选择了哪些标记 我已经修改了插件,以便它管理一个名为tags的数组,其中包含列表 但是现在我需要一种方法来到达阵列 要初始化它,请调用 $'id'.tagit{availableTags:'tags.php'} 我想做的是打电话给 $'id'.tagit'tags';或$'id'.tagit.tags 获取标签列表 如何修改此代码以添加该功能 (
(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);
不确定这是否有效,但您可以在$.fn.tagit内尝试:
然后返回标记数组 最不显眼的方法是将标签作为数据附加到元素上:
// Inside the plugin
var tags = [];
this.data('tagit-tags', tags);
然后使用它:
// Initialise, as you had before
$('#id').tagit({availableTags: 'tags.php'});
// Get tags
var tags = $('#id').data('tagit-tags');
这需要付出更多的努力,但请尝试在jQuery UI中构建插件——它将维护各个组件的状态,在创建后提供公共方法,并发布事件。它非常容易使用: 您的get代码如下所示:
$('#id').tagit("getTags");
我想我喜欢你想要的:$'id'.tagit.tags;因为您将tags方法绑定到el,而el与此绑定
$('#id').tagit("getTags");