分答项目_技能点：微擎模式对话框1

资源： dowebquestion 、 question_edit.html 、 domemberselect 、 memberselect.html

一、微擎模式对话框

微擎模式对话框原理

1、微擎模式对话框采用bootstrap的js模式对话框组件
2、微擎定义了util.dialog()方法动态创建模式对话框，参数1：对话框header；参数2：对话框content；参数3：对话框footer；参数4：参数集合包含对话框对象名称
3、根据对话框中内容动态设计事件，实现选择目的

具体设计
1、在绑定对话框组件的html元素中添加：href（动态生成对话框内容的url地址） 、 name（对象框对象名字）自定义属性
2、编写js脚本
（1）获取自定义属性值
（2）定义heaer footer
（3）ajax请求获取content
（4）定义option对象
（5）调用util.dialog()方法获取模式对话框
（6）显示模式对话框
（7）移除fade样式类
（8）添加对话框事件
关闭对话框事件
选择人员事件
搜索关键词事件
（9）对话框中的信息也可以分页显示，在设计页面时用栅格布局

二、重点：为什么页面中采用eval书写？
原因：
（1）根据页面中传递的name参数值，来命名对话框对象，即对话框对象名称是name变量的值+‘model’！！！
（2）先取出变量值组合成js语句字符串，然后再利用eval函数执行js语句字符串。

三、具体代码
1、工具util.js

content如果是数组：url和参数，将访问网络获取内容然后渲染到对话框中
如果是内容：直接渲染到对话框中

util.dialog = function(title, content, footer, options) {
        if(!options) {
            options = {};
        }
        if(!options.containerName) {
            options.containerName = 'modal-message';
        }
        var modalobj = $('#' + options.containerName);
        if(modalobj.length == 0) {
            $(document.body).append('<div id="' + options.containerName + '" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div>');
            modalobj = $('#' + options.containerName);
        }
        html = 
            '<div class="modal-dialog">'+
            '   <div class="modal-content">';
        if(title) {
            html +=
            '<div class="modal-header">'+
            '   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'+
            '   <h3>' + title + '</h3>'+
            '</div>';
        }
        if(content) {
            if(!$.isArray(content)) {
                html += '<div class="modal-body">'+ content + '</div>';
            } else {
                html += '<div class="modal-body">正在加载中</div>';
            }
        }
        if(footer) {
            html +=
            '<div class="modal-footer">'+ footer + '</div>';
        }
        html += '   </div></div>';
        modalobj.html(html);
        if(content && $.isArray(content)) {
            var embed = function(c) {
                modalobj.find('.modal-body').html(c);
            };
            if(content.length == 2) {
                $.post(content[0], content[1]).success(embed);
            } else {
                $.get(content[0]).success(embed);
            }
        }
        return modalobj;
    };

2、问题编辑页面，选择提问者，在页面中调用util.dialog创建对话框

  $('body').on('click','.open_modal',function(){
            var _that = $(this);        var title = '';
            var url = $(this).data('href');
            var name = $(this).data('name');
            <!--dowebmember_select方法提供对话框内容html数据-->
            $.get(url,function(data){<!--请求返回的结果data：html数据-->
                var content = data;
                var footer = '<button class="btn btn-danger close2">关闭</button>';
                var options = {containerName:''+name};
                var model = name+'_modal';
                eval(model+'=util.dialog(title, content, footer,options);');
                eval(model+'.show();');
                eval(model+'.removeClass("fade");');
                eval(model+'.find(".close2").click(function(){'+model+'.hide();})');
                eval(model+'.find(".select").click(function(){var openid = $(this).data("openid");select(openid)})');
                eval(model+'.find("#search").on("keyup change",function(){var key = $(this).val();search(key)})');
                function search(key){
                    $.post("{php echo $this->createWebUrl('member_select')}",{key:key},function(html){
                        eval(model+'.find("tbody").html(html)');
                        eval(model+'.find(".select").click(function(){var openid = $(this).data("openid");select(openid)})');
                    },'html');
                }
                function select(openid){
                    _that.val(openid);
                    eval(model+'.hide();');
                }
            },'html');
        });