模态对话框的实现思路
1.一个容器div,限制模态对话框的作用域,被该div覆盖的组件不可被点选。
2.容器div中一个半透明的子div, 实现遮罩效果,width:100% height:100%;
3.容器div中一个对话框div,用于布局对话框中的组件。对话框包括titler、body、footer三个部分。
推拽功能的实现思路
在指定组件上监听鼠标按下(mousedown)事件,在该事件中为需要被拖拽的组件添加mousemove事件(移动组件)以及moueseup事件(结束拖拽)
效果图如下:
测试代码:
var msg = '<p class="tipgreen">请确认付款金额无误,刷卡完成缴费!</p>'+
'<p class="tipred">付款总额:3.0元</p>'+
'<br><ol id="oprationlog" class="log"><li>读卡成功,非本人卡,验证消费密码。消费密码验证成功!</li><li>aaa</li></ol><p id="tip4" class="tipgreen">20秒后返回首页!</p>';
var testDialog = $.DS.UI.Dialog.show(msg, { title:"付款确认-测试对话框"});
下面是代码和css
一、对话框代码
(function($){
if( !$.DS ) $.DS = {};
if( !$.DS.UI ) $.DS.UI = {};
/**
* 对话框构造函数。
* @param {Object} msg
* @param {Object} setting
* @param {Object} owner :jQuery对象。
*/
$.DS.UI.Dialog = function(msg, setting, owner){
this.owner = owner;
if( owner === undefined || null == owner ) this.owner = $(window.document.body);
this.setting = $.extend($.DS.UI.Dialog.defaultSetting, setting);
//创建一个容器div
this.container = $('<div class="dialog_container"/>');
this.mask = $('<div class="dialog_mask"/>');
this.body = $('<div class="dialog_body"/>');
this.container.append(this.mask);
this.container.append(this.body);
this.titlearea = $('<div class="dialog_body_titlearea"><img class="dialog_body_title_icon" src="'+this.setting.icon+'"/><p>'+this.setting.title+"</p></div>");
$.DM.setDrag(this.body, this.titlearea); //实现拖拽功能
this.main = $('<div class="dialog_body_mainarea">'+msg+'</div>');
this.footer = $('<div class="dialog_body_footarea"><button id="_btn_close">close</button></div>');
this.body.append(this.titlearea);
this.body.append(this.main);
this.body.append(this.footer);
this.footer.find("#_btn_close").click(function(){
this.dialog.close();
})[0].dialog = this;
};
$.DS.UI.Dialog.defaultSetting = {
model:true,
width:600,
height:450,
title:"对话框",
icon:"./img/sys/dicon.png"
};
/**
* 显示对话框-静态方法,用户显示一个对话框
* @param {String} msg: 提示信息;
* @param {Object} seeting: 对话框设置;
* @param {Object} owner
* 对话框遮盖对象,如果owner=null,则ownere=body
*/
$.DS.UI.Dialog.show = function(msg, setting, owner){
var dlg = new $.DS.UI.Dialog(msg, setting, owner)
dlg.show();
return dlg;
};
$.DS.UI.Dialog.prototype = {
show:function(){
this.owner.append(this.container);
this.body.width(this.setting.width);
//因为ff中,width:100%会多出两个像素,所以只能代码设置。
this.titlearea.width(this.setting.width-2);
this.body.height(this.setting.height);
this.body.offset({left:(this.container.width()-this.setting.width)/2, top:100});
this.main.height(this.setting.height - this.titlearea.height() - this.footer.height() );
},
close:function(){
if( this.setting.closeHandler ){
this.setting.closeHandler();
}
this.owner[0].removeChild(this.container[0]);
}
}
})(jQuery);
二、对话框css
.dialog_container{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:100;
}
.dialog_mask{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background:#999;
opacity:0.7;
filter:alpha(opacity=70);
z-index:0;
}
.dialog_body{
overflow:hidden;
position:absolute;
border-left:#ccc 2px solid;
border-top:#ffffff 2px solid;
border-bottom:#666 2px solid;
border-right:#666 2px solid;
background:#999;
border-radius: 5px 5px;
box-shadow: 2px 2px 3px #000;
z-index:10;
}
.dialog_body_titlearea{
padding:3px 0 0 0;
width:100%;
cursor:move;
vertical-align:middle;
border-left:#666 1px solid;
border-top:#666 1px solid;
border-bottom:#fff 1px solid;
border-right:#eee 1px solid;
background:#669;
font-weight:bolder;
height:20px;
}
.dialog_body_title_icon{
border:0;
width:18px;
height:18px;
margin-left:2px;
margin-right:2px;
float:left;
}
.dialog_body_mainarea{
padding:5px;
width:100%;
height:200px;
border-bottom:#666 1px solid;
}
.dialog_body_footarea{
padding:5px;
width:100%;
border-top:#fff 1px solid;
height:70px;
}
测试用的css
ol.log {
border: 1px solid #617775;
background: #f0f6e4;
width:95%;
height:238px;
overflow: hidden;
font-size: 20;
}
ol.log.small {
height:45px;
}
ol.log li {
color: #666666;
padding-left: 10px;
}
ol.log li.dark {
background-color: #E3E3E3;
}
三、拖拽管理代码
(function($){
/**
* DM = drag manager
*/
$.DM = {
/**
* 设置一个可被拖拽的组件
* @param {Object} component:可被拖拽的组件
* @param {Object} rect:进入拖拽的区域,如果不指定则为组件客户区
*/
setDrag:function(component, handler){
var dragable = component;
if( null != handler) dragable = handler;
dragable.bind("mousedown.dragbegin", function(event){
//alert("Drag begin!");
component[0]._cx = event.clientX;
component[0]._cy = event.clientY;
component.bind("mousemove.dragging", function(event){
var _ox = event.clientX - this._cx;
var _oy = event.clientY - this._cy;
this._cx = event.clientX;
this._cy = event.clientY;
$(this).offset({top:$(this).offset().top + _oy, left:$(this).offset().left + _ox});
});
component.bind("mouseup.dragstop", function(){
component.unbind("mousemove.dragging")
})
});
}
}
})(jQuery);
实现了主要部分,还有许多待改进的地方,请大家指正。