놀라운 jQuery 스타일 전환기 만들기: 단계별 가이드

/* "this" refers to each instance of the selected element, * So, if you were to call the plugin like this: * $('a').styleSwitcher(); then the following would occur * when clicking on any anchor within the document: */ $(this).click(function(){ // We're passing this element object through to the // loadStyleSheet function. loadStyleSheet(this); // And then we're returning false. return false; });

function loadStyleSheet(obj) { // Append new div to body: $('body').append('
'); // Give body a height of 100% (to fix IE6 issue): $('body').css({height:'100%'}); // Select newly created div and apply some styles: $('#overlay') .css({ display: 'none', position: 'absolute', top:0, left: 0, width: '100%', height: '100%', zIndex: 1000, background: 'black url(img/loading.gif) no-repeat center' }) // Now fade in the div (#overlay): .fadeIn(500,function(){ // The following will happen when the div has finished fading in: // Request PHP script (obj.href) with appended "js" query string item: $.get( obj.href+'&js',function(data){ // Select link element in HEAD of document (#stylesheet) and change href attribute: $('#stylesheet').attr('href','css/' + data + '.css'); // Check if new CSS StyleSheet has loaded: cssDummy.check(function(){ // When StyleSheet has loaded, fade out and remove the #overlay div: $('#overlay').fadeOut(500,function(){ $(this).remove(); }); }); }); }); }

var cssDummy = { init: function(){ // Appends "dummy-element" div to body: $('
').appendTo('body'); }, check: function(callback) { // Checks if computed with equals that which is defined in the StyleSheets (2px): if ($('#dummy-element').width()==2) callback(); // If it has not loaded yet then simple re-initiate this // function every 200 milliseconds until it had loaded: else setTimeout(function(){cssDummy.check(callback)}, 200); } }

cssDummy.init();

jQuery.fn.styleSwitcher = function(){ $(this).click(function(){ loadStyleSheet(this); return false; }); function loadStyleSheet(obj) { $('body').append('
'); $('body').css({height:'100%'}); $('#overlay') .css({ display: 'none', position: 'absolute', top:0, left: 0, width: '100%', height: '100%', zIndex: 1000, background: 'black url(img/loading.gif) no-repeat center' }) .fadeIn(500,function(){ $.get( obj.href+'&js',function(data){ $('#stylesheet').attr('href','css/' + data + '.css'); cssDummy.check(function(){ $('#overlay').fadeOut(500,function(){ $(this).remove(); }); }); }); }); } var cssDummy = { init: function(){ $('
').appendTo('body'); }, check: function(callback) { if ($('#dummy-element').width()==2) callback(); else setTimeout(function(){cssDummy.check(callback)}, 200); } } cssDummy.init(); }

$('#style-switcher a').styleSwitcher();