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

        对上文 打造 Bootstrap Tags Input 同 Modal 结合的利器 中的 js 进行整合，如下：

bootstrap-tagsinput-demo.js

/**
 * Created by DreamBoy on 2016/6/23.
 */
$.fn.initTagsInput = function(arg1, arg2) {

    // bootstrap-tagsinput 插件的配置
    var opt1 = $.extend({
        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;
        }
    }, arg1);

    // 基本配置
    var opt2 = $.extend({
        'modalAdd': '#modal-add', //添加tag的模态框
        'modalChange': '#modal-change', //修改tag的模态框
        'btnAdd': '#btn-add', //添加tag的模态框的确定按钮
        'btnChange': '#btn-change', //修改tag的模态框的确定按钮
        'display': 'block', //tag 容器的display属性
        'tagStyle': { // tag 的样式
            'display': 'inline-block',
            'margin': '0.4em 0',
            'fontSize': '1.1em',
            'padding': '0.6em'
        }
    }, arg2);


    var self = $(this);

    var tagsinput = self.tagsinput(opt1)[0];

    var input = tagsinput.$element;
    var tagsArray = tagsinput.itemsArray;
    var tagsContainer = tagsinput.$container; // tag 的容器
    tagsContainer.css('display', opt2.display);

    var modalAdd = $(opt2.modalAdd); //添加 tag 时，显示的模态框
    var modalChange = $(opt2.modalChange); //修改 tag 时，显示的模态框

    // 点击tagsinput输入框，显示模态框
    tagsContainer.on('click', function() {
        $(this).find('input').blur();

        // 清除原来的内容，打开用于 增加tag的模态框
        modalAdd.find('input').val('');
        modalAdd.find('textarea').val('');
        modalAdd.modal('show');
    });


    // 添加tag的模态框的确认按钮
    $(opt2.btnAdd).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.css(opt2.tagStyle); //设置tag的样式
        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'));
        });

    });

    $(opt2.btnChange).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');
    });
};

案例 index2.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">
</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 src="bootstrap-tagsinput-demo.js"></script>
    <script>
        $(function() {
            $('#input').initTagsInput();

            $('#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>