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

最新推荐文章于 2021-07-02 09:09:01 发布

葡萄干是个程序员

最新推荐文章于 2021-07-02 09:09:01 发布

阅读量3.8k

点赞数 1

分类专栏： Web前端文章标签： bootstrap Bootstrap Tags Input Modal

本文链接：https://blog.csdn.net/qq_15096707/article/details/51746968

版权

Web前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

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>