【前端插件】弹窗插件的编写【一】---编写一个窗体蓝本

最新推荐文章于 2022-07-15 16:24:20 发布

码农下的天桥

最新推荐文章于 2022-07-15 16:24:20 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/cdnight/article/details/9002543

版权

最近要对一个类似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】