Takazudo
3/31/2011 - 4:09 PM
jquery.requreCss.js
jquery.requreCss.js
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery.requireCss</title>
<meta name="description" content="">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jquery.requreCss.js"></script>
<script>
/* use like this */
$.requireCss('style1.css', 'all');
$.requireCss('style2.css');
$.requireCss('style3.css');
$.requireCss('style4.css');
/* more requests to each css are ignored. */
$.requireCss('style2.css');
$.requireCss('style3.css');
$.requireCss('style2.css');
$.requireCss('style2.css');
$.requireCss('style3.css');
</script>
</head>
<body>
<h1>jQuery.requireCss</h1>
<p><button onclick="$.requireCss('style5.css');">$.requireCss('style5.css');</button></p>
<div id="div1">#div1</div>
<div id="div2">#div2</div>
<div id="div3">#div3</div>
<div id="div4">#div4</div>
<div id="div5">#div5</div>
</body>
</html>
/*!
* $.requireCss
* https://gist.github.com/896667
* is a stylesheet loader
* author: Takeshi Takatsudo (takazudo[at]gmail.com)
* upate: 2011/04/01
* version: 1
*/
(function($, undefined){
/* elements */
var $head = $('head');
/* css preest collection */
var collection = (function(){
var o = {};
var _presets = [];
o.register = function(preset){
if(o.has(preset)){
return o;
}
_presets.push(preset);
return o;
};
o.has = function(preset){
return $.grep(_presets, function(current){
return (current.href === preset.href) && (current.media === preset.media);
}).length ? true : false;
};
return o;
})();
/* public */
$.requireCss = function(href, media){
media = media || 'all';
var preset = {
href: href,
media: media
};
if(collection.has(preset)){
return $;
}
var link = document.createElement('link');
link.type = "text/css";
link.rel = "stylesheet";
link.href = href;
link.media = media;
$head[0].appendChild(link);
return $;
};
})(jQuery); // end of encapsulation
#div1{ border:3px solid red; }
#div2{ border:3px solid orange; }
#div3{ border:3px solid blue; }
#div4{ border:3px solid purple; }
#div5{ border:3px solid navy; }