Windows Desktop Template dengan jQuery ??

hoaaammmhh,, posting sambil ngantuk2 nih sob, hahahaha . Meski ngantuk, tetep semangat !!

Dari pada ngurusin ngantuk, mending ngurusin judul post ini, Windows Dekstop Template dengan jQuery ?? ngerti maksudnya gag sob ?? Biar ngerti langsung menuju kesini..

Demo

hmmm, gimana sob ? doubleklik pada dekstop . lalu window dengan resize..semacem dekstop di pc kita kan ?

disini saya akan sedikit menerangkan tntang pembuatnya..

1. CSS

Css nya sangat bergantung sama z-index, maka dari itu mungkin untuk IE6 demo hnya bakal gag jalan dengan baik sob.. kalo mau liat css dari dekstop template, bisa langsung di ctrl+u pada demo nya .

2. Javascript

Yakin deh, jQuery emang mantaf.. sekarang saya akan menjelaskan guna javascritp secara terperinci dalam desktop template ini,

Clock,


// Update every 60 seconds.
setTimeout(JQD.init_clock, 60000);

ini js untuk jam, yg gunanya berubah setiao 60 detik .

Resize Window

//
// 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.window_flat();
win.addClass('window_stack');
},

ini digunakan agar fungsi resize window dapat berjalan..

Auto Open New Tab


// Relative or remote links?
$('a').click(function() {
var url = $(this).attr('href');
this.blur();

if (url.match(/^#/)) {
return false;
}
else if (url.match('://')) {
$(this).attr('target', '_blank');
return true;
}
});

ini fungsinya untuk otomatis buka newtab saat klik link

Membuat Menu Aktif



// Make top menus active.
$('a.menu_trigger').mousedown(function() {
JQD.clear_active();
$(this).addClass('active').next('ul.menu').show();
}).mouseenter(function() {
// Transfer focus, if already open.
if ($('ul.menu').is(':visible')) {
JQD.clear_active();
$(this).addClass('active').next('ul.menu').show();
}
});

ini untuk mengaktifkan menunya..

Dekstop Icon

// Desktop icons.
$('a.icon').mousedown(function() {
// Highlight the icon.
JQD.clear_active();
$(this).addClass('active');
}).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').end().show('fast');
}

// Bring window to front.
JQD.window_flat();
y.addClass('window_stack').show();
}).draggable({
revert: true,
containment: 'parent'
});

script ini dipakai agar window akan muncul setelah double klik

Taksbar Buton


// 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.window_flat();
x.show().addClass('window_stack');
}

// Stop the live() click.
this.blur();
return false;
});

Seperti pada pc umumnya kalo windows di minimized, akan muncul bar pada taksbar .

Wallpaper
// Add wallpaper last, to prevent blocking.
$('body').prepend('<img id="wallpaper" class="abs" src="wallpaper url" />');

seperti yg saya katakn sebelumnya, ini sangat bergantung pada z-index . sehingga wallpaper dibuat agar dapat menutup background asli .

Nah begitu javascriptnya yg udah bisa tmn2 liat lengkap disini

dan jangan lupa yg pasti menggunakan script jquery ini jquerypack.

Template yg saya buat ini sebenarnya kurang cocok untuk blog.. mekso kalo kata orang . Yg saya bingungkan gimana pemakaian teknik ajax pada "post" agar tidak load ulang semua.. ada yang punya refrensi tutorial pengguna'an ajax ga ?