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

ravilalee

ravilalee

2016-02-19 16:15

下面图老师小编跟大家分享非常简洁的动态加载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});

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

  示例:部门管理页 Department.aspx

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

展开更多 50%)
分享

猜你喜欢

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

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

动态加载外部CSS与JS文件

Web开发
动态加载外部CSS与JS文件

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

动态加载外部css或js文件

Web开发
动态加载外部css或js文件

动态加载js的几种方法

Web开发
动态加载js的几种方法

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用ajax动态加载需要的js文件

Web开发
用ajax动态加载需要的js文件

动态调用css文件——jquery的应用

Web开发
动态调用css文件——jquery的应用

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

javascript实现的超强语法高亮引擎

javascript实现的超强语法高亮引擎

QQ2024 SP5体验新增远程教学模式

QQ2024 SP5体验新增远程教学模式
下拉加载更多内容 ↓