jquery.desktop.js是一個(gè)用來(lái)在網(wǎng)頁(yè)上顯示類似桌面效果的東東，下面分析其代碼；

// // 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文檔加載完成函數(shù)中調(diào)用JQD.go()

函數(shù)，傳入變量：$,window,undefined；返回值給JQD
? ? 返回
? ? ? ? 函數(shù)
? ? ? ? ? ? 變量i在JQD.init中循環(huán)
? ? ? ? ? ? ? ? JQD用i初始化
? ? ? ? init函數(shù)
? ? ? ? ? ? frame_breaker：函數(shù)
? ? ? ? ? ? ? ? 如果窗口的url不等于最頂層窗口的url
? ? ? ? ? ? ? ? ? ? 窗口的url賦值給最頂層窗口的url
? ? ? ? ? ? clock：函數(shù)
? ? ? ? ? ? ? ? 如果#clock元素的長(zhǎng)度為0則返回
? ? ? ? ? ? 定義變量
? ? ? ? ? ? 定義枚舉
? ? ? ? ? ? 時(shí)間處理
? ? ? ? ? ? 構(gòu)造clock_time, clock_date
? ? ? ? ? ? 在網(wǎng)頁(yè)上顯示時(shí)間
? ? ? ? ? ? 設(shè)定60秒后調(diào)用JQD.init.clock
? ? ? ? ? ? desktop: 函數(shù)
? ? ? ? ? ? 鼠標(biāo)按下處理函數(shù)
? ? ? ? ? ? 為a鏈接附加click處理函數(shù)
? ? ? ? ? ? 為a鏈接中的menu_trigger附加處理函數(shù)
? ? ? ? ? ? 為a鏈接中的icon附加處理函數(shù)
? ? ? ? ? ? 為#dock下的所有a附加單擊處理函數(shù)
? ? ? ? ? ? 為css類為window的所有div附加鼠標(biāo)按下處理函數(shù)
? ? ? ? ? ? ......
? ? ? ? ? ??
}
}
}

代碼中的一些要點(diǎn)：
$
$號(hào)是jQuery“類”的一個(gè)別稱，$()構(gòu)造了一個(gè)jQuery對(duì)象。
$()可以是$(expresion)，即css選擇器、Xpath或html元素，也就是通過(guò)上述表達(dá)式來(lái)匹配目標(biāo)元素。
$()可以是$(element)，即一個(gè)特定的DOM元素。如常用的DOM對(duì)象有document、location、form等。
$()可以是$(function)，即一個(gè)函數(shù)，它是$(document).ready()的一個(gè)速記方式。

live() 方法為被選元素附加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。

$('#dock a')
選擇#dock下的所有a元素

JQD是啥？從名字看，代表整個(gè)桌面對(duì)象;

util: {
這種語(yǔ)法表示啥？跟C++，Java這些好不一樣；從代碼分析表示一個(gè)類；
因?yàn)閡til: {下定義了函數(shù)clear_active:function() { ；然后就可以如此調(diào)用：
JQD.util.clear_active();

那么，clear_active:function() { 定義一個(gè)函數(shù)，函數(shù)名是 clear_active；

看來(lái)哥相當(dāng)聰明；

總結(jié)

以上是生活随笔為你收集整理的jquery.desktop.js 代码分析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。