jQuery Window
Plugin v
- To Popup A Beautiful Window-like Dialog
Theme
Header
Body

IMPORTANT!!
If you meet "position jump" bug while dragging the window. It might be caused by this jQuery UI bug:
http://bugs.jqueryui.com/ticket/9315
The temporary solution is change the jQuery UI js as the following url:
http://code.jquery.com/ui/jquery-ui-git.js

Example 1 - Using Remote URL

JavaScript

				$.window({
					title: "Cyclops Studio",
					url: "http://apps.fstoke.me/"
				});
			

Demo

Example 2 - Using Inner HTML Element & Showing Background Modal

HTML

				
			

JavaScript

				$.window({
					showModal: true,
					modalOpacity: 0.5,
					icon: "http://www.fstoke.me/favicon.ico",
					title: "Professional JavaScript for Web Developers",
					content: $("#window_block2").html(), // load window_block2 html content
					footerContent: " This is a nice plugin :^)"
				});
			

Demo

Example 3 - Limit Window Boundary and Preare Customized Static Attributes

JavaScript

				// prepare customerized static attributes, see static attributes
				// Note: you should call this method before starting to create window instances, or windows might display wrong. 
				$.window.prepare({
					dock: 'bottom',       // change the dock direction: 'left', 'right', 'top', 'bottom'
					animationSpeed: 200,  // set animation speed
					minWinLong: 180       // set minimized window long dimension width in pixel
				});
				
				// limit window within body
				$.window({
					icon: 'http://www.fstoke.me/favicon.ico',
					title: "This window only can be dragged within body boundary",
					content: "
I only can be dragged within body element."+ "

Really? Really? You can try it... :)
", checkBoundary: true, x: 80, y: 80 }); // limit window within a element $("#my_boundary_panel").window({ icon: 'http://mail.google.com/favicon.ico', title: "This window only can be dragged within its parent element", content: "
I only can be dragged within my boss...@@
", checkBoundary: true, width: 200, height: 160, maxWidth: 400, maxHeight: 300, x: 80, y: 80 }); // assign the dock area $.window.prepare({ dock: 'bottom', // change the dock direction: 'left', 'right', 'top', 'bottom' dockArea: $('#myDockArea'), // set the dock area animationSpeed: 200, // set animation speed minWinLong: 180 // set minimized window long dimension width in pixel });

Demo

Example 4 - Make Window Freezed

JavaScript

				$.window({
					title: "Un-draggable & Un-resizable Window",
					content: "
I can't be dragged...
"+ "I can't be resized too...

Of course, maximize and minimize are also disabled...

"+ "So... What can I do? I only can be closed. @_@
", draggable: false, resizable: false, maximizable: false, minimizable: false, showModal: true });

Demo

Example 5 - Create Window with Various Attributes And Callback Functions

HTML

				
			

JavaScript

				$.window({
					title: "complext window",
					content: $("#window_block5").html(), // load window_block5 html content
					x: 150,               // the x-axis value on screen, if -1 means put on screen center
					y: 100,               // the y-axis value on screen, if -1 means put on screen center
					width: 600,           // window width
					height: 300,          // window height
					minWidth: 200,        // the minimum width, if -1 means no checking
					minHeight: 100,       // the minimum height, if -1 means no checking
					maxWidth: 700,        // the minimum width, if -1 means no checking
					maxHeight: 400,       // the minimum height, if -1 means no checking
					scrollable: false,    // a boolean flag to show scroll bar or not
					onOpen: function(wnd) {  // a callback function while container is added into body
						alert('open');
					},
					onShow: function(wnd) {  // a callback function while whole window display routine is finished
						alert('show');
					},
					onClose: function(wnd) { // a callback function while user click close button
						alert('close');
					},
					onSelect: function(wnd) { //  a callback function while user select the window
						log('select');
					},
					onUnselect: function(wnd) { // a callback function while window unselected
						log('unelect');
					},
					onDrag: function(wnd) { // a callback function while window is going to drag
						log('drag');
					},
					afterDrag: function(wnd) { // a callback function after window dragged
						log('after dragged');
					},
					onResize: function(wnd) { // a callback function while window is going to resize
						log('resize');
					},
					afterResize: function(wnd) { // a callback function after window resized
						log('after resized');
					},
					onMinimize: function(wnd) { // a callback function while window is going to minimize
						log('minimize');
					},
					afterMinimize: function(wnd) { // a callback function after window minimized
						log('after minimized');
					},
					onMaximize: function(wnd) { // a callback function while window is going to maximize
						log('maximize');
					},
					afterMaximize: function(wnd) { // a callback function after window maximized
						log('after maximized');
					},
					onCascade: function(wnd) { // a callback function while window is going to cascade
						log('cascade');
					},
					afterCascade: function(wnd) { // a callback function after window cascaded
						log('after cascaded');
					}
				});
			

Demo

NOTE: It needs to install Firebug plugin on Firefox or using Chrome browser javascript console to see drag and resize callback log

Example 6 - Create Window with Iframe Redirect Checking

Method 1 - Control by Self

Javascript

				// bind window onbeforeunload event with callback function
				var checkRedirectMsg = null;
				window.onbeforeunload = function() {
					if(checkRedirectMsg != null) {
						return checkRedirectMsg;
					}
				}

				// create window to listen iframe start, end and window close event
				$.window({
					title: "create window with redirect checking",
					url: "http://www.myspace.com",
					onIframeStart: function(wnd, url) {
						checkRedirectMsg = "the window is going to redirect to URL:\r\n"+url;
					},
					onIframeEnd: function(wnd, url) {
						checkRedirectMsg = null;
					},
					onClose: function() {
						checkRedirectMsg = null;
					}
				});
			

Demo

Method 2 - Using Window iframeRedirectCheckMsg Attribute

Javascript

/*
Set iframeRedirectCheckMsg attribute as a string value, note that there is a {url} text inside.
It will be replace with real iframe url(e.g. "http://www.myspace.com" in this sample) when
callback function returns.

The difference between method 1 and 2 is that you can do more things while got onbeforeunload event.
But the trade-off is you need to write more code to implement this feature instead of just pass a string.
*/
$.window({
    title: "create window with redirect checking",
    url: "http://www.myspace.com",
    iframeRedirectCheckMsg: "the window is going to redirect to {url}!!\r\nPlease select 'cancel' to stay here."
});
			

Demo

Example 7 - Create Window with Customized Icon Button

Method 1 - Passing A JSON Array With Button Object Definition

Javascript

				// create buttons definition JSON Array
				var myButtons = [
					// facebook button
					{
					id: "btn_facebook",           // required, it must be unique in this array data
					title: "share to facebook",   // optional, it will popup a tooltip by browser while mouse cursor over it
					clazz: "my_button",           // optional, don't set border, padding, margin or any style which will change element position or size
					style: "",                    // optional, don't set border, padding, margin or any style which will change element position or size
					image: "img/facebook.gif",    // required, the url of button icon(16x16 pixels)
					callback:                     // required, the callback function while click it
						function(btn, wnd) {
							wnd.getContainer().find("#demo_text").text("Share to facebook!");
							wnd.getContainer().find("#demo_logo").attr("src", "img/facebook_300x100.png");
						}
					},
					// twitter button
					{
					id: "btn_twitter",
					title: "share to twitter",
					clazz: "my_button",
					style: "background:#eee;",
					image: "img/twitter.png",
					callback:
						function(btn, wnd) {
							wnd.getContainer().find("#demo_text").text("Share to twitter!");
							wnd.getContainer().find("#demo_logo").attr("src", "img/twitter_300x100.jpg");
						}
					}
				];

				// pass the JSON Array to "custBtns" attribute
				$.window({
					title: "create window with customized icon buttons",
					content: "
"+ "
You can share something here...
"+ ""+ "
", custBtns: myButtons });

Demo

Method 2 - Passing A JSON Array With HTML Element

HTML

				
				
			

JavaScript

				// bind button element event
				var facebookBtn = $("#my_facebook_btn");
				facebookBtn.unbind("click");
				facebookBtn.click(function() {
					alert('Share to facebook!');
				});
				facebookBtn.unbind("mouseover");
				facebookBtn.mouseover(function() {
					var container = $(this).parents(".window_panel"); // get window container
					container.find("#demo_text").text("Share to facebook!");
					container.find("#demo_logo").attr("src", "img/facebook_300x100.png");
				});

				var twitterBtn = $("#my_twitter_btn");
				twitterBtn.unbind("click");
				twitterBtn.click(function() {
					alert('Share to twitter!');
				});
				twitterBtn.unbind("mouseover");
				twitterBtn.mouseover(function() {
					var container = $(this).parents(".window_panel"); // get window container
					container.find("#demo_text").text("Share to twitter!");
					container.find("#demo_logo").attr("src", "img/twitter_300x100.jpg");
				});

				// create buttons element JSON Array
				// Note that passing a pure HTML element or a jQuery wrapped element object are both working
				var myButtons = [
					facebookBtn,
					document.getElementById("my_twitter_btn")
				];

				// pass the JSON Array to "custBtns" attribute
				$.window({
					title: "create window with customized icon buttons",
					content: "
"+ "
You can share something here...
"+ ""+ "
", custBtns: myButtons });

Demo

Example 8 - Customize Window Theme

HTML

				
			

CSS

				.my_container {
					color: orange;
				}
				
				.my_header {
					font-family: Times New Roman, Serif
					font-size: 16px;
					font-style: oblique;
					font-weight: bold;
					letter-spacing: 2px;
					background: gold;
				}
				
				.my_frame {
					letter-spacing: 3px;
					font-size: 14px;
				}
				
				.my_footer {
					letter-spacing: 2px;
					background: #eee;
					color: #333;
				}
				
				.my_selected_header {
					background: purple;
					color: #ddd;
				}
			

JavaScript

				$.window({
					title: "Pro JavaScript Design Patterns",
					content: $("#window_block8"), // load window_block8 html content
					containerClass: "my_container",
					headerClass: "my_header",
					frameClass: "my_frame",
					footerClass: "my_footer",
					selectedHeaderClass: "my_selected_header",
					showFooter: false,
					showRoundCorner: true,
					createRandomOffset: {x:200, y:150}
				});
			

Demo

Example 9 - Manipulate Windows

JavaScript

				function create3Window() {
					for( var i=0; i<3; i++ ) {
						$.window({
							title: "this is window "+i,
							content: "you can minimize some windows and try click function buttons...",
							onClose: function(wnd) {
								alert("close window: "+wnd.getWindowId());
							}
						});
					}
				}
				function hideAllWindow() {
					$.window.hideAll(); // hide all windows
				}
				function showAllWindow() {
					$.window.showAll(); // show all windows
				}
				function closeAllWindow() {
					$.window.closeAll(); // close all windows
				}
				function closeAllWindowQuiet() {
					$.window.closeAll(true); // close all windows without callback
				}
			

Demo

Example 10 - Change Window Display Dynamically

JavaScript

				var sampleWnd = null; // to remember last created window instance
				function createSampleWindow() { // create a inner html window
					sampleWnd = $.window({
						title: "Professional JavaScript for Web Developers",
						content: $("#window_block2").html(), // load window_block2 html content
						footerContent: ""+
								""+
								""+
								" This is a nice plugin :^)"
					});
				}
				function createRemoteSampleWindow() { // create a iframe window
					sampleWnd = $.window({
						title: "iPhone App: Monster Lord",
						url: "https://itunes.apple.com/app/id455950026?mt=8"
					});
				}
				function changeSampleWindowTitle() { // trigger by Change Title button
					if( sampleWnd != null ) {
						sampleWnd.setTitle("New Title Here");
					}
				}
				function changeSampleWindowIcon() { // trigger by Change Icon button
					if( sampleWnd != null ) {
						sampleWnd.setIcon("http://mail.google.com/favicon.ico");
					}
				}
				function changeSampleWindowContent() { // trigger by Change Content button
					if( sampleWnd != null ) {
						sampleWnd.setContent(""+
							"The first version of this paper, written in 2003, had several shortcomings, not the least of which was that the techniques described were specific to Internet Explorer. I've updated and improved on the original, to document the current state of the art, especially in light of the extensive interest in AJAX technology and the increasing adoption of the FireFox browser.");
					}
				}
				function changeSampleWindowUrl() { // trigger by Change URL button
					if( sampleWnd != null ) {
						sampleWnd.setUrl("https://itunes.apple.com/app/id542917099?mt=8");
					}
				}
				function changeSampleWindowFooterContent() { // trigger by Change Footer Content button
					if( sampleWnd != null ) {
						sampleWnd.setFooterContent("New Footer Content...");
					}
				}
			

Demo

Change Inner HTML Window Display
Change Remote URL Window Display
Note: The demo code will change the last created window only.

Example 11 - Change Window Size and Position Dynamically

JavaScript

				// create a window
				sampleWnd = $.window({
					.....
				});
				
				// move the window to specific x,y position
				var y = $('#example11').offset().top + 50;
				sampleWnd.move(400, y);
				
				// shift the window by passed x,y parameter (in pixels)
				sampleWnd.move(100, -50, true);
				
				// resize the window by passed w,h parameter
				sampleWnd.resize(200, 150);
			

Demo

Change Inner HTML Window Display
Note: The demo code will change the last created window only.

Static Attributes

dock [string:"left"] the direction of minimized window dock at. the available values are [left, right, top, bottom]
dockArea [jquery object, element:null] the area which the windows will dock at
animationSpeed [number:400] the speed of animations: maximize, minimize, restore, shift, in milliseconds
minWinNarrow [number:24] the narrow dimension of minimized window
minWinLong [number:120] the long dimension of minimized window
handleScrollbar [boolean:true] to handle browser scrollbar when window status changed(maximize, minimize, cascade)
showLog [boolean:false] to decide show log in firebug, IE8, chrome console

Instance Attributes

icon [string:"auto"] an icon image url string. if this attribute is given, it will force to replace the original favicon of remote page on window. or you can set it as null to hide icon.
title [string:""] the title text of window
url [string:""] the target url of iframe ready to load.
content [html string, jquery object, element:""] this attribute only works when url is null. when passing a jquery object or a element, it will clone the original one to append.
footerContent [html string, jquery object, element:""] same as content attribute, but it's put on footer panel.
containerClass [string:""] container extra class
headerClass [string:""] header extra class
frameClass [string:""] frame extra class
footerClass [string:""] footer extra class
selectedHeaderClass [string:""] selected header extra class
x [number:-1] the x-axis value on screen(or caller element), if -1 means put on screen(or caller element) center
y [number:-1] the y-axis value on screen(or caller element), if -1 means put on screen(or caller element) center
z [number:2000] the css z-index value
width [number:400] window width
height [number:300] window height
minWidth [number:200] the minimum width, if -1 means no checking
minHeight [number:150] the minimum height, if -1 means no checking
maxWidth [number:800] the maximum width, if -1 means no checking
maxHeight [number:600] the maximum height, if -1 means no checking
showModal [boolean:false] to control show modal on background
modalOpacity [number:0.5] the opacity of modal dialog
showFooter [boolean:true] to control show footer panel
showRoundCorner [boolean:true] to control display window as round corner
closable [boolean:true] to control window closable
minimizable [boolean:true] to control window minimizable
maximizable [boolean:true] to control window maximizable
bookmarkable [boolean:true] to control window with remote url could be bookmarked
draggable [boolean:true] to control window draggable
resizable [boolean:true] to control window resizable
scrollable [boolean:true] to show scroll bar or not
checkBoundary [boolean:false] to check window dialog overflow html body or caller element
withinBrowserWindow [boolean:false] to limit window only can be dragged within browser window. this attribute only works when checkBoundary is true and caller is null.
custBtns [json array:null] to describe the customized button display and callback function
onOpen [function:null] a callback function while container is added into body
onShow [function:null] a callback function while whole window display routine is finished
onClose [function:null] a callback function while user click close button
onSelect [function:null] a callback function while user select the window
onUnselect [function:null] a callback function while window unselected
onDrag [function:null] a callback function while window is going to drag
afterDrag [function:null] a callback function after window dragged
onResize [function:null] a callback function while window is going to resize
afterResize [function:null] a callback function after window resized
onMinimize [function:null] a callback function while window is going to minimize
afterMinimize [function:null] a callback function after window minimized
onMaximize [function:null] a callback function while window is going to maximize
afterMaximize [function:null] a callback function after window maximized
onCascade [function:null] a callback function while window is going to cascade
afterCascade [function:null] a callback function after window cascaded
onIframeStart [function:null] a callback function while iframe ready to connect remoting url. this attribute only works while url attribute is given
onIframeEnd [function:null] a callback function while iframe load finished. this attribute only works while url attribute is given
iframeRedirectCheckMsg [string:null] if null means no check, or pass a string to show warning message while iframe is going to redirect current top page
createRandomOffset [json object:{x:0, y:0}] random the new created window position, it only works when options x,y value both are -1

Static Methods ( $.window.[method name] )

prepare initialize with customerized static setting attributes
custSetting [object]the customerized static attributes object
closeAll close all created windows
quiet [boolean]to decide doing callback or not
hideAll hide all created windows
showAll show all created windows
getAll return all created windows instance
getWindow get the window instance by passed window id
windowId [string]the target window id
getSelectedWindow get the selected window instance

Instance Methods

getWindowId get window id
getCaller get window container's parent panel, it's a jQuery object
getContainer get window container panel, it's a jQuery object
getHeader get window header panel, it's a jQuery object
getFrame get window frame panel, it's a jQuery object
getFooter get window footer panel, it's a jQuery object
alignCenter set current window as screen center
alignHorizontalCenter set current window as horizontal center
alignVerticalCenter set current window as vertical center
select select current window, it will increase the original z-index value with 2
unselect unselect current window, it will set the z-index as original options.z
move move current window to target position or shift it by passed distance
x [number]the absolute x-axis value on document or shift distance, in pixels
y [number]the absolute y-axis value on document or shift distance, in pixels
bShift [boolean]a boolean flag to decide to shift the window position with x,y
resize resize current window to target width/height
w [number]target width value, in pixels
h [number]target height value, in pixels
maximize maximize current window
minimize minimize current window
restore restore current window, it could be maximized or cascade status
close close current window
quiet [boolean]to decide doing callback or not
hide hide current window
show show current window
setTitle change window title
title [string]window title text
setUrl change iframe url
url [string]iframe url
setContent change frame content
content [html string, jquery object, element] the content of frame
setFooterContent change footer content
content [html string, jquery object, element] the content of footer
getTitle get window title text
getUrl get url string
getContent get frame html content
getFooterContent get footer html content
isMaximized get window maximized status
isMinimized get window minmized status
isSelected get window selected status
setIcon set window icon
iconUrl [string] the image url of icon
showIcon show window icon
hideIcon hide window icon

HTML Sample

<!-- DTD -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- Style Includes -->
<link type="text/css" href="js/jquery/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="js/jquery/window/css/jquery.window.css" rel="stylesheet" />

<!-- JavaScript Includes -->
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery/window/jquery.window.js"></script>

Required Libraries

Known Issues

 ISU_002 - The window could be resized overlay its parent even it's set boundary within its parent.
 ISU_005 - When window maximized, even the browser scroll bar is already disabled, it still can be scrolled in Opera.
 ISU_006 - When window maximized, the browser scroll bar still exists until browser REPAINT in IE7. IE8 is fine.
           (This case seems only happen at the window content is not a iframe)
           (What time the browser will repaint? popup a alert dialog, switch browser page tab, alt + tab to switch application...etc.)
 ISU_007 - It will delay display new title while window is minimized, until browser REPAINT. IE7/8 both happens.
           This case root cause seems is IE browser can't handle a element whose position is "fixed" correctly.

Fixed Issues

 ISU_001 - If drag or resize a window first, then do maximize, the window will disappear while mouse down the header panel. 
           It will appear again when mouse up.
 ISU_003 - When resizing over an IFRAME, it lost the mouse event. - Thank for crabo!
 ISU_004 - When the window is maximized, mouse scroll and text input delay about 3 seconds in IE browser.
           It's caused by IE browser can't support css position attribute "fixed" correctly.

Version Update Change Log

     view more
Version 5.04 change log:
- modify code for supporting the latest version of jQuery(1.11.1) & jQuery UI(1.10.4).
	
Version 5.03 change log:
- fix bug: if window's parent or dockArea is a absolute position element, it will occur display error in many situations.
- add a new attribute: withinBrowserWindow, let window could be dragged within browser window.
- add some check logic in _iconOnLoad() to avoid some unexpected conditions happened.

Version 5.02 change log:
 - Add new feature: showing window icon on title bar area. You can set icon attribute as an image url to show it. 
   If it's a remote page and the icon attribute value is 'auto', then it will auto-grab remote page faviocn as displaying icon.
 - Add new feature: add a static setting attirbute - dockArea, let you can assign the dock area when window minimized.
   Once you set this attribute, no matter windows' caller element is html body or a html element, they will all dock at the area that you assigned.
 - Add new feature: you can set attributes - showModal, modalOpacity to make it showing a modal dialog on background when a window is created.
 - Add instance methods - setIcon, showIcon, hideIcon.
 
Version 5.01b change log:
 - Add instance method - hide(), show()
 
 Version 5.01a change log:
 - Add isSelected instance method and getSelectedWindow static method
 
 Version 5.01 change log:
 - Add onSelect, onUnselect, selectedHeaderClass attributes
 - Add move, resize instance methods
 - Fix some UI bug when user maximized or minimized
 - Change the css left, top attributes instead of margin-left, margin-top when window align center or status changed
 
 Version 5.00 change log:
 - Dock at four direction on browser is possible now. ('left', 'right', 'top', 'bottom') 
 - Windows which get a caller will be displayed within caller element now at all status.
 - Minimized windows will be auto-resized while the total width or height exceed the screen or parent element.
 - Add static attributes for initialze common window display and behavior
 - Add a new static method: prepare 
 - Remove static methods: setAnimationSpeed, skipHandleScroll
 - Add instance functions: getCaller, isMaximized, isMinimized
 - Remove showLog instance attribute 
 - Speedup performance
 
 Version 4.07b change log:
 - Add drag and resize callback attribute - onDrag, afterDrag, onResize, afterResize.
 
 Version 4.07a change log:
 - Let the image attribute of custBtns object could be null value. If image is null, it will append div tag instead. 
 
 Version 4.07 change log:
 - To fix the right or bottom edge of window can't be trigger to resize while scrollbar appears on IE browser
 
 Version 4.06 change log:
 - Add getAll static function to retrieve all created windows 
 - Add getWindow static function to retrieve target window instance via window id
 - Add getTitle, getUrl, getContent, getFooterContent functions to retrieve various dispaly data
 - Add skipHandleScroll static function to skip handling browser scrollbar when window status changed
 - Modify createRandomOffset default value as {x:0, y:0}
 - Add onMinimize, afterMinimize, onMaximize, afterMaximize, onCascade, afterCascade callback functions
 - Fix create window inner a element display wrong when align center
 
 Version 4.05 change log:
 - Add round corner dispaly control options - showRoundCorner
 - Change mouse cursor display on header panel by three different status: normal, minimized, maximized
 - Fix change title text dynamically display error while window is minimized
 
 Version 4.04 change log:
 - Change all callback functions parameter to window instance instead of container
 - Add new options attribute - showFooter, to control show footer panel
 
 Version 4.03 change log:
 - Modify header and footer border css style to make display correctly
 - Modify window icon button css style to fix customized buttons display bug
 
 Version 4.02 change log:
 - Add functions for change window display dynamically - setTitle, setUrl, setContent, setFooterContent
 
 Version 4.01 change log:
 - Add backgroundColor value check in private hideContent function to avoid display bug in Firefox2. Thanks for crabo.
 - Add a public function - close, instead of destroy function. It does the same routine, but have a boolean parameter to decide doing callback. 
 - Add parameter: quiet in closeAll function, it decide doing close callback or not.
 
 Version 4.00 change log:
 - Change code to another javascript OOP style, more structural, readable, easy manageable and extending
 - Modify maximized status css position attribute as "absolute" to fix ISU_004 issue.
   And also disable browser(except Opera) scrollbar concurrently to avoid user have chance to change maxmized window's view position.
   But it got side effect, see issue ISU_005, ISU_006. Even so, at least IE user can read/operate content normally while window maximized. 
 - Support jquery ui theme now
 - Move animationSpeed from options to global window attribute
 - Add options new attribute: createRandomOffset, to make window have a random offset position while creating
 - Add options new attribute: footerContent, to let put something on window footer
 - Add options new attribute: containerClass, headerClass, frameClass, footerClass to make customize window look-like possible
 - Add handle dblclick event on header panel, it will do maximize or restore by window status
 - options content attribute also accept a jQuery object or html element now
 - Customized buttons callback function parameter change from a element to a jquery object, and add an extra container parameter
 - Modify public function name setFocus, releaseFocus to select and unselect
 - Merge icon buttons as one image, and change bookmark icon
 - Fix issues: ISU_001, ISU_003, ISU_004
 - Fix serveral UI bug
 
 Version 3.03 change log:
 - Modify window icon button margin-right to "4px"
 
 Version 3.02 change log:
 - Fix serveral UI display bugs
 
 Version 3.01 change log:
 - Availalbe to create customized icon buttons with passing a element JSON Array
 
 Version 3.00 change log:
 - Add maximize feature
 - Add adjust the width of header title text panel while window is resized. And add css style text-overflow: ellipsis; to let browser
   auto modify title text with "..." at the end while text width exceed panel width.
 - Add create window from a html element, and could be limit boundary within it.
 - Add iframeRedirectCheckMsg attribute to make iframe redirect checking mechanism more simple
 - Add custBtns attribute to implement customized icon button feature.
 - Modify bookmark not support message for Chrome, Safari and Opera.
 - Modify option attribute "zIndex" to simpler "z"
 - Add option attribute "animationSpeed" to control the animation speed
 
 Version 2.03 change log:
 - Add three options attribute to control show function button(close, minimize, bookmark)
 
 Version 2.02 change log:
 - Modify css class name to avoid conflict with others
 
 Version 2.01 change log:
 - Fix checkBoundary work incorrectly bug.
 - Add show loading animation while opening a iframe window.
 
 Version 2.00 change log:
 - Modify call function method. It doesn't need caller panel now, plugin will add a div element in html body automatically.
 - Add minimized and restore feature.
 
 Version 1.02 change log:
 - Fix second call, return wrong value bug
 - Add set focus feature
 
 Version 1.01 change log:
 - Change window panel css attribute: position to "fixed" to let window keep position on screen.
 - Fix auto align center incorrectly bug

Tested Browsers

Code Style

About the plugin javascript code style, please reference the following post.
http://fstoke.me/blog/?page_id=1610