Print Page - Minimiza a window

The code below shows a simple way to implement the window sticking function.

Code:

$.fn.window.defaults.onMinimize = function(){
	var title = $(this).window('options').title;
	var s = $('<div class="ws"></div>').appendTo($('div.wb')).html(title);
	s.hover(
		function(){$(this).addClass('ws-over')},
		function(){$(this).removeClass('ws-over')}
	);
	s.bind('click', {w:this}, function(e){
		$(e.data.w).window('open');
		s.remove();
	});
};

Prepare a <div> that acts as the task bar:

Code:

<div id="bb" class="wb">

When minimize a window, a new small window dock will appear in the task bar.

The css style definition:

Code:

<style>
	.wb{
		width:100%;
		height:30px;
		background:#fafafa;
		z-index:99999999999;
		position:fixed;
		bottom:0;
		left:0;
	}
	.ws{
		border:1px solid #ccc;
		background:#91C8FF;
		width:100px;
		padding:0 5px;
		display:inline-block;
		margin:2px;
		line-height:25px;
	}
	.ws-over{
		background:#FFF955;
	}
</style>

EasyUI Forum

General Category => General Discussion => Topic started by: mapner on August 05, 2012, 07:04:42 AM