jquery写的仿WebQQ

最近闲来无事，也仿个WebQQ的界面来玩玩，写的很简单，纯属娱乐！

 

 

使用了jquery和jqueryUI，主要的js代码如下：

 

var DESKTOP = (function($, window, document, undefined) {
	return {
		/**
		* 初始化桌面 
		*/
		init:function(activeBarId){
			for (var i in DESKTOP.initEvents) {
				DESKTOP.initEvents[i](activeBarId);
			}
		},
		initEvents : {
			/**
			*	底部导航菜单事件
			*/
			nav : function(activeBarId){
				var _nav = $('#navigation div.title');
				_nav.each(function(i,n){
					setTimeout(function(){
						$('img',n).css('opacity',1);
						var bottomV = '-80px';
						var id = $(n).attr('id');
						if(id == activeBarId)bottomV = '-75px';
						$(n).animate({bottom:bottomV},800,function(){
							$('img',n).css('opacity',0);
						});
						$('div',n).animate({'opacity':1},800);
					},200*i); 
				})
				_nav.hover(function(){
					$('img',this).css('opacity',1);
					$(this).animate({bottom:0},500);
					$('div',this).animate({'opacity':0},500);
				},function(){
					var bottomV = '-80px';
					var id = $(this).attr('id');
					if(id == activeBarId)bottomV = '-75px';
					$(this).animate({bottom:bottomV},300,function(){
						$('img',this).css('opacity',0);
					});
					$('div',this).animate({'opacity':1},300);
				});
			},
			/**
			*	桌面图标单击双击等事件
			*/
			icon : function(){
				$('a.icon').live('mousedown', function() {
					// 高亮图标
					DESKTOP.util.clear_active();
					$(this).addClass('active');
				}).live('click', function() {
					// 弹出窗口
					var config = {
						id : $(this).attr('id'),
						title : $('span',this).text(),
						icon : $(this).attr('icon'),
						url : $(this).attr('url')
					}
					DESKTOP.util.window_flat();
					DESKTOP.createWindow(config);
				}).live('mouseenter', function() {
					$(this).die('mouseenter').draggable({
						revert: true,
						containment: 'parent'
				  });
				});
			},
			//顶部菜单的点击和关闭事件
			topBar : function(){
				$('#tbar_container span.bar_title').live('click',function(){
					var _li = $(this).closest('li');
					var id = _li.attr('id').split('_')[1];
					DESKTOP.createWindow(id);
				});
				$('#tbar_container span.bar_close').live('click',function(){
					var _li = $(this).closest('li');
					var id = _li.attr('id').split('_')[1];
					$('#window_'+id).hide('explode',{direction:'up'},500,function(){
						$(this).remove();
						$('#bar_'+id).remove();
					});
				});
			},
			/**
			*	弹出窗口事件
			*/
			window : function(){
				// 窗口拖动
				$('div.window').live('mousedown', function() {
					// 窗口置顶
					DESKTOP.util.window_flat();
					$(this).addClass('window_stack');
				}).live('mouseenter', function() {
					$(this).die('mouseenter').draggable({
						cancel: 'a',
						cursor:'crosshair',
						containment: 'parent',
						handle: 'div.window_top'
				  }).resizable({
						containment: 'parent',
						minWidth: 400,
						minHeight: 200
				  });
				  
				// 双击顶部自动最大化/还原，同windows
				}).find('div.window_top').live('dblclick', function() {
					DESKTOP.util.window_resize(this);

				// 双击顶部图标关闭，同windows
				}).find('img').live('dblclick', function() {

					// 将顶部工具栏对应的标签移除
					var _window = $(this).closest('div.window');
					var id = _window.attr('id').split('_')[1];
					_window.hide('explode',{direction:'up'},500,function(){
						$(this).remove();
						$('#bar_'+id).remove();
					});
					return false;
				});

				// 最小化窗口
				$('a.window_min').live('click', function() {
					$(this).closest('div.window').hide('drop',{direction:'up'},500);
				});

				// 最大化或者还原窗口
				$('a.window_resize').live('click', function() {
					DESKTOP.util.window_resize(this);
				});

				// 关闭窗口
				$('a.window_close').live('click', function() {
					var _window = $(this).closest('div.window');
					var id = _window.attr('id').split('_')[1];
					_window.hide('explode',{direction:'up'},500,function(){
						$(this).remove();
						$('#bar_'+id).remove();
					});
					
				});
			},
			/**
			*	其他 类似于切换墙纸、鼠标右键
			*/
			other : function(){
				DESKTOP.wallPaper();
				
				$('a').live('click', function(ev) {
					var url = $(this).attr('href');
					this.blur();

					if (url.match(/^#/)) {
						ev.preventDefault();
						ev.stopPropagation();
				  }else {
						$(this).attr('target', '_blank');
				  }
				});
			}
		},
		/**
		*  切换墙纸
		*/
		wallPaper:function(src){
			var defaultSrc = "images/car_b2.jpg";
			if(!src)src = defaultSrc;
			if ($('#wallpaper').length == 0) {
				$('body').prepend('<img id="wallpaper" class="abs" src="'+src+'" />');
			}else{
				$('#wallpaper').attr('src',src);
			}
		},
		/**
		* 创建窗口
		*/
		createWindow : function(arg){
			if(typeof arg == 'string'){
				arg = {id:arg};
			}
			var win = $('#window_'+arg.id);
			if(win.length == 0){
				//创建窗口
				var tempW = $('#window_templete').clone();
				$(tempW).attr('id','window_'+arg.id);
				$('.window_icon',tempW).addClass(arg.icon||'default_icon');
				$('.window_title',tempW).html(arg.title);
				$('#desktop').append(tempW);
				//创建顶部标签条
				var tempB = $('<li><span class="bar_title"></span><span class="bar_close"></span></li>');
				tempB.attr('id','bar_'+arg.id);
				$('.bar_title',tempB).html(arg.title);
				$('#tbar_container').append(tempB);
				tempW.show('drop',{direction:'left'},500);
			}else if(win.is(':hidden')){
				win.show('drop',{direction:'left'},500);
			}else{
				// 置顶窗口
				DESKTOP.util.window_flat();
				win.addClass('window_stack');
			}
		},
		util:{
			clear_active: function() {
				$('a.active, tr.active').removeClass('active');
				$('ul.menu').hide();
			},
			window_flat: function() {
				$('div.window').removeClass('window_stack');
			},
			window_resize: function(el) {
				// window容器
				var win = $(el).closest('div.window');

				// 是否已经最大化?
				if (win.hasClass('window_full')) {
				  // 还原position
				  win.removeClass('window_full').css({
					'top': win.attr('data-t'),
					'left': win.attr('data-l'),
					'right': win.attr('data-r'),
					'bottom': win.attr('data-b'),
					'width': win.attr('data-w'),
					'height': win.attr('data-h')
				  });
				}else {
				  win.attr({
					// 将当前坐标缓存起来
					'data-t': win.css('top'),
					'data-l': win.css('left'),
					'data-r': win.css('right'),
					'data-b': win.css('bottom'),
					'data-w': win.css('width'),
					'data-h': win.css('height')
				  }).addClass('window_full').css({
					// 最大化的尺寸
					'top': '0',
					'left': '0',
					'right': '0',
					'bottom': '0',
					'width': '100%',
					'height': '100%'
				  });
				}

				// 置顶窗口
				DESKTOP.util.window_flat();
				win.addClass('window_stack');
			},
			topBar:function(){
				
			}
		}
	
	}
})(jQuery, this, this.document);

$(function(){
	DESKTOP.init('module_1');
	
});

 

 

评论

3 楼 qwq123qa 2012-10-28  

感谢楼主的奉献

2 楼 hqingjin 2012-10-18  

效果很不错，LZ很是牛

1 楼 maply_zhang 2012-06-27  

感谢楼主的奉献