问题描述
我已经检查了堆栈溢出的相关问题,但似乎无法找到我的困境的答案。 我正在尝试使用javascript插件(标记它! - 标签编辑器),我需要找到一种方法来调用它的一个函数“create_choice()” EDIT:在它启动后的某个时刻 。 打电话后有办法吗?
$tagit = $("#mytags").tagit();
然后,我可以称之为
$tagit.create_choice('test123');
以下是该示例的链接: :
如果有任何帮助,下面是插件的代码
(function($) {
$.fn.tagit = function(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.keypress(function(event){
if (event.which == BACKSPACE) {
if (tag_input.val() == "") {
// When backspace is pressed, the last tag is deleted.
$(el).children(".tagit-choice:last").remove();
}
}
// Comma/Space/Enter are all valid delimiters for new tags.
else if (event.which == COMMA || event.which == SPACE || 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){
var is_new = true;
this.tag_input.parents("ul").children(".tagit-choice").each(function(i){
n = $(this).children("input").val();
if (value == n) {
is_new = false;
}
})
return is_new;
}
function create_choice (value){
var el = "";
el = "<li class=\"tagit-choice\">\n";
el += value + "\n";
el += "<a class=\"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("");
}
};
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
};
})(jQuery);
1楼
Nicky Waites
2
已采纳
2011-03-30 12:12:57
我在创建了一个工作示例,但它确实需要对插件进行更改。
2楼
ezmilhouse
0
2011-03-30 11:42:11
更改
$.fn.tagit = function(options) { ...
至
$.fn.tagit = function(options,callback) { ...
加
if (callback && typeof callback == 'function') {
callback();
}
后
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
};
现在,您可以在tagit调用后立即调用您选择的函数:
$tagit = $("#mytags").tagit(yourOptions, function(){
alert('hi')!
});
3楼
alfmartinez
0
2011-03-30 11:48:09
你可以尝试添加
return this;
在create_choice函数块之后。 tagit将返回自身,您可以调用make_choice或.fn.tagit中包含的任何函数