一个jquery开发的标签功能加强插件,可以生成或删除标签,还能对输入重复标签进行检查,和JQuery autocomplete插件配合实现自动完成功能。
官网: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>
// 配置区 $.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 tags
时间: 2024-10-06 11:23:29