動態載入js和css的jquery plugin，jqueryplugin

動態載入js和css的jquery plugin，jqueryplugin
一個簡單的動態載入js和css的jquery代碼，用於在產生頁面時通過js函數載入一些共通的js和css檔案。 
Java代碼  

1. //how to use the function below:  
2. //$.include('file/ajaxa.js');$.include('file/ajaxa.css');  
3. //or $.includePath  = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files are in the same directory)  
4. $.extend({  
5.     includePath: '',  
6.     include: function(file)  
7.     {  
8.         var files = typeof file == "string" ? [file] : file;  
9.         for (var i = 0; i < files.length; i++)  
10.         {  
11.             var name = files[i].replace(/^\s|\s$/g, "");  
12.             var att = name.split('.');  
13.             var ext = att[att.length - 1].toLowerCase();  
14.             var isCSS = ext == "css";  
15.             var tag = isCSS ? "link" : "script";  
16.             var attr = isCSS ? " type='text/css' rel='stylesheet' " : " type='text/javascript' ";  
17.             var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'";  
18.             if ($(tag + "[" + link + "]").length == 0) $("head").prepend("<" + tag + attr + link + "></" + tag + ">");  
19.         }  
20.     }  
21. });  
22. $.include('../js/jquery-ui-1.8.21.custom.min.js');  
23. $.include('../css/black-tie/jquery-ui-1.8.21.custom.css');  

將該函數寫入一個common.js檔案中，在html中載入該common.js檔案，就可以達到目的。該js函數出自以下連結： 
http://www.cnblogs.com/chenjinfa/archive/2009/03/17/1414178.html 
注意： 
1.在html5中，<script>標籤已經不支援language屬性了，所以我刪除了： 
Java代碼  

1. var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' ";  

中的language='javascript' 
2.原作者在寫入js和css標籤時，用的是： 
Java代碼  

1. document.write("<" + tag + attr + link + "></" + tag + ">");  

但是經過實踐，發現document.write（）方法會在寫入前清除原頁面的所有內容，也就相當於覆蓋的意思，這樣明顯達不到我的需要，我需要在載入頁面時動態向頁面匯入共通的js和css，而不能清除我原頁面的其他任何內容，所以查了下api，我改用了： 
Java代碼  

1. $("head").prepend("<" + tag + attr + link + "></" + tag + ">");  

這個方法，$("head").prepend（）方法的作用是在<head>標籤的最前端追加寫入內容。 

最後，再補充一個方法，也是通過共通js來實現，應該比上面這個方法更容易理解： 
Java代碼  

1. Dynamically loading external JavaScript and CSS files   
2.   
3. To load a .js or .css file dynamically, in a nutshell, it means using DOM methods to first create a swanky new "SCRIPT" or "LINK" element, assign it the appropriate attributes, and finally, use element.appendChild() to add the element to the desired location within the document tree. It sounds a lot more fancy than it really is. Lets see how it all comes together:   
4.   
5. function loadjscssfile(filename, filetype){   
6. if (filetype=="js"){ //if filename is a external JavaScript file   
7.   var fileref=document.createElement('script')   
8.   fileref.setAttribute("type","text/javascript")   
9.   fileref.setAttribute("src", filename)   
10. }   
11. else if (filetype=="css"){ //if filename is an external CSS file   
12.   var fileref=document.createElement("link")   
13.   fileref.setAttribute("rel", "stylesheet")   
14.   fileref.setAttribute("type", "text/css")   
15.   fileref.setAttribute("href", filename)   
16. }   
17. if (typeof fileref!="undefined")   
18.   document.getElementsByTagName("head")[0].appendChild(fileref)   
19. }   
20.   
21. loadjscssfile("myscript.js", "js") //dynamically load and add this .js file   
22. loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file   
23. loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file   

 
怎動態載入外部CSS與JS檔案

(function(){
xe = window.xe || {};
xe.load = {
filesAdded : {},
loadScript : function(src){
if(this.filesAdded[src]){
return 0;
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
this.filesAdded[src] = true;
document.body.appendChild(script);
},
loadScriptString : function(code){
var script = document.createElement('script');
script.type = 'text/javascript';
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
script.text = code;
}
document.body.appendChild(script);
},
loadCss : function(href){
if(this.filesAdded[href]){
return 0;
}
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = href;
this.filesAdded[href] = true;
document.getElementsByTagName('head')[0].appendChild(link);
},
loadCssString : function(code){
var style = document.createElement('style');
style.type = 'text/css';
try{
style.appendChild(document.createTextNode(code));
......餘下全文>>
 
jquery 轉JS 對於滑鼠移動載入CSS樣式的

在下認為三樓的有點小問題哦，小改了一下，樓主試試。
var navi = document.getElementById("navi"),
var ul = navi.getElementByTagName("ul")[0];
var lis = ul.getElementsByTagName("li");
for ( var i=0,len=lis.length; i <len; i++) {
(function(k){
lis[i].onmouseover = function(){this.className ="hovernavibg";};
lis[i].onmouseout = function(){this.className="";};
})(i);
}//for