(function($){ function removeNode(node){ node.each(function(){ $(this).remove(); if ($.browser.msie){ this.outerHTML = ''; } }); } function setSize(target, param){ var opts = $.data(target, 'fwwindow').options; if(opts.left<0||opts.top<0){ opts.left=0; opts.top=0; } var panel = $.data(target, 'fwwindow').fwpanel; var pheader = panel.find('>div.panel-header'); var pbody = panel.find('>div.panel-body'); if (param){ if (param.width) opts.width = param.width; if (param.height) opts.height = param.height; if (param.left != null) opts.left = param.left; if (param.top != null) opts.top = param.top; } if (opts.fit == true){ var p = panel.parent(); if(p.attr("tagName")=="FORM"){ var pp = p.parent(); opts.width = pp.width()-20; opts.height = pp.height(); }else{ opts.width = p.width()-20; opts.height = p.height(); } } panel.css({ left: opts.left, top: opts.top }); panel.css(opts.style); panel.addClass(opts.cls); pheader.addClass(opts.headerCls); pbody.addClass(opts.bodyCls); if (!isNaN(opts.width)){ if ($.boxModel == true){ panel.width(opts.width - (panel.outerWidth() - panel.width())); pheader.width(panel.width() - (pheader.outerWidth() - pheader.width())); pbody.width(panel.width() - (pbody.outerWidth() - pbody.width())); } else { panel.width(opts.width); pheader.width(panel.width()); pbody.width(panel.width()); } } else { panel.width('auto'); pbody.width('auto'); } if (!isNaN(opts.height)){ if ($.boxModel == true){ panel.height(opts.height - (panel.outerHeight() - panel.height())); pbody.height(panel.height() - pheader.outerHeight() - (pbody.outerHeight() - pbody.height())); } else { panel.height(opts.height); pbody.height(panel.height() - pheader.outerHeight()); } } else { pbody.height('auto'); } panel.css('height', null); CFW.oWin.fnResizeObject(target); //panel.find('>div.panel-body>div').triggerHandler('_resize'); } /** * create and initialize window, the window is created based on panel component */ function init(target, options){ var state = $.data(target, 'fwwindow'); var opts; if (state){ opts = $.extend(state.opts, options); } else { var t = $(target); opts = $.extend({}, $.fn.fwwindow.defaults, { title: t.attr('title'), collapsible: (t.attr('collapsible') ? t.attr('collapsible') == 'true' : undefined), minimizable: (t.attr('minimizable') ? t.attr('minimizable') == 'true' : undefined), maximizable: (t.attr('maximizable') ? t.attr('maximizable') == 'true' : undefined), closable: (t.attr('closable') ? t.attr('closable') == 'true' : undefined), closed: (t.attr('closed') ? t.attr('closed') == 'true' : undefined), shadow: (t.attr('shadow') ? t.attr('shadow') == 'true' : undefined), modal: (t.attr('modal') ? t.attr('modal') == 'true' : undefined), width: (parseInt(t.css('width')) || undefined), height: (parseInt(t.css('height')) || undefined), // left: (parseInt(t.css('left')) || undefined), // top: (parseInt(t.css('top')) || undefined), iconCls: t.attr('icon'), cls: 'fwwindow', headerCls: 'fwwindow-header', bodyCls: 'fwwindow-body', href: t.attr('href'), cache: (t.attr('cache') ? t.attr('cache') == 'true' : undefined), fit: (t.attr('fit') ? t.attr('fit') == 'true' : undefined), border: (t.attr('border') ? t.attr('border') == 'true' : undefined), noheader: (t.attr('noheader') ? t.attr('noheader') == 'true' : undefined), collapsed: (t.attr('collapsed') ? t.attr('collapsed') == 'true' : undefined), minimized: (t.attr('minimized') ? t.attr('minimized') == 'true' : undefined), maximized: (t.attr('maximized') ? t.attr('maximized') == 'true' : undefined) }, options); $(target).attr('title', ''); state = $.data(target, 'fwwindow', {options:opts}); }; var panel = $(target).addClass('panel-body').wrap('
').parent(); panel.bind('_resize', function(){ if (opts.fit == true){ setSize(target); } return false; }); panel.hide(); state.options = opts; state.fwpanel = panel; addHeader(target); setBorder(target); setSize(target); // create mask if (state.mask) state.mask.remove(); if (opts.modal == true){ state.mask = $('
').appendTo('body'); state.mask.css({ //zIndex: $.fn.fwwindow.defaults.zIndex--, width: getPageArea().width, height: getPageArea().height, display: 'none' }); } // create shadow if (state.shadow) state.shadow.remove(); if (opts.shadow == true){ state.shadow = $('
').insertAfter(state.fwpanel); state.shadow.css({ display: 'none' }); } // if require center the fwwindow initPostion(target); movePanel(target); if (state.options.closed == false){ openPanel(target); // open the fwwindow } } function initPostion(target){ var state = $.data(target, 'fwwindow'); //if (state.options.left == null){ var width = state.options.width; if (isNaN(width)){ width = state.fwpanel.outerWidth(); } state.options.left = ($(window).width() - width) / 2 + $(document).scrollLeft(); // } // if (state.options.top == null){ var height = state.options.height; if (isNaN(height)){ height = state.fwpanel.outerHeight(); } //获取窗口滚动条高度 var scrollTop=0; var doc = document, winp = window; while(winp = winp.parent){ if(winp == top){ break; } scrollTop=winp.document.documentElement.scrollTop; } if(scrollTop!=0){ state.options.top =scrollTop+100; }else{ state.options.top = ($(window).height() - height) / 2 + $(document).scrollTop(); } // } } function addHeader(target){ var opts = $.data(target, 'fwwindow').options; var panel = $.data(target, 'fwwindow').fwpanel; removeNode(panel.find('>div.panel-header')); if (opts.title && !opts.noheader){ var header = $('
'+opts.title+'
').prependTo(panel); if (opts.iconCls){ header.find('.panel-title').addClass('panel-with-icon'); $('
').addClass(opts.iconCls).appendTo(header); } var tool = $('
').appendTo(header); if (opts.closable){ $('
').appendTo(tool).bind('click', onClose); } if (opts.maximizable){ $('
').appendTo(tool).bind('click', onMax); } // if (opts.minimizable){ // $('
').appendTo(tool).bind('click', onMin); // } if (opts.collapsible){ $('
').appendTo(tool).bind('click', onToggle); } if (opts.tools){ for(var i=opts.tools.length-1; i>=0; i--){ var t = $('
').addClass(opts.tools[i].iconCls).appendTo(tool); if (opts.tools[i].handler){ t.bind('click', eval(opts.tools[i].handler)); } } } tool.find('div').hover( function(){$(this).addClass('panel-tool-over');}, function(){$(this).removeClass('panel-tool-over');} ); panel.find('>div.panel-body').removeClass('panel-body-noheader'); } else { panel.find('>div.panel-body').addClass('panel-body-noheader'); } function onToggle(){ if ($(this).hasClass('panel-tool-expand')){ expandPanel(target, true); } else { collapsePanel(target, true); } return false; } function onMin(){ minimizePanel(target); return false; } function onMax(){ if ($(this).hasClass('panel-tool-restore')){ restorePanel(target); } else { maximizePanel(target); } return false; } function onClose(){ closePanel(target); var opts = $.data(target, 'fwwindow').options; if (opts.onClose) { opts.onClose.apply(); } return false; } } /** * load content from remote site if the href attribute is defined */ function loadData(target){ var state = $.data(target, 'fwwindow'); if (state.options.href && (!state.isLoaded || !state.options.cache)){ state.isLoaded = false; var pbody = state.panel.find('>div.panel-body'); pbody.html($('
').html(state.options.loadingMessage)); pbody.load(state.options.href, null, function(){ if ($.parser){ $.parser.parse(pbody); } state.options.onLoad.apply(target, arguments); state.isLoaded = true; }); } } function openPanel(target, forceOpen){ var opts = $.data(target, 'fwwindow').options; var panel = $.data(target, 'fwwindow').fwpanel; var mask = $.data(target, 'fwwindow').mask; //fn.fwwindow.defaults.zIndex //为全部的深度 var deIndex = $.fn.fwwindow.defaults.zIndex; //重新获取窗口位置 initPostion(target); if(opts.modal==true){ mask.css({ display:'block', zIndex: opts.zIndex++ }); } panel.css({top:opts.top,zIndex: opts.zIndex++}); if(opts.zIndexdiv.panel-body'); var tool = panel.find('>div.panel-header .panel-tool-collapse'); if (tool.hasClass('panel-tool-expand')) return; body.stop(true, true); // stop animation // if (opts.onBeforeCollapse.call(target) == false) return; tool.addClass('panel-tool-expand'); if (animate == true){ body.slideUp('normal', function(){ opts.collapsed = true; //opts.onCollapse.call(target); }); } else { body.hide(); opts.collapsed = true; //opts.onCollapse.call(target); } } function movePanel(target, param){ var opts = $.data(target, 'fwwindow').options; var panel = $.data(target, 'fwwindow').fwpanel; if (param){ if (param.left != null) opts.left = param.left; if (param.top != null) opts.top = param.top; } panel.css({ left: opts.left, top: opts.top }); //opts.onMove.apply(target, [opts.left, opts.top]); } function expandPanel(target, animate){ var opts = $.data(target, 'fwwindow').options; var panel = $.data(target, 'fwwindow').fwpanel; var body = panel.find('>div.panel-body'); var tool = panel.find('>div.panel-header .panel-tool-collapse'); if (!tool.hasClass('panel-tool-expand')) return; body.stop(true, true); // stop animation //if (opts.onBeforeExpand.call(target) == false) return; tool.removeClass('panel-tool-expand'); if (animate == true){ body.slideDown('normal', function(){ opts.collapsed = false; //opts.onExpand.call(target); loadData(target); }); } else { body.show(); opts.collapsed = false; //opts.onExpand.call(target); loadData(target); } } function maximizePanel(target){ var opts = $.data(target, 'fwwindow').options; var panel = $.data(target, 'fwwindow').fwpanel; var tool = panel.find('>div.panel-header .panel-tool-max'); if (tool.hasClass('panel-tool-restore')) return; setComboxDef(target); tool.addClass('panel-tool-restore'); $.data(target, 'fwwindow').original = { width: opts.width, height: opts.height, left: opts.left, top: opts.top, fit: opts.fit }; opts.left = 0; opts.top = 0; opts.fit = true; setSize(target); opts.minimized = false; opts.maximized = true; setCombox(target); } function minimizePanel(target){ var opts = $.data(target, 'fwwindow').options; var panel = $.data(target, 'fwwindow').fwpanel; panel.hide(); opts.minimized = true; opts.maximized = false; } function restorePanel(target){ var opts = $.data(target, 'fwwindow').options; var panel = $.data(target, 'fwwindow').fwpanel; var tool = panel.find('>div.panel-header .panel-tool-max'); if (!tool.hasClass('panel-tool-restore')) return; setComboxDef(target); panel.show(); tool.removeClass('panel-tool-restore'); var original = $.data(target, 'fwwindow').original; opts.width = original.width; opts.height = original.height; opts.left = original.left; opts.top = original.top; opts.fit = original.fit; setSize(target); opts.minimized = false; opts.maximized = false; setCombox(target); } function setBorder(target){ var opts = $.data(target, 'fwwindow').options; var panel = $.data(target, 'fwwindow').fwpanel; if (opts.border == true){ panel.find('>div.panel-header').removeClass('panel-header-noborder'); panel.find('>div.panel-body').removeClass('panel-body-noborder'); } else { panel.find('>div.panel-header').addClass('panel-header-noborder'); panel.find('>div.panel-body').addClass('panel-body-noborder'); } } function setTitle(target, title){ $.data(target, 'fwwindow').options.title = title; $(target).panel('header').find('div.panel-title').html(title); } //设置下拉框的大小以及显示层 function setCombox(target){ //触发事件调整窗口内的控件 CFW.oWin.fnResizeObject(target); } //最小化下拉框的宽度 //因为不设置的化,窗口内的下拉框无法自动收缩 function setComboxDef(target){} $(window).unbind('.panel').bind('resize.panel', function(){ var layout = $('body.layout'); if (layout.length){ layout.layout('resize'); } else { $('body>div.panel').triggerHandler('_resize'); } }); /** * set fwwindow drag and resize property */ function setProperties(target){ var state = $.data(target, 'fwwindow'); state.fwpanel.draggable({ handle: '>div.panel-header>div.panel-title', disabled: state.options.draggable == false, onStartDrag: function(e){ if (state.mask) state.mask.css('z-index', $.fn.fwwindow.defaults.zIndex++); if (state.shadow) state.shadow.css('z-index', $.fn.fwwindow.defaults.zIndex++); var zIndex = $.fn.fwwindow.defaults.zIndex++; state.fwpanel.css('z-index', zIndex); state.options.zIndex = zIndex; setCombox(target); if (!state.proxy){ state.proxy = $('
').insertAfter(state.fwpanel); } state.proxy.css({ display:'none', zIndex: $.fn.fwwindow.defaults.zIndex++, left: e.data.left, top: e.data.top, width: ($.boxModel==true ? (state.fwpanel.outerWidth()-(state.proxy.outerWidth()-state.proxy.width())) : state.fwpanel.outerWidth()), height: ($.boxModel==true ? (state.fwpanel.outerHeight()-(state.proxy.outerHeight()-state.proxy.height())) : state.fwpanel.outerHeight()) }); setTimeout(function(){ if (state.proxy) state.proxy.show(); }, 500); }, onDrag: function(e){ state.proxy.css({ display:'block', left: e.data.left, top: e.data.top }); return false; }, onStopDrag: function(e){ state.options.left = e.data.left; if(e.data.top<20){ state.options.top = 20; }else{ state.options.top = e.data.top; } movePanel(target); state.proxy.remove(); state.proxy = null; } }); state.fwpanel.resizable({ disabled: state.options.resizable == false, onStartResize:function(e){ if (!state.proxy){ state.proxy = $('
').insertAfter(state.fwpanel); } state.proxy.css({ zIndex: $.fn.fwwindow.defaults.zIndex++, left: e.data.left, top: e.data.top, width: ($.boxModel==true ? (e.data.width-(state.proxy.outerWidth()-state.proxy.width())) : e.data.width), height: ($.boxModel==true ? (e.data.height-(state.proxy.outerHeight()-state.proxy.height())) : e.data.height) }); }, onResize: function(e){ state.proxy.css({ left: e.data.left, top: e.data.top, width: ($.boxModel==true ? (e.data.width-(state.proxy.outerWidth()-state.proxy.width())) : e.data.width), height: ($.boxModel==true ? (e.data.height-(state.proxy.outerHeight()-state.proxy.height())) : e.data.height) }); return false; }, onStopResize: function(e){ state.options.left = e.data.left; state.options.top = e.data.top; state.options.width = e.data.width; state.options.height = e.data.height; setSize(target); state.proxy.remove(); state.proxy = null; } }); } function getPageArea() { if (document.compatMode == 'BackCompat') { return { width: Math.max(document.body.scrollWidth, document.body.clientWidth), height: Math.max(document.body.scrollHeight, document.body.clientHeight) } } else { return { width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth), height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) } } } // when fwwindow resize, reset the width and height of the fwwindow's mask $(window).resize(function(){ $('.fwwindow-mask').css({ width: $(window).width(), height: $(window).height() }); setTimeout(function(){ $('.fwwindow-mask').css({ width: getPageArea().width, height: getPageArea().height }); }, 50); }); $.fn.fwwindow = function(options, param){ if (typeof options == 'string'){ switch(options){ case 'open': return this.each(function(){ openPanel(this); }); case 'close': return this.each(function(){ closePanel(this); }); case 'destroy': return this.each(function(){ destroyPanel(this); }); case 'toggle': return this.each(function(){ if($(this).hasClass('panel-tool-expand')){ expandPanel(this, true); } else { collapsePanel(this, true); } }); } return true; } options = options || {}; return this.each(function(){ init(this, options); setProperties(this); }); }; $.fn.fwwindow.defaults = { zIndex: 9000, draggable: true, resizable: true, shadow: true, modal: false, title: null, iconCls: null, width: 'auto', height: 'auto', left: null, top: null, cls: null, headerCls: null, bodyCls: null, style: {}, cache: true, fit: false, border: true, doSize: true, noheader: false, content: null, tools: [], href: null, loadingMessage: 'Loading...', title: '新建窗口', collapsible: true, minimizable: true, maximizable: true, closable: true, collapsed: false, minimized: false, maximized: false, closed: true, onClose : function() {} }; })(jQuery);