jQuery EasyUI学习笔记_1.easyui简介和简单应用

一、jQuery EasyUI简介

        jQuery EasyUI框架帮助你更简单快捷地构建你的网页。

        easyui是一个基于jQuery的用户接口插件集合

        easyui为构建现代化的，互动的，javascript应用提供了必要的功能

        使用easyui，不需要编写太多的javascript代码，只需要使用HTML定义自己的用户接口

        对HTML5完全支持，而且具备良好的可扩展性

        easyui为构建你的产品节省了很多时间和资源

        easyui是一个轻量级的UI组件，简单易用但功能强大

二、jQuery EasyUI的简单应用

要在项目中引入jQuery EasyUI，有两种引入方式：
第一种方式：引入总文件

<!--
easyui.css：easyui总样式 
icon.css：easyui使用的图标的样式
jquery-1.7.2.min.js：jquery1.7.2版本的压缩文件
jquery.easyui.min.js：easyui汇总的js压缩文件
easyui-lang-zh_CN.js：本地化js
注意：要在easyui.js文件引入之前将jquery.js引入，并且版本要对应，不然可能会出现兼容性问题
-->
<link type="text/css" rel="stylesheet" href="easyui/themes/default/easyui.css">
<link type="text/css" rel="stylesheet" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

如何使用：
通过js调用

<script type="text/javascript">
  $(function(){
    $('#dd').dialog({
      title: 'My Dialog',
      width: 400,
      height: 200,
      closed: false,
      cache: false,
      modal: true
    });
  });
</script>
<div id="dd">Dialog Content.</div>

第二种方式：使用载入器载入文件

<!--
jquery-1.7.2.min.js：jquery1.7.2版本的压缩文件
easyloader.js：easyui的载入器，用于载入需要用到的easyui组件的相关文件
-->
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="easyui/easyloader.js"></script>
<script type="text/javascript">
  $(function(){
//注意：这里的easyloader.load可以使用using代替
    easyloader.load('dialog', function(){
      $('#dd').dialog({
        title: 'My Dialog',
        width: 400,
        height: 200,
        closed: false,
        cache: false,
        modal: true
      });
    })
  });
</script>
<div id="dd">Dialog Content.</div>

以上两种方式都可以通过指定页面元素的class来使用相应的组件，代码如下：

<!--
注意：这里的easyui是通过类选择器来找到该组件需要的文件并且分析其通过什么方式调用：
如果是通过引入总文件的方式，那么直接使用parser渲染相应的组件；如果是通过载入器
的方式，那么先加载该组件需要的文件，然后再渲染该组件
-->
<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true">
  Dialog Content.
</div>