easyui2

最新推荐文章于 2019-11-10 22:55:09 发布

bluss-yang

最新推荐文章于 2019-11-10 22:55:09 发布

阅读量366

点赞数

文章标签： class easyui

以后就不写转载了，都是来自此人，只是本人自己写了程序验证了下。

Easyui第二课之EasyLoader（加载器）

分类： easyui 发表于 2011-11-27 08:48 , 已有 15130次阅读

EasyLoader

这个组件主要是为了easyui的其他组件的按需加载而出生。那么什么情况下会用到他呢。

第一，你觉得一次性导入easyui的核心min Js和css太大

第二，你只用到easyui的其中几个组件

第三，你想使用其中的一个组件，但是你又不知道这个组件依赖了那些组件。

如果你有以上三中情况，那么推荐你使用easyLoader。它正是为了解决这些而存在的。

easyloader有7个属性2个事件，1个方法。

这写都还是很容易明白的，我也就不多说什么了。那么GodSon就告诉大家一些他起他的用处吧。

easyloader呢，其实还是一个js和css异步加载和按模块加载的实现。那么我们怎么用他来实现我们自己js和css的异步加载呢？我想这个才是大家最关心的东西吧。

看到属性中modules属性了吧。这个属性就是easyui定义模块用的。modules是一个json格式对象。这个对象的完全定义形式是

modules = ｛draggable：｛js : "jquery.draggable.js",css : "pagination.css",dependencies : ["linkbutton"]｝｝;

键值是定义的模块名称，值又是一个json对象，包含三个属性js,css,dependencies。js就是这个模块需要导入的js名称，css是模块依赖的样式，dependencies就是这个模块依赖的其他模块。

下面就开始说明怎么添加我们自己的模块，并且用他来加载。

首先要小小改造一下easyload这个js，他的第二行定义了一个var _1 = {},这个就是他自己本身已经定义的modules。我们要改造就的就是下面代码中应用到这个_1变量的地方。把用到这个_1变量的地方换成EasyLoader.modules，记住最后一个“modules:_1”的引用不要修改。这样第一步就完成了。

第二步，你的自己宽展这个modules加人你自己的模块。

modules内容如下：

 
easyloader.modules = $.extend({},{
 
    "mymodule":{
 
        js:'http://easyui.btboys.com/mymodule.js'       css:'http://easyui.btboys.com/mymodule.css' }
 
},easyloader.modules);

看上面的那段js，这段js的意思就是在原有easyloader.modules的基础上在增加一个mymodule的模块，并且定义了模块的js和css

这样我增加的第一个自定义模块就添加完成了。那么使用的方式也和easyload加载其他模块一样。这里需要注意的是我们自己定义的js和css

必须是要绝对路径的。

 
easyloader.load('mymodule', function(){      
 
 //do something
 
});

是不是很简单呢。如果你有更多模块的话

 
easyloader.modules = $.extand({},{
 
    "mymodule":{
 
        js:'http://easyui.btboys.com/mymodule.js'，
 
css:'http://easyui.btboys.com/mymodule.css'},
 
        "mymodule2":{
 
        js:'http://easyui.btboys.com/mymodule2.js'      css:'http://easyui.btboys.com/mymodule2.css'    },
 
        "mymodule3":{
 
        js:'http://easyui.btboys.com/mymodule3.js'      css:'http://easyui.btboys.com/mymodule3.css'    },
 
        .......
 
},easyloader.modules);

好了easyload就介绍了这么多了。还有什么不懂的可以留言的。呵呵··

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">

<title>Basic Panel - jQuery EasyUI Demo</title>
<script type="text/javascript" src="js/easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/easyui/easyloader.js"></script>

<script type="text/javascript" charset="UTF-8">

</script>
<style type="text/css">
.easyui-accordion ul {
list-style-type: none;
margin: 0px;
padding: 10px;
}

.easyui-accordion ul li {
padding: 0px;
}

.easyui-accordion ul li a {
line-height: 24px;
}

.easyui-accordion ul li div {
margin: 2px 0px;
padding-left: 10px;
padding-top: 2px;
}

.easyui-accordion ul li div.hover {
border: 1px dashed #99BBE8;
background: #E0ECFF;
cursor: pointer;
}

.easyui-accordion ul li div.hover a {
color: #416AA3;
}

.easyui-accordion ul li div.selected {
border: 1px solid #99BBE8;
background: #E0ECFF;
cursor: default;
}

.easyui-accordion ul li div.selected a {
color: #416AA3;
font-weight: bold;
}
</style>
<script type="text/javascript">
$(function(){
easyloader.load(['dialog','messager'],function(){
$('#c2').dialog({
modal:true
});
$.messager.alert('Tile','load ok');
});

});
function closes(){
$("#loading").fadeOut("normal",function(){
$(this).remove();
});
}
var pc;
$.parser.onComplete=function(){
if(pc) clearTimeout(pc);
pc=setTimeout(closes,13000);
}

</script>
</head>
<body>
<div id='Loading' style="position:absolute;z-index:1000;top:0px;left:0px;width:100%;height:100%;background:#DDDDDB url('style/images/bodybg.jpg');text-align:center;padding-top: 20%;"><h1><image src='style/images/loading.gif'/><font color="#15428B">加载中···</font></h1></div>

<div id="c2" title="dsds" style="width:400px;height:200px">dsdsdsd</div>
</body>

</html>

觉得这个很墨迹，直接引入就行了，没必要多写easyloader

bluss-yang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui2

以后就不写转载了，都是来自此人，只是本人自己写了程序验证了下。Easyui第二课之EasyLoader（加载器）分类：easyui 发表于 2011-11-27 08:48 , 已有15130次阅读EasyLoader这个组件主要是为了easyui的其他组件的按需加载而出生。那么什么情况下会用到他呢。第一，你觉得一次性导入easyui的核心min Js和css太
复制链接

扫一扫