天天看点

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 中定义的一个函数,函数的第一个参数为准备加载的模块名称,第二个参数为加载成功之后的回调函数。这里用来提示已经加载成功。

 原文点这里

继续阅读