非常简洁的动态加载js和css的jquery plugin-控件新闻-慧都网

产品

产品
资讯
资源
视频
学院
示例

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

原创|其它|编辑：郝浩|2009-03-18 10:32:34.000|阅读 1082 次

概述：用非常简洁的手法介绍了如何在 jquery plugin中动态加载js和css

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“，实现了基于角色权限系统等功能。

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：博客园

上一篇：王者用户界面开发控件—RadControls Q1 2009 下一篇：c#中使用多线程访问 winform中控件的若干问题