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');
});