Dynamic Loading of js and css jquery plugin and jqueryplugin

Source: Internet
Author: User

Dynamic Loading of js and css jquery plugin and jqueryplugin
A simple jquery code that dynamically loads js and css. It is used to load common js and css files through js functions when a page is generated.
Java code

  1. // How to use the function below:
  2. // $. Include ('file/ajaxa. js'); $. include ('file/ajaxa.css ');
  3. // Or $. Your depath = 'file/'your images .your de('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 ');

Write the function into a common. js file and load the common. js file in html. The js function comes from the following link:
Http://www.cnblogs.com/chenjinfa/archive/2009/03/17/1414178.html
Note:
1. In html5, the <script> tag does not support the language attribute, So I deleted it:
Java code
  1. Var attr = isCSS? "Type = 'text/css 'rel = 'stylesheet'": "language = 'javascript 'Type = 'text/javascript '";

Language = 'javascript 'in'
2. When writing js and css labels, the original author uses:
Java code
  1. Document. write ("<" + tag + attr + link + "> </" + tag + "> ");

However, after practice, we found that document. the write () method clears all the content of the original page before writing, which is equivalent to overwriting, which obviously does not meet my needs, I need to dynamically import common js and css to the page when loading the page, but cannot clear any other content on my original page. So I checked the api and switched:
Java code
  1. $ ("Head"). prepend ("<" + tag + attr + link + "> </" + tag + "> ");

In this method, $ ("head"). prepend () is used to Append content to the front end of the
Finally, we can add another method, which is also implemented through Common js. It should be easier to understand than the above method:
Java code
  1. Dynamically loading external JavaScript and CSS files
  2. To load. 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:
  3. Function loadjscssfile (filename, filetype ){
  4. If (filetype = "js") {// if filename is a external JavaScript file
  5. Var fileref = document. createElement ('script ')
  6. Fileref. setAttribute ("type", "text/javascript ")
  7. Fileref. setAttribute ("src", filename)
  8. }
  9. Else if (filetype = "css") {// if filename is an external CSS file
  10. Var fileref = document. createElement ("link ")
  11. Fileref. setAttribute ("rel", "stylesheet ")
  12. Fileref. setAttribute ("type", "text/css ")
  13. Fileref. setAttribute ("href", filename)
  14. }
  15. If (typeof fileref! = "Undefined ")
  16. Document. getElementsByTagName ("head") [0]. appendChild (fileref)
  17. }
  18. Loadjscssfile ("myscript. js", "js") // dynamically load and add this. js file
  19. Loadjscssfile ("javascript. php", "js") // dynamically load "javascript. php" as a JavaScript file
  20. Loadjscssfile ("mystyle.css", "css") // dynamically load and add this. css file
 
How to dynamically load external CSS and JS files

(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 ));
... The remaining full text>

Jquery to JS

Next, I think there is a small problem on the third floor. I just changed it. Try it.
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 );
} //

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.