Selasa, 20 Desember 2011

Energy Saver or Screensaver jQuery Plugin

Dalam rangka mengacak-ngacak artikel yang nanti pada akhir petualangan akan Koben kasih tahu blognya :D Masih mengenai trick jQuery plugin yang sebelum postingan ini membahas tentang jQuery plugin around the cursor! Aksesoris yang bisa kita pasang sekitaran kursor memakai jQuery script ;) Sekarang bloglang anu ganteng kalem tea mau berbagi cara membuat energy saving mode atau screensaver pada blog. Dulu pernah dibahas gimana proses buat screensaver for web or blog via jasa online kreasi Online Leaf Web. Bagi yang tidak suka dengan script, ada juga alternatif bikin energy saving/screensaver mode memakai CSS 3.
Mungkin masih jarang yang tahu ternyata dengan menggunakan script jQuery kita bisa membuat hal serupa! Lumayan untuk efisiensi biar tidak banyak script ;))

jQuery Plugin - Energy Saver

<script type='text/javascript'>
//<![CDATA[
(function($) {
var defaults = {
delay: 5000,
events: 'mousemove mousedown keydown'
};

$.energysaver = function(settings) {
$.energysaver.settings = $.extend({}, defaults, settings);
$.energysaver.startCounter($.energysaver.settings.delay);
bindEvents($.energysaver.settings.events);
return;
};
$.energysaver.end = function() {

$(document.body).css({'background':''});
$.energysaver.resetCounter();

};
$.energysaver.start = function() {
$(document.body).css({
background:'#000'
});

};
$.energysaver.startCounter = function(timeout) {
$.energysaver.counter = setInterval("$.energysaver.start()", timeout);
};
$.energysaver.resetCounter = function() {
clearInterval($.energysaver.counter);
$.energysaver.startCounter($.energysaver.settings.delay);
};
function bindEvents(events, elmt) {
$(document).bind(events, $.energysaver.end);
};

})(jQuery);
//]]>
</script>
Masukkan script plugin tersebut dibawah jQuery inti, boleh dicoba juga letakkan tepat sebelum tag </body> Script pemanggilnya...

Script Pemanggil jQuery Energy Saver

<script type='text/javascript'>
$(document).ready(function() {
$.energysaver({ delay: 10000 });
});
</script>
Rubahlah nominal delay sesuai dengan kebutuhan masing² (1000 = 1 detik). SAVE.
Demikian cara membuat energy saver menggunakan jQuery plugin. Semoga bermanfaat and good luck :)
Happy energy save \m/

Tidak ada komentar:

Posting Komentar