非常简洁的动态加载js和css的jquery plugin

1// plugin author :  chenjinfa@gmail.com
2// plugin name : $.include
3//     $.include('file/ajaxa.js');$.include('file/ajaxa.css');
4//  or $.includePath  = 'file/';$.include(['ajaxa.js','ajaxa.css']);
5
6$.extend({
7    includePath: '',
8    include: function(file) {
9        var files = typeof file == "string" ? [file]:file;
10        for (var i = 0; i < files.length; i++) {
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' " : " language='javascript' type='text/javascript' ";
17            var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'";
18            if ($(tag + "[" + link + "]").length == 0) document.write("<" + tag + attr + link + "></" + tag + ">");
19        }
20    }
21});

放在javascript文件头部,就像C#(using...)或Java(import ...)

示例:部门管理页 Department.aspx

注:因编辑器的问题,内容(http://www.cnblogs.com)原文是“. . / . . /”

.
<head>
<link rel="stylesheet" href="http://www.cnblogs.com/css/common.css" type="text/css"/>
<script src="http://www.cnblogs.com/javascript/jquery.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/javascript/common.js" type="text/javascript"></script>
<script src="DepartmentInfo.js" type="text/javascript"></script>
</head>

include plugin 代码 放在公共common.js。

DepartmentInfo.js 文件代码

$.includePath = 'http://www.cnblogs.com/javascript/';
$.include(['json2.js', 'jquery.tree.js', 'jquery.tree.css']);

$(function() {
  $("#depTree").tree({
    url: "http://www.cnblogs.com/service/ES_SYSTEM.svc/DEP_INFO_Tree"
  });
  .
});
.

这样写法挺好看的。

以后有空再我发表我写的整个项目及体会。基于asp.net Data Service 和 jquery的一套框架系统, 名称定为:“E-Frame“,实现了基于角色权限系统等功能。

时间: 2025-01-31 07:05:32

非常简洁的动态加载js和css的jquery plugin的相关文章

一个简单的动态加载js和css的jquery代码_jquery

一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include('file/ajaxa.js');$.include('file/ajaxa.css'); //or $.includePath = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files are in the

动态加载js、css等文件跨iframe实现

 这篇文章主要介绍了动态加载js.css等文件跨iframe实现的方法,需要的朋友可以参考下 1.动态加载js,css文件(用原生js和jquery)    iframe结构:  frame0(父)  frame2(子)  frame3(子)    frame2中触发事件,动态的向frame3中 加载js.css文件和 dom元素?    *同级之间可以调用,可以 通过 子-父-子 的方式调用同级  parent.parentFram("这个方法在调用其他子farme");    1.

动态加载js、css的简单实现代码_javascript技巧

一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.

动态加载js、css的实例代码_javascript技巧

一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.

动态加载js、css等文件跨iframe实现_javascript技巧

1.动态加载js,css文件(用原生js和jquery) iframe结构: frame0(父) frame2(子) frame3(子) frame2中触发事件,动态的向frame3中 加载js.css文件和 dom元素? *同级之间可以调用,可以 通过 子-父-子 的方式调用同级 parent.parentFram("这个方法在调用其他子farme"); 1.jquery的append() 复制代码 代码如下: 速度快,同步(需要引入jquery) var oBody = docum

js异步动态加载js与css文件代码

 jquery动态加载css,js文件方法简单很, 例 方法1: 代码如下 $.getscript("test.js"); 方法2: 代码如下 function loadjs(file){  var head = $('head').remove('#loadscript');  $("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:

动态加载js和css(外部文件)_javascript技巧

复制代码 代码如下: // 动态加载外部js文件 var flag = true; if( flag ){ loadScript( "js/index.js" ); }; function loadScript( url ){ var script = document.createElement( "script" ); script.type = "type/javascipt"; script.src = url; document.get

jquery实现动态加载js文件的例子

一.jQuery getScript()方法加载javascript jQuery内置了一个方法可以加载单一的js文件:当加载完成后你可以在回调函数里执行后续操作.最基本的使用jQuery.getScript的方法是这样: jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) {/* 做一些加载完成后需要执行的事情 */}); 这个getScript方法返回一个jqxhr,你可以像下面这样用它: j

如何使用jquery动态加载js,css文件实现代码_jquery

使用jquery动态加载js,css文件 复制代码 代码如下: $.extend({ includePath: '', include: function(file) { var files = typeof file == "string" ? [file]:file; for (var i = 0; i < files.length; i++) { var name = files[i].replace(/^\s|\s$/g, ""); var att =