jQuery Tags Input Pluginプラグインの使用
22827 ワード
jqueryが開発したラベル機能強化プラグインで、ラベルを生成または削除したり、入力重複ラベルをチェックしたり、JQuery autocompleteプラグインと協力して自動完了機能を実現したりすることができます.
公式サイト:http://xoxco.com/projects/code/tagsinput/
導入
JavaScript
xx.html>body
バックグラウンドから取り出した値はjs処理によって「,」で分割された文字列にidがtagsのinputラベルのvalue属性に割り当てられます.
例えば、a,b,c
jquery.mytagsinput.js
jquery.mytagsinput.js
jquery.tagsinput.css
公式サイト:http://xoxco.com/projects/code/tagsinput/
導入
<link href="../../resources/css/jquery.tagsinput.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../resources/js/jquery.mytagsinput.js"></script>
， 。JavaScript
<script type="text/javascript">
/***
* @Author sonet
* Tags ， jquery.tagsinput.js
**/
//add tags
function onAddTag(tag) {
$.mpbAlert({
//mpbAlert ，
content:" "+tag,
icon:"question",
ok : function(){
//add tags
$.mpbAjax(
"/admin/job/addJobTypes",
{
data:{
_method:"PUT",
tagName:tag
},
async:false,
success:function(data){
LoadData();
location.reload();
}
}
);
//end add tags
},
cancel : function(){
$("#tags").removeTag(tag);
}
});
}
//remove tags
function onRemoveTag(tag) {
$.mpbAlert({
content:" "+tag,
icon:"question",
ok : function(){
//delete tags
$.mpbAjax(
"/admin/job/removeJobTypes",
{
data:{
_method:"DELETE",
tagName:tag
},
async:false,
success:function(data){
LoadData();
}
}
);
//delete add tags
},
cancel : function(){
$("#tags").addTag(tag);
}
});
}
//change tags
function onChangeTag(input,tag) {
alert("Changed a tag: " + tag);
}
//tags controller
$(function() {
LoadData();
$("span .tag").click(function(){
alert("adsdad");
});
$("#tags").tagsInput({
width:'auto',
onAddTag:function(tag){
onAddTag(tag);
},
onRemoveTag:function(tag){
onRemoveTag(tag);
}
//,
// interactive:false //
});
});
function LoadData(){
$.mpbAjax(
"/admin/job/getAllJobTypes",
{
data:{
_method:"GET"
},
async:false,
success:function(data){// tag
var strs="";
for(var i in data){
strs+=data[i].name+",";
}
strs=strs.substring(0,strs.length-1);
$("#tags").attr("value",strs);
}
}
);
}
//edit tags
function editTags(value){
$.mpbAlert({
content:" <input type=\"text\" id=\"editTags\" value=\""+value+"\">",
icon:"",
ok : function(){
var newTag = $("#editTags").val();
$.mpbAjax(
"/admin/job/updateJobTypes",
{
data:{
_method:"POST",
oldTag:value,
newTag:newTag
},
async:false,
success:function(data){
location.reload();
}
}
);
},
cancel : function(){
}
});
}
function addNewTag(){
var str = $("#addNewTag").val();
if($.isNotBlank(str)){
onAddTag(str);
}
}
</script>xx.html>body
バックグラウンドから取り出した値はjs処理によって「,」で分割された文字列にidがtagsのinputラベルのvalue属性に割り当てられます.
例えば、a,b,c
<body>
:<input type="text" id="addNewTag" value=""/><input type="submit" onclick="addNewTag();" value=" " />
<form>
<p><label> :</label></p>
<input id="tags" type="text" class="tags" value="a,b,c" />
</form>
</body>jquery.mytagsinput.js
//
$.fn.tagsInput = function(options) {
var settings = jQuery.extend({
interactive:true, //
defaultText:' ', //
minChars:0,
width:'100px', //
height:'300px', //
autocomplete: {selectFirst: false },
'hide':true,
'delimiter':',', //
'unique':true, //
removeWithBackspace:true,
placeholderColor:'#666666',
autosize: true,
comfortZone: 20,
inputPadding: 6*2
},options);//html Input value
$.fn.tagsInput.importTags = function(obj,val) {
$(obj).val('');
var id = $(obj).attr('id');
var tags = val.split(delimiter[id]);
for (i=0; i<tags.length; i++) {
$(obj).addTag(tags[i],{focus:false,callback:false});
}
if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
{
var f = tags_callbacks[id]['onChange'];
f.call(obj, obj, tags[i]);
}
}; addTag //add tags
$.fn.addTag = function(value,options) {
options = jQuery.extend({focus:false,callback:true},options);
this.each(function() {
var id = $(this).attr('id');
var tagslist = $(this).val().split(delimiter[id]);
if (tagslist[0] == '') {
tagslist = new Array();
}
value = jQuery.trim(value);
if (options.unique) {
var skipTag = $(this).tagExist(value);
if(skipTag == true) {
//Marks fake input as not_valid to let styling it
$('#'+id+'_tag').addClass('not_valid');
}
} else {
var skipTag = false;
}
if (value !='' && skipTag != true) {
$('<span>').addClass('tag').append(
$('<span>').text(value).append(' '),
$('<a>', {
href : '#',
title : 'Removing tag',
text : 'x'
}).click(function () {
return $('#' + id).removeTag(escape(value));
})
).click(function(){//add edit funciton
editTags(value);//
}).insertBefore('#' + id + '_addTag');
tagslist.push(value);
$('#'+id+'_tag').val('');
if (options.focus) {
$('#'+id+'_tag').focus();
} else {
$('#'+id+'_tag').blur();
}
$.fn.tagsInput.updateTagsField(this,tagslist);
if (options.callback && tags_callbacks[id] && tags_callbacks[id]['onAddTag']) {
var f = tags_callbacks[id]['onAddTag'];
f.call(this, value);
}
if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
{
var i = tagslist.length;
var f = tags_callbacks[id]['onChange'];
f.call(this, $(this), tagslist[i-1]);
}
}
});
return false;
};
//end add tagsjquery.mytagsinput.js
jquery.tagsinput.css