【前端插件】弹窗插件的编写【一】---编写一个窗体蓝本
来源：互联网 发布：四川省广电网络 编辑：程序博客网 时间：2024/05/16 01:53
最近要对一个类似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结构】
<div class="aero-window-wrapper"> <div class="aero-window"> <!--标题栏--> <div class="aero-window-title" > <div class="ui-aero-window-left-top-title_conner"></div> <div class="ui-aero-window-middle-title-content"> <img src="/content/icons/48x48/pie_chart1_48.png" class="ui-title-icon"/> <div class="ui-title-words">这里是应用程序</div> <div class="ui-aero-window-right-top-buttons-wrapper" > <!--css 按钮 组--> <a class="ui_min" component="top_button" href="javascript:void(0);" title="最小化" style="display: inline-block;"> <b class="ui_min_b"></b></a> <a class="ui_max" component="top_button" href="javascript:void(0);" title="最大化" style="display: inline-block;"> <b class="ui_max_b"></b></a> <a class="ui_res" component="top_button" href="javascript:void(0);" title="还原" style="display: inline-block;"><b class="ui_res_b"></b> <b class="ui_res_t"></b></a> <a class="ui_close" component="top_button" href="javascript:void(0);" title="关闭(esc键)" style="display: inline-block;">×</a> <!--css 按钮 组结束--> </div> <div style="clear: both"></div> </div> <div class="ui-aero-window-right-top-title_conner"></div> </div> <!--标题栏结束--> <!--主要窗体内容--><div class="aero-window-main-content"> <div class="ui-window-left-edege"></div> <div class="ui-window-body-content"></div> <div class="ui-window-right-edege"></div> <div style="clear: both"></div></div> <!--主要窗体内容结束--> <!--窗体footer--><div class="aero-window-footer"> <div class="ui-left-bottom-conner"></div> <div class="ui-center-footer-body"></div> <div class="ui-right-bottom-conner"></div> <div style="clear: both"></div></div> <!--窗体footer结束--> </div>
【大约外表】
【这个外表是已经经过各个部件计算之后的样子】
虾米昂说一说如何解决窗口必须要最大化，最小化及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代码及效果示意图：
<!DOCTYPE html><html><head> <title></title> <link type="text/css" rel="stylesheet" href="skin/iblue.css"/> <link type="text/css" rel="stylesheet" href="skin/new_iblue.css"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="/content/scripts/jquery-1.7.1.js"></script> <!--jqueryUI，这里主要用到了拖曳归位功能--> <link rel="stylesheet" href="/content/UI/jqueryUI/development-bundle/themes/base/jquery.ui.all.css" /> <script type="text/javascript" src="/content/UI/jqueryUI/js/jquery-ui-1.8.17.custom.min.js"></script></head><body style=" background: yellow;"><div style="position: absolute; left:0px; top: 0px; visibility: visible; width: 314px; z-index: 1977; display: none;"> <table class="ui_border ui_state_visible"><tbody><tr><td class="ui_lt"></td> <td class="ui_t"></td><td class="ui_rt"></td></tr> <tr><td class="ui_l"></td><td class="ui_c"> <div class="ui_inner"><table class="ui_dialog"> <tbody><tr><td colspan="2"> <div class="ui_title_bar"> <div class="ui_title" unselectable="on" style="cursor: move;">视窗 </div> <div class="ui_title_buttons"> <a class="ui_min" href="javascript:void(0);" title="最小化" style="display: inline-block;"> <b class="ui_min_b"></b></a><a class="ui_max" href="javascript:void(0);" title="最大化" style="display: inline-block;"> <b class="ui_max_b"></b></a><a class="ui_res" href="javascript:void(0);" title="还原" style="display: inline-block;"><b class="ui_res_b"></b> <b class="ui_res_t"></b></a><a class="ui_close" href="javascript:void(0);" title="关闭(esc键)" style="display: inline-block;">×</a></div> </div></td></tr><tr><td class="ui_icon" style="display: none;"></td><td class="ui_main" style="width: 298px; height: 148px;"><div class="ui_content ui_state_full" style="padding: 10px;"> <div class="ui_loading"style="position: absolute; background-color: rgb(255, 255, 255); opacity: 0; z-index: 1; width: 298px; height: 148px; background-position: initial initial; background-repeat: initial initial;"> <span>loading...</span></div> <iframe name="JDG13700028589381" style="width: 100%; height: 100%; border: 0px none;" frameborder="0" src="content/content.html"></iframe></div></td></tr> <tr><td colspan="2"><div class="ui_buttons" style="display: none;"></div> </td></tr></tbody></table></div></td><td class="ui_r"></td></tr> <tr><td class="ui_lb"></td><td class="ui_b"></td><td class="ui_rb" style="cursor: se-resize;"></td></tr></tbody> </table></div><div style="left:200px; top: 0px; visibility: visible; position: absolute; width: auto; z-index: 1980; display: none; cursor: move;" class=""> <table class="ui_border ui_state_visible ui_state_focus"><tbody><tr><td class="ui_lt"> </td><td class="ui_t"></td><td class="ui_rt"></td></tr><tr> <td class="ui_l"></td><td class="ui_c"><div class="ui_inner"><table class="ui_dialog"><tbody><tr><td colspan="2"> <div class="ui_title_bar"><div class="ui_title" unselectable="on" style="cursor: move;">视窗 </div> <div class="ui_title_buttons"><a class="ui_min" href="javascript:void(0);" title="最小化" style="display: inline-block;"> <b class="ui_min_b"></b></a><a class="ui_max" href="javascript:void(0);" title="最大化" style="display: inline-block;"> <b class="ui_max_b"></b></a><a class="ui_res" href="javascript:void(0);" title="还原" style="display: inline-block;"><b class="ui_res_b"></b><b class="ui_res_t"></b></a><a class="ui_close" href="javascript:void(0);" title="关闭(esc键)" style="display: inline-block;">×</a></div></div></td></tr><tr><td class="ui_icon" style="display: none;"></td><td class="ui_main" style="width: auto; height: auto;"><div class="ui_content" style="padding: 10px;">hello world!</div></td></tr><tr><td colspan="2"><div class="ui_buttons" style=""><input type="button" value="同意" class="ui_state_highlight"><input type="button" value="不同意"><input type="button" value="无效按钮" disabled=""><input type="button" value="关闭我"></div></td></tr></tbody></table></div></td><td class="ui_r"></td></tr><tr><td class="ui_lb"></td><td class="ui_b"></td><td class="ui_rb" style="cursor: se-resize;"></td></tr></tbody></table></div><h1 id="show_xy">显示拖曳结果。。。</h1><h1>正在修正。</h1><div class="aero-window-wrapper"> <div class="aero-window"> <!--标题栏--> <div class="aero-window-title" > <div class="ui-aero-window-left-top-title_conner"></div> <div class="ui-aero-window-middle-title-content"> <img src="/content/icons/48x48/pie_chart1_48.png" class="ui-title-icon"/> <div class="ui-title-words">这里是应用程序</div> <div class="ui-aero-window-right-top-buttons-wrapper" > <!--css 按钮 组--> <a class="ui_min" component="top_button" href="javascript:void(0);" title="最小化" style="display: inline-block;"> <b class="ui_min_b"></b></a> <a class="ui_max" component="top_button" href="javascript:void(0);" title="最大化" style="display: inline-block;"> <b class="ui_max_b"></b></a> <a class="ui_res" component="top_button" href="javascript:void(0);" title="还原" style="display: inline-block;"><b class="ui_res_b"></b> <b class="ui_res_t"></b></a> <a class="ui_close" component="top_button" href="javascript:void(0);" title="关闭(esc键)" style="display: inline-block;">×</a> <!--css 按钮 组结束--> </div> <div style="clear: both"></div> </div> <div class="ui-aero-window-right-top-title_conner"></div> </div> <!--标题栏结束--> <!--主要窗体内容--><div class="aero-window-main-content"> <div class="ui-window-left-edege"></div> <div class="ui-window-body-content"></div> <div class="ui-window-right-edege"></div> <div style="clear: both"></div></div> <!--主要窗体内容结束--> <!--窗体footer--><div class="aero-window-footer"> <div class="ui-left-bottom-conner"></div> <div class="ui-center-footer-body"></div> <div class="ui-right-bottom-conner"></div> <div style="clear: both"></div></div> <!--窗体footer结束--> </div> <script type="text/javascript"> 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); function dragWindow(){ $(EL_Window_Title).mousedown(function(e){ $(this).css("cursor","move"); var _wrapper_offset=$(EL_Window_Wrapper).offset(); var _x = e.pageX - _wrapper_offset.left;//获得鼠标指针离DIV元素左边界的距离 _x=parseInt(_x); var _y = e.pageY - _wrapper_offset.top;//获得鼠标指针离DIV元素上边界的距离 _y=parseInt(_y); $(document).bind("mousemove",function(ev){ var _off_x= ev.pageX-_x; var _off_y=ev.pageY-_y; _off_x=parseInt(_off_x); _off_y=parseInt(_off_y); $("#show_xy").text("offset："+_off_x+"x"+_off_y); $(EL_Window_Wrapper).css({ left:_off_x+"px", top:_off_y+"px" }); }); }); $(document).mouseup(function() { $(EL_Window_Title).css("cursor","default"); $(this).unbind("mousemove"); $("#show_xy").text("拖动结束"); resizeWindowByWindowSize(1000,600); }) } dragWindow(); </script></div></body></html>【效果示意图】
【窗口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】
- 【前端插件】弹窗插件的编写【一】---编写一个窗体蓝本
- 【前端插件】弹窗插件的编写【二】---根据蓝本编写插件
- 【前端】jq插件的编写
- 自己动手编写一个VS插件（一）
- 自己动手编写一个VS插件（一）
- 编写一个webpack插件
- 【前端】jquery如何编写插件？
- 利用jQuery编写一个简单的插件
- 编写一个符合国情的日期插件
- 编写一个符合国情的日期插件
- 编写一个符合国情的日期插件
- 编写一个符合国情的日期插件
- 编写一个符合国情的日期插件
- 编写一个键盘翻页的Chrome插件
- 3DMAX导入插件的编写(一)
- 编写的MSWord插件
- jquery插件的编写
- Wireshark插件的编写
- 软件工程 电子书 免费 下载
- PHP编程之旅----三问
- UVA 10783 - Odd Sum
- C++第14周项目1 - 动物怎么叫
- 详解基于STM32的keil4 MDK 软件仿真输出IO口的波形图！
- 【前端插件】弹窗插件的编写【一】---编写一个窗体蓝本
- STC89C52串口的复用
- 整数的所有不同分割数目
- 毕业求职
- 世纪末的星期
- java 线程同步
- HDU-2046骨牌铺方格
- busybox源码剖析(1)
- 【JAX-WS入门系列】第08章_与Spring集成以及获取ServletAPI
