jQuery Tags Input Plugin 插件的使用

一个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>

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(‘&nbsp;&nbsp;‘),
                        $(‘<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

jquery.mytagsinput.js

jquery.tagsinput.css

时间: 2024-10-06 11:23:29

jQuery Tags Input Plugin 插件的使用的相关文章

网页标签功能插: jQuery tags input 翻译api

看名字应该知道是干嘛用了吧. 这种规格标签,因为在写一个后台,用到这种场景,vuejs又没什么可用的,所以这种交互性极强的 ,还是离不开jquery啊. 后悔没用react 开发, 结合ant 里面插件都有.唉,多说无用 ,.我们来看下吧 vuejs 我自己写了好多 组件,到时我会开源  github上去 转自:jQuery Tags Input Plugin(添加/删除标签插件) 一个jquery开发的标签功能加强插件,可以生成或删除标签,还能对输入重复标签进行检查,和JQuery autoc

基于MVC+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J

基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J

如何写一个Jquery 的Plugin插件

博客分类: Javascript /Jquery / Bootstrap / Web jQuery配置管理脚本FirebugJavaScript JQuery Plugin插件,如果大家不明白什么是JQuery插件或都不清楚如何编写可以查看其官方的网站:jQuery Authoring Guidelines 好了,下面有一些我觉得想做一个好的插件必须应有的要求: 1.在JQuery命名空间下声明只声明一个单独的名称 2.接受options参数,以便控制插件的行为 3.暴露插件的默认设置 ,以便外

16款最佳的 jQuery Time Picker 时间选择插件

jQuery 插件可以为你做许多事情,你可以很容易地把这些插件集成到您的网站.网络上的 jQuery 日期选择器和日历插件很多,但找不到很满意的时间选择器插件. 在这里,我们收集了最好的一组 jQuery 时间选择器插件列表分享给大家. 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读精华文章推荐 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!12款优秀的 jQuery 动画插件 8个前沿 HTML5 & CSS3 效果

plugin插件

plugin插件 1fullpage <script type="text/javascript"> $(function(){ /* 组建好网页布局后,必须选中包裹所有section的div的id,并调用fullpage()方法,才能加载布局. 调用fullpage()方法后,可以给函数传入对象类型的参数,设置fullpage的各种属性. */ $('#fullpage').fullpage({ /*内容是否垂直居中?默认为true*/ /*verticalCentere

JQuery和javascript优秀插件收集

JQuery插件库: http://plugins.jquery.com/ 有趣的时钟: http://ynif.v099.10000net.cn/demo/shijian/3/shijian/index.html 别人收集信息8个实用的页面布局和用户界面jQuery插件http://blog.ui90.com/eight-practical-jquery-plugin-page-layout-and-user-interface.html15款最好的 jQuery 网格布局插件(Grid Pl

jQuery的validate验证插件使用方法

(1)默认校验规则(1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电子邮件(4)url:true 必须输入正确格式的网址(5)date:true 必须输入正确格式的日期(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性(7)number:true 必须输入合法的数字(

【jQuery基础学习】06 jQuery表单验证插件-Validation

jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等19类内置验证规则 自定义验证规则:可以很方便地自定义验证规则 简单强大的验证信息提示:默认了验证信息提示,并提供了自定义覆盖默认提示信息的功能 实时验证:可以通过keyup或者blur事件触发验证,而不仅仅在表单提交的时候验证 使用方法: 引用jQuery库和Validation插件 <script