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；

看来哥相当聪明；

jquery.desktop.js 代码分析相关推荐

js实现中英文切换（jquery.i18n.js）
jquery.i18n.js 实现中英文切换方法由于在公司官网所用到中英文切换功能,代码时js.jq写的.个人简单记录一下过程: 用的方法是 jquery.i18n.js. jquery.i18n ...
Mesos | 1.3.2 webui static 界面代码分析
知识点链接:https://blog.csdn.net/lilele12211104/article/details/85011877 https://blog.csdn.net/lilele1221 ...
爬虫之JS解析，Python模拟JS代码运行。（附带模拟人人网登录案例）
六.JS解析 1.定位js文件 1.通过initiator定位到js文件 2.通过search搜索关键字定位到js文件 3.通过元素绑定的事件监听函数找到js文件,Event Listeners 注: ...
JQuery data API实现代码分析
JQuery data 接口是什么? .data() Store arbitrary data associated with the matched elements or return the v ...
关于“1900年至2100年公历、农历互转的js代码”的详细分析
今天讲的是对1900年至2100年公历.农历互转的js代码进行详细分析! 首先来看一下js里面的方法都得到了哪些有用的数据--这里直接在html文档里面引入该js文件,然后调用对应的方法: <s ...
jquery产品左右滚动js代码
2019独角兽企业重金招聘Python工程师标准>>> 迷上jQuery,相对于原生JavaScript,它是如此的美妙.也因此,促使我更加的努力的研习原生JavaScript. 分 ...
微信小游戏 demo 飞机大战代码分析（四）(enemy.js， bullet.js, index.js)
微信小游戏 demo 飞机大战代码分析(四)(enemy.js, bullet.js, index.js) 微信小游戏 demo 飞机大战代码分析(一)(main.js) 微信小游戏 demo 飞 ...
jsencrypt代码分析——openssl的rsa加密解密在js的实现
在js上做rsa,感觉jsencrypt这个是封装的比较好的,但用起来还是遇到了些坑,所以踩进代码里填填坑- 项目在这里 https://github.com/travist/jsencrypt [r ...
18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码原生JS鼠标悬停文字球状放大显示效果代码原生js文字动画圆形 ...

jquery.desktop.js 代码分析

jquery.desktop.js 代码分析相关推荐

最新文章

热门文章