天天看點

easyui 源碼分析(1)

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 中定義的一個函數,函數的第一個參數為準備加載的子產品名稱,第二個參數為加載成功之後的回調函數。這裡用來提示已經加載成功。

 原文點這裡

繼續閱讀