Example 1 - Using Remote URL

JavaScript

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

Demo

Example 2 - Using Inner HTML Element

HTML

				

					

						
Introduction
						
						

							If you want to achieve JavaScript's full potential, it is critical to understand its nature, history, and limitations. 
							This book sets the stage by covering JavaScript from its very beginning to the present-day incarnations that include 
							support for the DOM and Ajax. It also shows you how to extend this powerful language to meet specific needs and create
							seamless client-server communication without intermediaries such as Java or hidden frames.
						
					
				
			

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

Introduction

If you want to achieve JavaScript's full potential, it is critical to understand its nature, history, and limitations. This book sets the stage by covering JavaScript from its very beginning to the present-day incarnations that include support for the DOM and Ajax. It also shows you how to extend this powerful language to meet specific needs and create seamless client-server communication without intermediaries such as Java or hidden frames.

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 Static

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

				

					

						
Create Window with Various Attributes And Callback Functions
						
The content is overflow window, but it won't show scroll bar...
						
						
						
						
						
					
				
			

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

Create Window with Various Attributes And Callback Functions

The content is overflow window, but it won't show scroll bar...

Example 6 - Create Window with Iframe Redirect Checking

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

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

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

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

				

					

						
Introduction
						
						

							Starting with the basics of object-oriented programming applicable to design 
							patterns, this work covers making JavaScript more expressive, inheritance, 
							encapsulation, information hiding, and more. The second part of the book 
							addresses several design patterns, including composites, decorators, fades, 
							and adapters.
						
					
				
			

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

Introduction

Starting with the basics of object-oriented programming applicable to design patterns, this work covers making JavaScript more expressive, inheritance, encapsulation, information hiding, and more. The second part of the book addresses several design patterns, including composites, decorators, fades, and adapters.

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: Gambling Memo",
						url: "http://itunes.apple.com/tw/app/id430593279?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("http://www.yahoo.com//");
					}
				}
				function changeSampleWindowFooterContent() { // trigger by Change Footer Content button
					if( sampleWnd != null ) {
						sampleWnd.setFooterContent("New Footer Content...");
					}
				}
			

Demo

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