资源: 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');
});