【前端插件】弹窗插件的编写【二】---根据蓝本编写插件
2013-06-01 18:20
239 查看
ok,将它与aero window 结合然后再添加一些方法,下面就直接放代码,因为这个代码是不停改出来的。
ie6,7,8,ff上面没问题,chrome上面有一像素差距问题。
结合我目前做的仿windows 的erp后台,效果如下:
【ps:拖动的时候假如是iframe的内容的话会卡起来的,解决方案:将iframe所在div设置隐藏,然后再拖动。】
还真的挺有满足感的,但是各种小问题不断,还需要努力完善整个仿window平台。
ie6,7,8,ff上面没问题,chrome上面有一像素差距问题。
/*该插件是对AeroWindow的封装,必须先添加JSHashtable,jquery ui,easing,Aerowindow的文件*/ $.AeroMgr={ AeroObject:function(){ var _options={}; var _windowElement=null; var EL_BTNMin = ""; var EL_BTNMax = ""; var EL_BTNReg = ""; var EL_BTNClose = ""; var EL_Window_Wrapper=""; var EL_Window_Title=""; var EL_Window_lt_conner=""; var EL_Window_rt_conner=""; var EL_Window_t_title=""; var EL_Window_Right_Top_WinButtonWrapper=""; var EL_Window_Center_Top_WinTitleWrapper= ""; var EL_Window_Left_Top_WinTitleIcon= ""; var EL_Window_ContentWrapper=""; var EL_Window_Content=""; var EL_Window_Footer=""; var EL_Window_Footer_Body=""; var EL_Window_LeftEdege=""; var EL_Window_RightEdege=""; var EL_Window_Content_BG=""; var __dialogTpl =''; function _setOptions(Options){ _options=Options; } this.setOption=function(Options){ _setOptions(Options); } this.getWindowStatus=function(){ return _options.WindowStatus; } this.getWindowWrapper=function(){ return EL_Window_Wrapper; } this.getWindowID=function(){ return _options.WindowID; } this.getWindowCategory=function(){ return _options.WindowCategory; } 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; _win_width=parseInt(_win_width); _win_height=parseInt(_win_height); EL_Window_Wrapper.css({ width:_win_width+"px", height:_win_height+"px" }); //--计算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(){ var str_disp=$(this).css("display"); if(str_disp=="none"){} else{ _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 }); EL_Window_Content_BG.css({ width:_content_width, height:_content_height }); } /* * 最大化窗体 * */ //Window Functions ---------------------------------------------------- function _MaximizeWindow() { if(_options.beforeMaximize()==true){} else{ return; } EL_BTNMax.css('display', 'none'); EL_BTNReg.css('display', 'inline-block'); EL_Window_Content.css("display","block"); EL_Window_Wrapper.css({ left:0, top:0 }); _resizeWindowByWindowSize($(_options.screenElement).width(),$(_options.screenElement).height()); _options.WindowStatus = 'maximized'; return(false); } this.MaximizeWindow=function(){ _MaximizeWindow(); } /* * 最小化窗口 * */ function _MinimizeWindow() { if(_options.beforeMinimize()==true){} else{ return; } EL_BTNReg.css('display', 'inline-block'); EL_BTNMax.css('display', 'none'); EL_Window_Content.css("display","none"); $(EL_Window_Wrapper).css({ left:_options.WindowPositionLeft, top:_options.WindowPositionTop }); _resizeWindow(_options.WindowMinWidth,_options.WindowMinHeight); _options.WindowStatus = 'minimized'; return(false); } this.MinimizeWindow=function(){ _MinimizeWindow(); } /* * 恢复窗口 * */ function _RegularWindow() { if(_options.beforeRegular()==true){} else{ return; } EL_BTNMax.css('display', 'inline-block'); EL_BTNReg.css('display', 'none'); EL_Window_Content.css("display","block"); _resizeWindow(_options.WindowWidth,_options.WindowHeight); $(EL_Window_Wrapper).css({ left:_options.WindowPositionLeft, top:_options.WindowPositionTop }); _options.WindowStatus = 'regular'; _options.afterRegular(); return(false); } this.RegularWindow=function(){ _RegularWindow(); } /* * focus窗体。 * */ function _focusWindow(){ var biggestZindex=0; var _myZindex=0; var _real_category_key="category_default"; if(_options.WindowCategory==undefined|| $.trim(_options.WindowCategory)==""){} else{ _real_category_key="category_"+_options.WindowCategory; } var _categoryListHash= new JSHashTable(); _categoryListHash=$.AeroMgr.Cache.getItem(_real_category_key); if(_categoryListHash==undefined){ return; } var _aero_obj=new $.AeroMgr.AeroObject(); var _hs_container=new JSHashTable(); _hs_container=_categoryListHash.getHashTable(); for(var key1 in _categoryListHash.getHashTable()){ _aero_obj=_hs_container[key1]; var c_z_index= _aero_obj.getWindowWrapper().css("z-index"); c_z_index=parseInt(c_z_index); if(key1==_options.WindowID){ _myZindex=c_z_index; } if(c_z_index>biggestZindex&&key1!=_options.WindowID){ biggestZindex=c_z_index; } } if(_myZindex>biggestZindex){ } else{ $(EL_Window_Wrapper).css("z-index",biggestZindex+1); } } function _dragWindow(){ $(EL_Window_Title).mousedown(function(e){ _coverContent(); $(document).unbind("mousemove mouseup"); $(this).css("cursor","move"); var _screen_limit_width=$(_options.screenElement).width(); var _screen_limit_height=$(_options.screenElement).height(); var _limit_left=0; var _limit_right=_screen_limit_width-$(EL_Window_Wrapper).width()/2; _limit_right=parseInt(_limit_right); var _limit_top=0; var _limit_bottom=_screen_limit_height-$(EL_Window_Wrapper).height()/2; _limit_bottom=parseInt(_limit_bottom); /*当前窗口相关参数*/ 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); /*判断边界*/ if(_real_locate_x<_limit_left||_real_locate_x>_limit_right||_real_locate_y<_limit_top||_real_locate_y>_limit_bottom){ } else{ $(EL_Window_Wrapper).css({ left:_real_locate_x+"px", top:_real_locate_y+"px" }); _options.WindowPositionLeft=_real_locate_x; _options.WindowPositionTop=_real_locate_y; } }); $(document).mouseup(function() { $(EL_Window_Title).css("cursor","default"); $(document).unbind("mousemove"); $("#show_xy").text("拖动结束"); // $("#show_xy").text("第一个unbind"); _showContent(); $(document).unbind("mouseup"); }) ; }); } function _LeftEdegeResize(){ $(EL_Window_LeftEdege).mousedown(function(e){ $(document).unbind("mousemove mouseup"); _coverContent(); /*当前窗口相关参数*/ 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" }); if(_options.WindowMinWidth<_real_width){ _resizeWindowByWindowSize(_real_width,_w_wrapper_height); _options.WindowPositionLeft=_real_locate_x; _options.WindowWidth=_real_width; } }); $(document).mouseup(function() { $(this).unbind("mousemove"); $("#show_xy").text("拖动结束"); $(this).unbind("mouseup"); _showContent(); // resizeWindowByWindowSize(1000,600); }) }); } function _coverContent(){ var _zindex_str1=$(EL_Window_Content).css("z-index"); $(EL_Window_Content).css("display","none"); $(EL_Window_Content_BG).css({ visibility:"visible" }); _zindex_str1=parseInt(_zindex_str1)+1; $(EL_Window_Content_BG).css("z-index",_zindex_str1); } function _showContent(){ var _zindex_str1=$(EL_Window_Content).css("z-index"); $(EL_Window_Content_BG).css("visibility","visible"); _zindex_str1=parseInt(_zindex_str1)-1; $(EL_Window_Content_BG).css("z-index",_zindex_str1); $(EL_Window_Content).css("display","block"); } function _RightEdegeResize(){ $(EL_Window_RightEdege).mousedown(function(e){ _coverContent(); $(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); if(_options.WindowMinWidth<_real_width){ _resizeWindowByWindowSize(_real_width,_w_wrapper_height); _options.WindowWidth=_real_width; } }); $(document).mouseup(function() { $(this).unbind("mousemove"); $("#show_xy").text("拖动结束"); $(this).unbind("mouseup"); _showContent(); // resizeWindowByWindowSize(1000,600); }) }); } /*底部resize事件*/ function _BottomEdegeResize(){ $(EL_Window_Footer_Body).mousedown(function(e){ $(document).unbind("mousemove mouseup"); _coverContent(); /*当前窗口相关参数*/ 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); /*判断是否在最小高度*/ if(_real_height>_options.WindowMinHeight){ _resizeWindowByWindowSize(_w_wrapper_width,_real_height); _options.WindowHeight=_real_height; } $("#show_xy").text("real height 为:"+_real_height); }); $(document).mouseup(function() { $(this).unbind("mousemove"); $("#show_xy").text("拖动结束"); $(this).unbind("mouseup"); _showContent(); // resizeWindowByWindowSize(1000,600); }) }); } function _isCurrentWindow(){ var biggestZindex=0; var _myZindex=0; var _real_category_key="category_default"; if(_options.WindowCategory==undefined|| $.trim(_options.WindowCategory)==""){} else{ _real_category_key="category_"+_options.WindowCategory; } var _categoryListHash= new JSHashTable(); _categoryListHash=$.AeroMgr.Cache.getItem(_real_category_key); if(_categoryListHash==undefined){ return true; } var _aero_obj=new $.AeroMgr.AeroObject(); var _hs_container=new JSHashTable(); _hs_container=_categoryListHash.getHashTable(); for(var key1 in _categoryListHash.getHashTable()){ _aero_obj=_hs_container[key1]; var c_z_index= _aero_obj.getWindowWrapper().css("z-index"); c_z_index=parseInt(c_z_index); if(key1==_options.WindowID){ _myZindex=c_z_index; } if(c_z_index>biggestZindex&&key1!=_options.WindowID){ biggestZindex=c_z_index; } } if(_myZindex>biggestZindex){ return true; } else{ return false; } } this.focusWindow=function(){ _focusWindow(); } this.isCurrentWindow=function(){ return _isCurrentWindow(); } this.CloseWindow=function(){ //Unregister this Window if(_options.beforeClose()==false){ return; } EL_Window_Wrapper.remove(); $.AeroMgr.removeAeroObject(_options.WindowID,_options.WindowCategory); _options.afterClose(); return(false); } function _newWindow(){ if($.AeroMgr.hasWindow(_options.WindowID,_options.WindowCategory)==true){ _focusWindow(); return; } var _html_str=""; if(_options.contentType=="html"){ _html_str=_options.content; } else if(_options.contentType=="iframe"){ _html_str= "" +'<iframe width="100%" height="100%" frameborder="0" scrolling="auto" style=" border-style:none; margin: 0 auto;" src="'+_options.content+'"></iframe>'; // _html_str } else if(_options.contentType=="dom"){ _html_str= "" +$(_options.content).html() ; } //--将这些东西添加进去。 var _aero_obj=new $.AeroMgr.AeroObject(); _aero_obj.setOption(_options); var _realCategoryName="category_default"; if($.AeroMgr.Cache.Contains(_realCategoryName)==false){ $.AeroMgr.Cache.Add(_realCategoryName,new JSHashTable()); } //--算了,我自己重新写一个窗体 //BTN --- var o=_options; var WinIconHtml=""; if(_options.WindowIcon!=undefined&& $.trim(_options.WindowIcon)!=""){ WinIconHtml='<img src="'+_options.WindowIcon+'" class="ui-title-icon"/>'; } /*是否运行最小化*/ var WinMinBtn=''; if (o.WindowMinimize) { WinMinBtn = '<a class="ui_min" component="top_button" href="javascript:void(0);" title="最小化" style="display: inline-block;"><b class="ui_min_b"></b></a>'; } else { WinMinBtn = ''; } /*是否运行最大化*/ var WinMaxBtn=''; var WinRegBtn=''; if (o.WindowMaximize) { WinMaxBtn = '<a class="ui_max" component="top_button" href="javascript:void(0);" title="最大化" style="display: inline-block;"><b class="ui_max_b"></b></a>'; WinRegBtn = '<a class="ui_res" component="top_button" href="javascript:void(0);" title="还原" style="display: none;"><b class="ui_res_b"></b><b class="ui_res_t"></b></a>'; } else { WinMaxBtn = ''; WinRegBtn = ''; } /*是否允许关闭*/ //BTN --- var WinCloseBtn=""; if (o.WindowClosable) { WinCloseBtn = '<a class="ui_close" component="top_button" href="javascript:void(0);" title="关闭(esc键)" style="display: inline-block;">×</a>'; } else { WinCloseBtn = ''; } /*左右两侧的间隔*/ var WinBtnLeftedge=""; var WinBtnRightedge=""; var WinTotalHtml=''; WinTotalHtml='<div class="aero-window-wrapper" windowid="'+ o.WindowID +'" windowcategory="'+ o.WindowCategory+'" style="visibility: hidden; position: absolute; width:auto;left:'+_options.WindowPositionLeft+'px;top:'+ _options.WindowPositionTop+'px; ">'+ '<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">'+ WinIconHtml + '<div class="ui-title-words">'+_options.WindowTitle+'</div>'+ '<div class="ui-aero-window-right-top-buttons-wrapper" >'+ '<!--css 按钮 组-->'+ WinMinBtn+ WinMaxBtn+ WinRegBtn+ WinCloseBtn+ '<!--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-content-background"></div>'+ '<div class="ui-window-body-content">'+_html_str+'</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>'+ '</div>'; $(WinTotalHtml).appendTo(o.appendToElement); //Window Objects ------------------------------------------------------ EL_Window_Wrapper=$("div.aero-window-wrapper[windowid='"+ o.WindowID+"'][windowcategory='"+ o.WindowCategory+"']"); EL_Window_Title=EL_Window_Wrapper.find("div.aero-window-title"); EL_Window_lt_conner=EL_Window_Title.find("div.ui-aero-window-left-top-title_conner"); EL_Window_rt_conner=EL_Window_Title.find("div.ui-aero-window-right-top-title_conner"); EL_Window_t_title=EL_Window_Title.find("div.ui-aero-window-middle-title-content"); EL_Window_Right_Top_WinButtonWrapper=EL_Window_Title.find("div.ui-aero-window-right-top-buttons-wrapper"); EL_Window_Center_Top_WinTitleWrapper= EL_Window_Title.find(".ui-title-words"); EL_Window_Left_Top_WinTitleIcon= EL_Window_Title.find(".ui-title-icon"); EL_Window_ContentWrapper=EL_Window_Wrapper.find("div.aero-window-main-content"); EL_Window_Content=EL_Window_ContentWrapper.find("div.ui-window-body-content"); EL_Window_Footer=EL_Window_Wrapper.find("div.aero-window-footer"); EL_Window_Footer_Body=EL_Window_Footer.find(".ui-center-footer-body"); EL_Window_LeftEdege=$(EL_Window_Wrapper).find(".ui-window-left-edege"); EL_Window_RightEdege=$(EL_Window_Wrapper).find(".ui-window-right-edege"); EL_Window_Content_BG=$(EL_Window_Wrapper).find("div.ui-window-content-background"); EL_BTNMin = $(EL_Window_Title).find("a.ui_min"); EL_BTNMax = $(EL_Window_Title).find("a.ui_max"); EL_BTNReg = $(EL_Window_Title).find("a.ui_res"); EL_BTNClose = $(EL_Window_Title).find("a.ui_close"); _resizeWindowByContentSize(_options.WindowWidth,_options.WindowHeight); _focusWindow(); $(EL_Window_Wrapper).css("visibility","visible"); //事件绑定 ------------------------------------ if (o.WindowMaximize) { $(EL_Window_Title).dblclick(function() { switch (o.WindowStatus) { case 'regular': _MaximizeWindow(); break; case 'maximized': _RegularWindow(); break; case 'minimized': _RegularWindow(); break; default: break; } }); } else { $(EL_Window_Title).dblclick(function() { switch (o.WindowStatus) { case 'maximized': _RegularWindow(); break; case 'minimized': _RegularWindow(); break; default: break; } }); } //User Interaction - Minimize Button EL_BTNMin.click(function () { _focusWindow(); _MinimizeWindow(); return false; }); //User Interaction - Maximize Button EL_BTNMax.click(function () { _focusWindow(); _MaximizeWindow(); return false; }); //User Interaction - Regular Button EL_BTNReg.click(function () { _focusWindow(); _RegularWindow(); return false; }); //Close Button EL_BTNClose.click(function () { //Unregister this Window if(_options.beforeClose()==false){ return; } EL_Window_Wrapper.remove(); $.AeroMgr.removeAeroObject(_options.WindowID,_options.WindowCategory); _options.afterClose(); return(false); }); //Support Dragging --支持拖曳---------------------------------------------------- if (o.WindowDraggable){ _dragWindow(); } //Support Focus on Window by Click,点击的时候就关注 ------------------------------------ EL_Window_Title.click(function (){ _focusWindow(); }); //Support Window Resizing--支持重置大小 --------------------------------------------- if (o.WindowResizable){ _LeftEdegeResize(); _RightEdegeResize(); _BottomEdegeResize(); } } this.newWindow=function(){ _newWindow(); } }, Cache:{}, openWindow:function(Options){ var defaults = { WindowTitle: null, WindowIcon:"", /*窗口的icon图标。*/ WindowPositionTop: 60, /* Posible are pixels or 'center' */ WindowPositionLeft: 10, /* Posible are pixels or 'center' */ WindowWidth: 300, /* Only pixels */ WindowHeight: 300, /* Only pixels */ WindowMinWidth: 250, /* Only pixels */ WindowMinHeight: 0, /* Only pixels */ WindowResizable: true, /* true, false*/ WindowMaximize: true, /* true, false*/ WindowMinimize: true, /* true, false*/ WindowClosable: true, /* true, false*/ WindowDraggable: true, /* true, false*/ WindowStatus: 'regular', /* 'regular', 'maximized', 'minimized' */ beforeMinimize:function(){return true;},/*注意,这个是最小化之前的操作,假如返回的是true,那么就继续执行,否则,终止操作*/ afterMinimize:function(){}, /*最小化之后的操作*/ beforeMaximize:function(){return true}, /*注意,这个是最大化之前的操作,假如返回的是true,那么就继续执行,否则,终止操作*/ afterMaximize:function(){}, /*最大化之后的操作*/ beforeClose:function(){return true}, /*注意,这个是关闭之前的操作,假如返回的是true,那么就继续执行,否则,终止操作*/ afterClose:function(){}, /*关闭之后的操作*/ beforeRegular:function(){ return true;}, /*恢复窗口之前,假如是false,则中断操作*/ afterRegular:function(){}, /*恢复窗口之后的后续操作*/ /*下面就是为了web操作系统而特定添加的参数*/ WindowID:'', //--每一个WIndow的唯一ID。 WindowCategory:"default", /*该window的分类,默认为default*/ contentType:"html", /*显示的内容类型,有: html,dom,iframe,默认为html,假如是dom, 那么就会将dom复制一份然后显示出来,假如是iframe,那么就会自动生成iframe*/ content:"", /*根据showType不同而不一样,假如是html,那么就直接是html了,假如是dom,那么就是$("xx")或者选择符号形式,假如是iframe,那么就是url形式了。*/ appendToElement:$('body'), /*这里设定将新建的窗体原始对象添加到什么地方,默认是body,但是当需要用到多种屏幕多个窗体的时候,就必须设置为当前屏幕对象。*/ screenElement:$(window) /*这里设定作为参考的屏幕元素,通常以 window为屏幕标准。*/ }; var _options = $.extend(defaults, Options); if(_options.WindowCategory==undefined|| $.trim(_options.WindowCategory)==""){ _options.WindowCategory="default"; } var _realCategoryName="category_"+_options.WindowCategory; var _aero=new $.AeroMgr.AeroObject(); var hasWindow1= $.AeroMgr.hasWindow(_options.WindowID,_options.WindowCategory); if(hasWindow1==true){ //--该窗口已经存在了,那么就不进行任何事情。 _aero= $.AeroMgr.getAeroObject(_options.WindowID,_options.WindowCategory); _aero.focusWindow(); return; } _aero.setOption(_options); _aero.newWindow(); $.AeroMgr.saveAeroObject(_aero); }, hasWindow:function(WindowID,WindowCategory){ var _realCategoryName="category_default"; if(WindowCategory==undefined|| $.trim(WindowCategory)==""){} else{ _realCategoryName="category_"+WindowCategory; } if($.AeroMgr.Cache.Contains(_realCategoryName)==true){ var my_hash=new JSHashTable(); my_hash= $.AeroMgr.Cache.getItem(_realCategoryName); if(my_hash!=undefined&&my_hash!=null){ return my_hash.Contains(WindowID); } } return false; }, getAeroObject:function(WindowID,WindowCategory){ var _realCategoryName="category_default"; if(WindowCategory==undefined|| $.trim(WindowCategory)==""){} else{ _realCategoryName="category_"+WindowCategory; } if($.AeroMgr.Cache.Contains(_realCategoryName)==true){ var my_hash=new JSHashTable(); my_hash= $.AeroMgr.Cache.getItem(_realCategoryName); if(my_hash!=undefined&&my_hash!=null){ if( my_hash.Contains(WindowID)==true){ return my_hash.getItem(WindowID); } } } return null; } , saveAeroObject:function(AeroObjc){ var _aero1=new $.AeroMgr.AeroObject(); _aero1=AeroObjc; if($.AeroMgr.hasWindow(_aero1.getWindowID(),_aero1.getWindowCategory())){} else{ var _realCategoryName="category_default"; if(_aero1.getWindowCategory()==undefined|| $.trim(_aero1.getWindowCategory())==""){} else{ _realCategoryName="category_"+_aero1.getWindowCategory(); } if($.AeroMgr.Cache.Contains(_realCategoryName)==false){ $.AeroMgr.Cache.Add(_realCategoryName,new JSHashTable()); } var my_hash=new JSHashTable(); my_hash= $.AeroMgr.Cache.getItem(_realCategoryName); if(my_hash!=undefined&&my_hash!=null){ $.AeroMgr.Cache.getItem(_realCategoryName).Add(_aero1.getWindowID(),_aero1); } return true; } } , removeAeroObject:function(WindowID,WindowCategory){ if($.AeroMgr.hasWindow(WindowID,WindowCategory)==true){ var _realCategoryName="category_default"; if(WindowCategory==undefined|| $.trim(WindowCategory)==""){} else{ _realCategoryName="category_"+WindowCategory; } if($.AeroMgr.Cache.Contains(_realCategoryName)==false){ $.AeroMgr.Cache.Add(_realCategoryName,new JSHashTable()); } var my_hash=new JSHashTable(); my_hash= $.AeroMgr.Cache.getItem(_realCategoryName); if(my_hash!=undefined&&my_hash!=null){ $.AeroMgr.Cache.getItem(_realCategoryName).Remove(WindowID); } } } }; /*初始化相关参数*/ $.AeroMgr.Cache=new JSHashTable(); $.AeroMgr.Cache.Add("category_default",new JSHashTable());
结合我目前做的仿windows 的erp后台,效果如下:
【ps:拖动的时候假如是iframe的内容的话会卡起来的,解决方案:将iframe所在div设置隐藏,然后再拖动。】
还真的挺有满足感的,但是各种小问题不断,还需要努力完善整个仿window平台。
相关文章推荐
- 【前端插件】弹窗插件的编写【一】---编写一个窗体蓝本
- 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解
- jQuery弹簧插件编写基础之“又见弹窗”
- 【前端】jq插件的编写
- jQuery弹簧插件编写基础之“又见弹窗”
- 前端,json解析插件 ,图片弹窗插件
- JS编写简单的弹窗插件(含有demo和源码)
- 【前端】jquery如何编写插件?
- jQuery插件编写基础之“又见弹窗”
- web前端之锋利的jQuery十:编写jQuery插件
- web前端弹窗插件收集
- 前端弹窗插件,layer
- 【php】配合Ajax与Json,根据MVC思想,无插件,完美兼容IE6,编写一个获取动态系统
- 采用easyX插件进行C语言编写的贪吃蛇,自带播放音乐
- 网页前端瀑布流布局效果Jquery插件“Masonry”
- 用FireBreath来编写跨浏览器插件
- Unity3D编辑器插件编写
- 提高前端开发水平的30个新鲜实用的jquery插件推荐
- jQuery - 编写jQuery插件的基本形式(上)
- 【jQuery基础学习】08 编写自定义jQuery插件