学习使用EasyUI之easyloader 加载
easyloader 简单载入器
这个组件主要作用是按需加载组件。
在之前的使用中，我们先在开头引入 easyui 的核心 min js 和 css ：
<!-- 引入 jQuery EasyUI 核心库 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/jquery.easyui.min.js" ></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5/themes/default/easyui.css" type="text/css"/>
但是如果只用到 EasyUI 的其中几个组件，将其全部引入就很大，使项目多出很多用不到的东西。但是，如果单独引入又不知道用到的组件依赖了哪些组件。
easyLoader的出现就是帮助我们解决这些问题的。
-
easyLoader的用处：
用来帮助我们自动加载所需的脚本文件和样式文件，这样，我们只需要在页面中引用 jQuery 脚本 和 easyloader 脚本，easyloader 就可以帮助我们分析模块的依赖关系，先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui开头的标签都转化成 easyui的控件。 -
easyloader的使用：
使用easyloader加载所需的模块：- messager（消息框）
- dialog（对话框）
页面中可以简单的仅仅写入下面的内容：
-
jQuery 核心库
-
easyLoader.js
并不需要通常的样式表和一大堆的脚本引用。
[图片上传失败...(image-4238cb-1537106115500)]
- 示例代码如下：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>EasyUI学习笔记————EasyUI的easyLoader的使用</title>
<!-- 引入jQuery 核心库-->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/jquery.min.js"></script>
<!-- 引入easyLoader.js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/easyloader.js"></script>
</head>
<script type="text/javascript">
$(function () {
//使用easyloader加载dialog模块使用到的js和css样式
easyloader.load('dialog',function(){
/*使用JavaScript动态创建EasyUI的Dialog步骤：
1、定义一个div并给它指定一个id
2、使用jQuery选择器选中该div
3、选中后调用dialog()方法就可以创建EasyUI的Dialog
*/
//使用自定义参数创建EasyUI的dialog
$('#d2').dialog({
title:'使用JavaScript创建的自定义参数Dialog',
width:400,
height:200,
closed:false,
cache:false,
modal:true
});
});
easyloader.locale="zh_CN";
/*easyloader.load还有一个别名叫using，定义在window对象上*/
//使用easyloader加载messager模块使用到的js和css样式
using("messager",function(){
alert("加载成功！");
$("#btnAlert").click(function () {
$.messager.alert('Warning', 'The warning message');
});
});
});
</script>
<body>
<%-- 使用纯html的方式创建EasyUI的dialog的步骤：
1、定义一个div
2、将这个div的样式属性设置成easyui-dialog
--%>
<div class="easyui-dialog" id="d1" title="EasyUI Dialog" style="width: 500px;height: 300px;">1、Hello !纯html创建的！</div>
<div id="d2">2、使用自定义参数创建EasyUI的dialog</div>
<a id="btnAlert" class="easyui-linkbutton">弹出框提示</a>
</body>
</html>
网友评论