打造 Bootstrap Tags Input 同 Modal 结合的利器

来源：互联网发布：马原人工智能与意识编辑：程序博客网时间：2024/06/06 00:40

Boostrap Tags input 的使用：http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

Boostrap Tags Input 插件基于Bootstrap实现了如：打Tag 和删除Tag等功能，如：

点击右侧的 x 号可以进行删除。可以通过 tagsinput('items') 方法获取定义的tag的内容。如：

console.log($('#input').val());console.log($('#input').tagsinput('items'));

但仅是这样并不能满足自身的需求，于是对结合自身需求，进行了修改实现：当点击 “输入框” 时，将出现一个 Modal（模态框），用于定义tag的内容，当输入内容后，点击确定，即可生成具有相应信息的tag。同样点击右侧的 x 号可以删除当前 tag 。再次点击 tag 可以对 tag 进行再次编辑。效果如下：

点击“显示信息”可以查看一个 tag 保存的信息：

再次点击 tag 进行编辑：

具体实现如下：（主要需要先引入 bootstrap 框架和 boostrap tags input 插件）

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Tags Input</title>    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">    <link rel="stylesheet" href="bootstrap-tagsinput/bootstrap-tagsinput.css">    <style>        .bootstrap-tagsinput {            display: block;        }        .bootstrap-tagsinput .tag {            display: inline-block;            margin: 0.4em 0;            font-size: 1.1em;        }    </style></head><body>    <div class="container" style="margin: 50px auto;">        <p><input type="text" id="input"/></p>        <p><button class="btn btn-default" id="showInfo">显示信息</button></p>        <div id="info" style="margin: 10px 0;"></div>    </div>    <div id="modal-add" class="modal fade">        <div class="modal-dialog">            <div class="modal-content">                <div class="modal-header">                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>                    <h4 class="modal-title">Modal title</h4>                </div>                <div class="modal-body">                    <form class="form-horizontal">                        <div class="form-group">                            <label for="tname" class="col-sm-2 control-label">名称</label>                            <div class="col-sm-10">                                <input type="text" class="form-control" id="tname" placeholder="请输入名称">                            </div>                        </div>                        <div class="form-group">                            <label for="tcontent" class="col-sm-2 control-label">内容</label>                            <div class="col-sm-10">                                <textarea id="tcontent" rows="5" class="form-control" placeholder="请输入内容"></textarea>                            </div>                        </div>                    </form>                </div>                <div class="modal-footer">                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>                    <button type="button" class="btn btn-primary" id="btn-add">确定</button>                </div>            </div><!-- /.modal-content -->        </div><!-- /.modal-dialog -->    </div><!-- /.modal -->    <div id="modal-change" class="modal fade">        <div class="modal-dialog">            <div class="modal-content">                <div class="modal-header">                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>                    <h4 class="modal-title">Modal title</h4>                </div>                <div class="modal-body">                    <form class="form-horizontal">                        <div class="form-group">                            <label for="tname" class="col-sm-2 control-label">名称</label>                            <div class="col-sm-10">                                <input type="text" class="form-control" id="tname" placeholder="请输入名称">                            </div>                        </div>                        <div class="form-group">                            <label for="tcontent" class="col-sm-2 control-label">内容</label>                            <div class="col-sm-10">                                <textarea id="tcontent" rows="5" class="form-control" placeholder="请输入内容"></textarea>                            </div>                        </div>                    </form>                </div>                <div class="modal-footer">                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>                    <button type="button" class="btn btn-primary" id="btn-change">确定</button>                </div>            </div><!-- /.modal-content -->        </div><!-- /.modal-dialog -->    </div><!-- /.modal -->    <script src="jquery.min.js"></script>    <script src="bootstrap/js/bootstrap.min.js"></script>    <script src="bootstrap-tagsinput/bootstrap-tagsinput.js"></script>    <script>        $(function() {            var tagsinput = $('#input').tagsinput({                trimValue: true,                itemValue: function(item) {                    return item.title;                },                tagClass: function(item) {                    var type = 'label-default';                    switch (parseInt(Math.random() * 6)) {                        case 0:                            type = 'label-default'; break;                        case 1:                            type = 'label-primary'; break;                        case 2:                            type = 'label-success'; break;                        case 3:                            type = 'label-info'; break;                        case 4:                            type = 'label-warning'; break;                        case 5:                            type = 'label-danger'; break;                    }                    return 'label ' + type;                }            })[0];            var input = tagsinput.$element;            var tagsArray = tagsinput.itemsArray;            var tagsContainer = tagsinput.$container; // tag 的容器            var modalAdd = $('#modal-add'); //添加 tag 时，显示的模态框            var modalChange = $('#modal-change'); //修改 tag 时，显示的模态框            // 点击tagsinput输入框，显示模态框            tagsContainer.on('click', function() {                $(this).find('input').blur();                // 清除原来的内容，打开用于 增加tag的模态框                modalAdd.find('input').val('');                modalAdd.find('textarea').val('');                modalAdd.modal('show');            });            // 添加tag的模态框的确认按钮            $('#btn-add').on('click', function() {                var minput = modalAdd.find('input').val();                var mtextarea = modalAdd.find('textarea').val();                if(minput == '' || mtextarea =='') {                    return false;                }                input.tagsinput('add', {'title' : minput, 'text' : mtextarea});                modalAdd.modal('hide');                // 当前新创建的标签                var cur = $(tagsContainer.children('span.tag:last'));                cur.on('click', function(e) {                    e.stopPropagation();                    tagsContainer.find('input').blur();                    // 显示模态框                    var item = $(this).data('item');                    var title = item.title;                    var text = item.text;                    modalChange.data('tag', $(this));                    modalChange.find('input').val(title);                    modalChange.find('textarea').val(text);                    modalChange.modal('show');                });                // 当前新建的标签的删除事件                cur.children('span[data-role=remove]').on('click', function(e) {                    e.stopPropagation();                    if (tagsinput.$element.attr('disabled')) {                        return;                    }                    tagsinput.remove($(e.target).closest('.tag').data('item'));                });            });            $('#btn-change').on('click', function() {                var title = modalChange.find('input').val();                var text = modalChange.find('textarea').val();                // 当前正在编辑的 tag                var tag = modalChange.data('tag');                var beforeTitle = tag.data('item').title;                tag.data('item', {title: title, text: text});                // 修改 tagsArray 中保存的内容                for(var i = 0; i < tagsArray.length; i++) {                    if(tagsArray[i].title == beforeTitle) {                        tagsArray[i].title = title;                        tagsArray[i].text = text;                    }                }                input.tagsinput('pushVal');                input.tagsinput('refresh'); //“刷新界面”                modalChange.modal('hide');            });            $('#showInfo').on('click', function() {                $('#info').html('<pre>' + $('#input').val() + '<br/>' + $('#input').tagsinput('items') + '</pre>');                console.log($('#input').val());                console.log($('#input').tagsinput('items'));            });        });    </script></body></html>

0 0