easyloader 用來幫助我們自動加載所需的腳本檔案和樣式檔案(用來加載空間的css和js檔案),這樣,我們隻需要在頁面中引用 jquery 腳本 和 easyloader 腳本,easyloader 就可以幫助我們分析子產品的依賴關系,先加載依賴項。子產品加載好了會調用parse子產品來解析頁面。把class是easyui開頭的标簽都轉化成 easyui的控件。
<%@ 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.4.1/jquery.min.js"></script>
<!-- 引入easyloader.js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.4.1/easyloader.js"></script>
<script type="text/javascript">
$(function(){
//使用easyloader加載dialog子產品使用到的相關js和css樣式
easyloader.load('dialog',function(){
//使用自定義參數建立EasyUI的Dialog
$('#dd2').dialog({
title: '使用JavaScript建立的Dialog',
width: ,
height: ,
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>
</head>
<body>
<div class="easyui-dialog" id="dd1" title="EasyUI Dialog" style="width: 500px;height: 300px;">
Hello World!
</div>
<div id="dd2">Dialog Content</div>
<a id="btnAlert" class="easyui-linkbutton">彈出提示框</a>
</body>
</html>
load 用來使用代碼來說明需要加載的子產品,這是在 easyloader 中定義的一個函數,函數的第一個參數為準備加載的子產品名稱,第二個參數為加載成功之後的回調函數。這裡用來提示已經加載成功。
原文點這裡