【前端插件】弹窗插件的编写【一】---编写一个窗体蓝本
最近要对一个类似webqq项目进行开发，但是里面的弹窗插件就很成问题了，例如：用了aerowindow lhgdialog及其他都不满意，没办法，只能自己山寨一个出来了，里面我将lhg的样式重写了一次，所以大家不要那lhgdialog的样式表代替原本的样式表这种事了，然后将aero的逻辑套进去了，但是我省略了它绚丽的各种效果。
【首先，按照lhgdialog的外表山寨一个相同界面出来，如下：css及html结构如下：】
body{ _margin:0; }/*IE6 BUG*/
.aero-window-wrapper{ position: absolute; left: 15px; top: 250px; width:600px; height: 400px;font-family: tahoma, arial,'宋体', sans-serif;}
.aero-window-wrapper table{ margin: 0; padding: 0;}
.aero-window-wrapper table tr{ margin: 0; padding: 0;}
.aero-window-wrapper table td{ margin: 0; padding: 0;}
.aero-window{width: 100%; height: 100%;}
.aero-window-title{ width: 100%; height: 36px; overflow: hidden;}
.aero-window-title .ui-aero-window-left-top-title_conner{ background: url(iblue/ie6/ui_lt.png) no-repeat; width: 13px; height: 36px; float: left;}
.aero-window-title .ui-aero-window-right-top-title_conner{ background: url(iblue/ie6/ui_rt.png) no-repeat; width: 13px; height: 36px; float: right;}
.aero-window-title .ui-aero-window-middle-title-content{ float: left;
background: url(iblue/ie6/ui_t.png) repeat-x; width: 200px; height:36px; overflow: hidden; position: relative; overflow: visible;}
.aero-window-title .ui-aero-window-middle-title-content .ui-title-icon{ display: block; width: 24px; height: 24px; padding-top:8px; padding-right: 5px; float: left; }
.aero-window-title .ui-aero-window-middle-title-content .ui-title-words{ width: 200px; height: 24px; padding-top: 9px; display: block; float: left; line-height: 24px; color: white; letter-spacing: 1px; font-weight: bold; font-size: 13px; }
.aero-window-title .ui-aero-window-middle-title-content div.ui-aero-window-right-top-buttons-wrapper{
width: 150px; height: 24px; float: right; padding-top: 10px; overflow: visible;
}
/*标题纯CSS按钮定位部分*/
.ui_min,.ui_max,.ui_close,.ui_res{ color:#FFF;font-size:22px;width:22px;height:22px;line-height:18px; }
.ui_min_b{ position: absolute; top:10px;left:5px;width:12px;height:2px;border-bottom:2px solid #FFF; }
.ui_max_b{position: absolute; top:5px;left:5px;width:10px;height:7px; }
.ui_res_t,.ui_res_b{position: absolute; top:8px;left:3px;width:10px;height:5px; }
.ui_res_b{position: absolute; top:4px;left:6px; }
.ui_res_t,.ui_res_b,.ui_max_b{ border:1px solid #FFF;border-top-width:3px; }
.ui_res_t{ background:#3d8cce; }
.ui_min:hover b,.ui_max:hover b,.ui_res:hover b{ border-color:#555; }
.ui_close{ vertical-align:baseline;_line-height:22px; }
.ui_close:hover,.ui_close:focus{ color:#c93333; }
/*主体*/
.aero-window .aero-window-main-content{ width: 100%; height:400px; position: relative; }
.aero-window .aero-window-main-content .ui-window-left-edege{ width: 13px; height: 100%; float: left; background: url(iblue/ie6/ui_l.png) repeat-y;}
.aero-window .aero-window-main-content .ui-window-right-edege{width: 13px; height: 100%; float: right; background: url(iblue/ie6/ui_r.png) repeat-y; }
.aero-window .aero-window-main-content .ui-window-body-content{ position: absolute; left: 13px; top: 0px; width: 200px; height: 400px; background: white; overflow: hidden;}
/*窗体footer*/
.aero-window .aero-window-footer{ height: 16px; width: 100%; position: relative;}
.aero-window-footer .ui-left-bottom-conner{ background: url(iblue/ie6/ui_lb.png) no-repeat; width: 13px; height: 16px; float: left;}
.aero-window-footer .ui-right-bottom-conner{ background: url(iblue/ie6/ui_rb.png) no-repeat; width: 13px; height: 16px; float: right;}
.aero-window-footer .ui-center-footer-body{ background: url(iblue/ie6/ui_b.png) repeat-x; width: 200px; height: 16px; position: absolute; left: 13px; top: 0px;}
/*底部按钮样式*/
.ui-window-bottom-buttons{ white-space:nowrap;padding:4px 8px;text-align:right;background-color:#FFF; }
.ui-window-bottom-buttons input::-moz-focus-inner{ border:0;padding:0;margin:0; }
.ui-window-bottom-buttons input.ui-bottom-button{ padding:3px 10px 3px 12px;padding:5px 10px 2px 12px\0;*padding:4px 10px 2px 10px;margin-left:6px;cursor:pointer;display:inline-block;
text-align:center;line-height:1;height:23px;letter-spacing:3px;overflow:visible;color:#333;border:solid 1px #999;border-radius:3px;border-radius:0\9;background:#DDD;
background:linear-gradient(top,#FAFAFA,#E4E4E4);
background:-moz-linear-gradient(top,#FAFAFA,#E4E4E4);
background:-webkit-gradient(linear,0% 0%,0% 100%,from(#FAFAFA),to(#E4E4E4));
background:-o-linear-gradient(top,#FAFAFA,#E4E4E4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA',endColorstr='#E4E4E4');
text-shadow:0 1px 1px rgba(255,255,255,1);box-shadow:0 1px 0 rgba(255,255,255,.7),0 -1px 0 rgba(0,0,0,.09);
-moz-transition:-moz-box-shadow linear .2s;-webkit-transition:-webkit-box-shadow linear .2s;transition:box-shadow linear .2s; }
.ui-window-bottom-buttons input.ui-bottom-button:focus{ outline:0 none;box-shadow:0 0 3px #0e78c9; }
.ui-window-bottom-buttons input.ui-bottom-button:hover{ color:#000;border-color:#666;box-shadow:none; }
.ui-window-bottom-buttons input.ui-bottom-button:active{ border-color:#666;
background:linear-gradient(top,#FAFAFA,#E4E4E4);
background:-moz-linear-gradient(top,#FAFAFA,#E4E4E4);
background:-webkit-gradient(linear,0% 0%,0% 100%,from(#FAFAFA),to(#E4E4E4));
background:-o-linear-gradient(top,#FAFAFA,#E4E4E4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA',endColorstr='#E4E4E4'); }
.ui-window-bottom-buttons input.ui-bottom-button[disabled]{ cursor:default;color:#666;background:#DDD;border:solid 1px #999;filter:alpha(opacity=50);opacity:.5;box-shadow:none; }
.ui-window-bottom-buttons input.ui_state_highlight{ color:#FFF;border:solid 1px #1c6a9e;text-shadow:0 -1px 1px #1c6a9e;background:#2288cc;
background:linear-gradient(top,#33bbee,#2288cc);
background:-moz-linear-gradient(top,#33bbee,#2288cc);
background:-webkit-gradient(linear,0% 0%,0% 100%,from(#33bbee),to(#2288cc));
background:-o-linear-gradient(top,#33bbee,#2288cc);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee',endColorstr='#2288cc'); }
.ui-window-bottom-buttons input.ui_state_highlight:hover{ color:#FFF;border-color:#555; }
.ui-window-bottom-buttons input.ui_state_highlight:active{ border-color:#1c6a9e;
background:linear-gradient(top,#33bbee,#2288cc);
background:-moz-linear-gradient(top,#33bbee,#2288cc);
background:-webkit-gradient(linear,0% 0%,0% 100%,from(#33bbee),to(#2288cc));
background:-o-linear-gradient(top,#33bbee,#2288cc);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee',endColorstr='#2288cc'); }
【html结构】
这里是应用程序
【大约外表】
【这个外表是已经经过各个部件计算之后的样子】
虾米昂说一说如何解决窗口必须要最大化，最小化及resize尺寸时候，如何保持样式外表不变的问题，我的想法是，用js写一个resize函数，里面需要两个参数，窗口的宽度及高度，得到两个参数以后，该方法将自动计算各个部件的位置及宽度高度（标题栏宽度，底部宽度等），相关js如下：
var EL_Window_Wrapper=$("div.aero-window-wrapper");
var EL_Window_Title=EL_Window_Wrapper.find("div.aero-window-title");
var EL_Window_lt_conner=EL_Window_Title.find("div.ui-aero-window-left-top-title_conner");
var EL_Window_rt_conner=EL_Window_Title.find("div.ui-aero-window-right-top-title_conner");
var EL_Window_t_title=EL_Window_Title.find("div.ui-aero-window-middle-title-content");
var EL_Window_Right_Top_WinButtonWrapper=EL_Window_Title.find("div.ui-aero-window-right-top-buttons-wrapper");
var EL_Window_Center_Top_WinTitleWrapper= EL_Window_Title.find(".ui-title-words");
var EL_Window_Left_Top_WinTitleIcon= EL_Window_Title.find(".ui-title-icon");
var EL_Window_ContentWrapper=EL_Window_Wrapper.find("div.aero-window-main-content");
var EL_Window_Content=EL_Window_ContentWrapper.find("div.ui-window-body-content");
var EL_Window_Footer=EL_Window_Wrapper.find("div.aero-window-footer");
var EL_Window_Footer_Body=EL_Window_Footer.find(".ui-center-footer-body");
function resizeWindowByContentSize(ContentWidth,ContentHeight){
resizeWindow(ContentWidth,ContentHeight);
}
function resizeWindowByWindowSize(WindowWidth,WindowHeight){
var _win_width=parseInt(WindowWidth);
var _win_height=parseInt(WindowHeight);
var _content_width=_win_width-26;
var _content_height=_win_height-36-16;
resizeWindow(_content_width,_content_height);
}
function resizeWindow(ContentWidth,ContentHeight){
var _content_width=parseInt(ContentWidth);
var _content_height=parseInt(ContentHeight);
var _win_width=_content_width+26;
var _win_height=_content_height+36+16;
EL_Window_Wrapper.css({
width:_win_width,
height:_win_height
});
//--计算window 标题栏的应有宽度
EL_Window_t_title.css({
width:_content_width
});
//--先计算右侧几个按钮位置，再计算左侧标题栏，分别重新定位。
var _size_icon_width=0;
if(EL_Window_Left_Top_WinTitleIcon.length>0){
_size_icon_width=EL_Window_Left_Top_WinTitleIcon.width();
}
var _size_right_top_winbtns=0;
EL_Window_Right_Top_WinButtonWrapper.find("a[component='top_button']").each(function(){
_size_right_top_winbtns+=26;
});
EL_Window_Right_Top_WinButtonWrapper.width(_size_right_top_winbtns+5);
EL_Window_Center_Top_WinTitleWrapper.width(_content_width-_size_icon_width-_size_right_top_winbtns-15);
EL_Window_ContentWrapper.css({
width:_win_width,
height:_content_height
});
EL_Window_Content.css({
width:_content_width,
height:_content_height
});
EL_Window_Footer_Body.css({
width:_content_width
});
}
resizeWindowByWindowSize(1000,600);
【窗口拖动的实现】
窗口拖动的事件是mousedown，mouseup，下面将给出完整html代码及js代码及效果示意图：
显示拖曳结果。。。
正在修正。
这里是应用程序
【效果示意图】
【窗口resize】
窗口resize的与拖曳差不多，但是最重要的是，按照我的做法，宽度高度每次变化都必须resize一次，拖曳左边或右边的时候假如是同步变化尺寸的话，那么就非常不好，所以我采取了折中的方法，加入两个透明层，一个透明层将window遮住，一个透明层可以自由resize，当resize结束的时候，最根据最后的尺寸resize window，下面看图示例子：
【下面是左侧 右侧 底部 分别添加 拖动事件，每次都重新根据位置resize 窗口，ie7，8，chrome通过，ie6下面有小bug，需要进行修改】
function dragWindow(){
$(EL_Window_Title).mousedown(function(e){
$(document).unbind("mousemove mouseup");
$(this).css("cursor","move");
/*当前窗口相关参数*/
var _window_wrapper_offset=$(EL_Window_Wrapper).offset();
var _w_wrapper_width=$(EL_Window_Wrapper).width();
var _w_wrapper_height=$(EL_Window_Wrapper).height();
var _w_locate_left=_window_wrapper_offset.left;
var _w_locate_top=_window_wrapper_offset.top;
/*当前左侧边框参数*/
var _title_offset=$(EL_Window_Title).offset();
var _title_left=_title_offset.left;
var _title_top=_title_offset.top;
/*当前鼠标坐标参数*/
var _mouse_x= e.pageX;
var _mouse_y= e.pageY;
$(document).bind("mousemove",function(ev){
var _current_x_sep=ev.pageX-_mouse_x;
var _current_y_sep=ev.pageY-_mouse_y;
$("#show_xy").text("相对坐标"+_current_x_sep+"x"+_current_y_sep);
var _real_locate_x=_w_locate_left+_current_x_sep;
var _real_locate_y=_w_locate_top+_current_y_sep;
_real_locate_x=parseInt(_real_locate_x);
_real_locate_y=parseInt(_real_locate_y);
// $("#show_xy").text("真实坐标"+_real_locate_x+"x"+_real_locate_y);
$(EL_Window_Wrapper).css({
left:_real_locate_x+"px",
top:_real_locate_y+"px"
});
});
$(document).mouseup(function()
{
$(EL_Window_Title).css("cursor","default");
$(document).unbind("mousemove");
$("#show_xy").text("拖动结束");
// $("#show_xy").text("第一个unbind");
$(document).unbind("mouseup");
}) ;
});
}
dragWindow();
function MaximizeWindow(){
var _max_width=$(window).width();
var _max_height=$(window).height();
}
function LeftEdegeResize(){
$(EL_Window_LeftEdege).mousedown(function(e){
$(document).unbind("mousemove mouseup");
/*当前窗口相关参数*/
var _window_wrapper_offset=$(EL_Window_Wrapper).offset();
var _w_wrapper_width=$(EL_Window_Wrapper).width();
var _w_wrapper_height=$(EL_Window_Wrapper).height();
var _w_locate_left=_window_wrapper_offset.left;
var _w_locate_top=_window_wrapper_offset.top;
/*当前鼠标位置*/
var _mouse_x= e.pageX;
var _mouse_y= e.pageY;
$(document).bind("mousemove",function(ev){
//$("#show_xy").text("鼠标的pageX及pageY为："+ev.pageX+"x"+ev.pageY);
var _current_x=ev.pageX-_mouse_x;
var _current_y=ev.pageY-_mouse_y;
_current_x=parseInt(_current_x);
_current_y=parseInt(_current_y);
$("#show_xy").text("鼠标的pageX及pageY的相对位移为："+(_current_x)+"x"+(_current_y));
// return;
//--下面计算宽度的变化。
var _real_locate_x= _w_locate_left+_current_x;
var _real_locate_y=_w_locate_top+_current_y;
_real_locate_x=parseInt(_real_locate_x);
_real_locate_y=parseInt(_real_locate_y);
var _real_width=_w_wrapper_width-_current_x;
_real_width=parseInt(_real_width);
$(EL_Window_Wrapper).css({
left:_real_locate_x+"px"
});
resizeWindowByWindowSize(_real_width,_w_wrapper_height);
});
$(document).mouseup(function()
{
$(this).unbind("mousemove");
$("#show_xy").text("拖动结束");
$(this).unbind("mouseup");
// resizeWindowByWindowSize(1000,600);
})
});
}
LeftEdegeResize();
/*右侧边框的resize事件*/
function RightEdegeResize(){
$(EL_Window_RightEdege).mousedown(function(e){
$(document).unbind("mousemove mouseup");
/*当前窗口相关参数*/
var _window_wrapper_offset=$(EL_Window_Wrapper).offset();
var _w_wrapper_width=$(EL_Window_Wrapper).width();
var _w_wrapper_height=$(EL_Window_Wrapper).height();
var _w_locate_left=_window_wrapper_offset.left;
var _w_locate_top=_window_wrapper_offset.top;
/*当前鼠标位置*/
var _mouse_x= e.pageX;
var _mouse_y= e.pageY;
$(document).bind("mousemove",function(ev){
//$("#show_xy").text("鼠标的pageX及pageY为："+ev.pageX+"x"+ev.pageY);
var _current_x=ev.pageX-_mouse_x;
var _current_y=ev.pageY-_mouse_y;
_current_x=parseInt(_current_x);
_current_y=parseInt(_current_y);
//$("#show_xy").text("鼠标的pageX及pageY的相对位移为："+(_current_x)+"x"+(_current_y));
// return;
//--下面计算宽度的变化。
var _real_locate_x= _w_locate_left;
var _real_locate_y=_w_locate_top+_current_y;
_real_locate_x=parseInt(_real_locate_x);
_real_locate_y=parseInt(_real_locate_y);
var _real_width=_w_wrapper_width+_current_x;
_real_width=parseInt(_real_width);
resizeWindowByWindowSize(_real_width,_w_wrapper_height);
});
$(document).mouseup(function()
{
$(this).unbind("mousemove");
$("#show_xy").text("拖动结束");
$(this).unbind("mouseup");
// resizeWindowByWindowSize(1000,600);
})
});
}
RightEdegeResize();
/*底部resize事件*/
function BottomEdegeResize(){
$(EL_Window_Footer_Body).mousedown(function(e){
$(document).unbind("mousemove mouseup");
/*当前窗口相关参数*/
var _window_wrapper_offset=$(EL_Window_Wrapper).offset();
var _w_wrapper_width=$(EL_Window_Wrapper).width();
var _w_wrapper_height=$(EL_Window_Wrapper).height();
var _w_locate_left=_window_wrapper_offset.left;
var _w_locate_top=_window_wrapper_offset.top;
/*当前鼠标位置*/
var _mouse_x= e.pageX;
var _mouse_y= e.pageY;
$(document).bind("mousemove",function(ev){
//$("#show_xy").text("鼠标的pageX及pageY为："+ev.pageX+"x"+ev.pageY);
var _current_x=ev.pageX-_mouse_x;
var _current_y=ev.pageY-_mouse_y;
_current_x=parseInt(_current_x);
_current_y=parseInt(_current_y);
// $("#show_xy").text("相对位移为："+(_current_x)+"x"+(_current_y));
//return;
//--下面计算宽度的变化。
var _real_locate_x= _w_locate_left;
var _real_locate_y=_w_locate_top+_current_y;
_real_locate_x=parseInt(_real_locate_x);
_real_locate_y=parseInt(_real_locate_y);
var _real_width=_w_wrapper_width+_current_x;
var _real_height=_w_wrapper_height+_current_y;
_real_width=parseInt(_real_width);
_real_height=parseInt(_real_height);
resizeWindowByWindowSize(_w_wrapper_width,_real_height);
$("#show_xy").text("real height 为："+_real_height);
});
$(document).mouseup(function()
{
$(this).unbind("mousemove");
$("#show_xy").text("拖动结束");
$(this).unbind("mouseup");
// resizeWindowByWindowSize(1000,600);
})
});
}
BottomEdegeResize();
【ok，至此，我们已经成功编写一个可以拖放，可以自行调节尺寸的窗体了，下面我们将这个作为蓝本，编写一个plugin】