jquery.desktop.js 代码分析
方宜
jquery.desktop.js是一个用来在网页上显示类似桌面效果的东东，下面分析其代码；
//
// Namespace - Module Pattern.
//
var JQD = (function($, window, undefined) {
// Expose innards of JQD.
return {
go: function() {
for (var i in JQD.init) {
JQD.init[i]();
}
},
init: {
frame_breaker: function() {
if (window.location !== window.top.location) {
window.top.location = window.location;
}
},
//
// Initialize the clock.
//
clock: function() {
if (!$('#clock').length) {
return;
}
// Date variables.
var date_obj = new Date();
var hour = date_obj.getHours();
var minute = date_obj.getMinutes();
var day = date_obj.getDate();
var year = date_obj.getFullYear();
var suffix = 'AM';
// Array for weekday.
var weekday = [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
];
// Array for month.
var month = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
];
// Assign weekday, month, date, year.
weekday = weekday[date_obj.getDay()];
month = month[date_obj.getMonth()];
// AM or PM?
if (hour >= 12) {
suffix = 'PM';
}
// Convert to 12-hour.
if (hour > 12) {
hour = hour - 12;
}
else if (hour === 0) {
// Display 12:XX instead of 0:XX.
hour = 12;
}
// Leading zero, if needed.
if (minute < 10) {
minute = '0' + minute;
}
// Build two HTML strings.
var clock_time = weekday + ' ' + hour + ':' + minute + ' ' + suffix;
var clock_date = month + ' ' + day + ', ' + year;
// Shove in the HTML.
$('#clock').html(clock_time).attr('title', clock_date);
// Update every 60 seconds.
setTimeout(JQD.init.clock, 60000);
},
//
// Initialize the desktop.
//
desktop: function() {
// Cancel mousedown, right-click.
$(document).mousedown(function(ev) {
if (!$(ev.target).closest('a').length) {
JQD.util.clear_active();
ev.preventDefault();
ev.stopPropagation();
}
}).bind('contextmenu', function() {
return false;
});
// Relative or remote links?
$('a').live('click', function(ev) {
var url = $(this).attr('href');
this.blur();
if (url.match(/^#/)) {
ev.preventDefault();
ev.stopPropagation();
}
else {
$(this).attr('target', '_blank');
}
});
// Make top menus active.
$('a.menu_trigger').live('mousedown', function() {
if ($(this).next('ul.menu').is(':hidden')) {
JQD.util.clear_active();
$(this).addClass('active').next('ul.menu').show();
}
else {
JQD.util.clear_active();
}
}).live('mouseenter', function() {
// Transfer focus, if already open.
if ($('ul.menu').is(':visible')) {
JQD.util.clear_active();
$(this).addClass('active').next('ul.menu').show();
}
});
// Desktop icons.
$('a.icon').live('mousedown', function() {
// Highlight the icon.
JQD.util.clear_active();
$(this).addClass('active');
}).live('dblclick', function() {
// Get the link's target.
var x = $(this).attr('href');
var y = $(x).find('a').attr('href');
// Show the taskbar button.
if ($(x).is(':hidden')) {
$(x).remove().appendTo('#dock');
$(x).show('fast');
}
// Bring window to front.
JQD.util.window_flat();
$(y).addClass('window_stack').show();
}).live('mouseenter', function() {
$(this).die('mouseenter').draggable({
revert: true,
containment: 'parent'
});
});
// Taskbar buttons.
$('#dock a').live('click', function() {
// Get the link's target.
var x = $($(this).attr('href'));
// Hide, if visible.
if (x.is(':visible')) {
x.hide();
}
else {
// Bring window to front.
JQD.util.window_flat();
x.show().addClass('window_stack');
}
});
// Make windows movable.
$('div.window').live('mousedown', function() {
// Bring window to front.
JQD.util.window_flat();
$(this).addClass('window_stack');
}).live('mouseenter', function() {
$(this).die('mouseenter').draggable({
// Confine to desktop.
// Movable via top bar only.
cancel: 'a',
containment: 'parent',
handle: 'div.window_top'
}).resizable({
containment: 'parent',
minWidth: 400,
minHeight: 200
});
// Double-click top bar to resize, ala Windows OS.
}).find('div.window_top').live('dblclick', function() {
JQD.util.window_resize(this);
// Double click top bar icon to close, ala Windows OS.
}).find('img').live('dblclick', function() {
// Traverse to the close button, and hide its taskbar button.
$($(this).closest('div.window_top').find('a.window_close').attr('href')).hide('fast');
// Close the window itself.
$(this).closest('div.window').hide();
// Stop propagation to window's top bar.
return false;
});
// Minimize the window.
$('a.window_min').live('click', function() {
$(this).closest('div.window').hide();
});
// Maximize or restore the window.
$('a.window_resize').live('click', function() {
JQD.util.window_resize(this);
});
// Close the window.
$('a.window_close').live('click', function() {
$(this).closest('div.window').hide();
$($(this).attr('href')).hide('fast');
});
// Show desktop button, ala Windows OS.
$('#show_desktop').live('click', function() {
// If any windows are visible, hide all.
if ($('div.window:visible').length) {
$('div.window').hide();
}
else {
// Otherwise, reveal hidden windows that are open.
$('#dock li:visible a').each(function() {
$($(this).attr('href')).show();
});
}
});
$('table.data').each(function() {
// Add zebra striping, ala Mac OS X.
$(this).find('tbody tr:odd').addClass('zebra');
}).find('tr').live('mousedown', function() {
// Highlight row, ala Mac OS X.
$(this).closest('tr').addClass('active');
});
},
wallpaper: function() {
// Add wallpaper last, to prevent blocking.
if ($('#desktop').length) {
$('body').prepend('<img id="wallpaper" class="abs" src="assets/images/misc/wallpaper.jpg" />');
}
}
},
util: {
//
// Clear active states, hide menus.
//
clear_active: function() {
$('a.active, tr.active').removeClass('active');
$('ul.menu').hide();
},
//
// Zero out window z-index.
//
window_flat: function() {
$('div.window').removeClass('window_stack');
},
//
// Resize modal window.
//
window_resize: function(el) {
// Nearest parent window.
var win = $(el).closest('div.window');
// Is it maximized already?
if (win.hasClass('window_full')) {
// Restore window 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({
// Save window position.
'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({
// Maximize dimensions.
'top': '0',
'left': '0',
'right': '0',
'bottom': '0',
'width': '100%',
'height': '100%'
});
}
// Bring window to front.
JQD.util.window_flat();
win.addClass('window_stack');
}
}
};
// Pass in jQuery.
})(jQuery, this);
在jQuery文档加载完成函数中调用JQD.go()
函数，传入变量：$,window,undefined；返回值给JQD
返回
函数
变量i在JQD.init中循环
JQD用i初始化
init函数
frame_breaker：函数
如果窗口的url不等于最顶层窗口的url
窗口的url赋值给最顶层窗口的url
clock：函数
如果#clock元素的长度为0则返回
定义变量
定义枚举
时间处理
构造clock_time, clock_date
在网页上显示时间
设定60秒后调用JQD.init.clock
desktop: 函数
鼠标按下处理函数
为a链接附加click处理函数
为a链接中的menu_trigger附加处理函数
为a链接中的icon附加处理函数
为#dock下的所有a附加单击处理函数
为css类为window的所有div附加鼠标按下处理函数
......
}
}
}
代码中的一些要点：
$
$号是jQuery“类”的一个别称，$()构造了一个jQuery对象。
$()可以是$(expresion)，即css选择器、Xpath或html元素，也就是通过上述表达式来匹配目标元素。
$()可以是$(element)，即一个特定的DOM元素。如常用的DOM对象有document、location、form等。
$()可以是$(function)，即一个函数，它是$(document).ready()的一个速记方式。
live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
$('#dock a')
选择#dock下的所有a元素
JQD是啥？从名字看，代表整个桌面对象;
util: {
这种语法表示啥？跟C++，Java这些好不一样；从代码分析表示一个类；
因为util: {下定义了函数clear_active:function() { ；然后就可以如此调用：
JQD.util.clear_active();
那么，clear_active:function() { 定义一个函数，函数名是 clear_active；
看来哥相当聪明；
类似资料：