初接触easyUI

Posted 2020-06-20

    jQuery Easy是一组基于jQuery的UI插件集合，EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

---

 

    注：jQuery的特点

 

• 基于jQuery用户界面插件的集合。
• 为一些当前用于交互的js应用提供必要的功能。
• 支持两种渲染方式：js方式（如：$("#p").panel({......})）以及html方式（如：class="easyui-panel"）。
• 可以通过data-options属性来支持HTML5。
• 开发产品时可节省时间和资源。
• 简单，但是非常强大。
• 支持扩展，可根据自己的需求扩展控件。

---

    jQuery EasyUI官方网址为：http://www.jeasyui.com/，其中文帮助在：http://www.zi-han.net/case/easyui/。

    然后在下载jQuery包后，里面有这些文件夹

• demo文件夹：主要放着一些示例的例子。
• locale文件夹：放着语言相关的js文件，其中中文语言包为easyui-lang-zh_CN.js文件。
• plugins文件夹：存放一些功能插件。（使用懒汉式加载必须保留，饿汉式加载可以删除）
• src文件夹：各个插件的源文件，不是全部，其实有些功能不是开源的，是商业授权，因此没有源文件。（正式项目不需要引用此文件夹）
• themes文件夹：存放主题，就是css文件和要用到的图标文件，里边提供5种风格。（easyui.css是其它所有css的合并后结果）

     注：搭建easyUI时，先新建一个html页面然后在根目录新建一个名为UI的文件夹并将jQuery EasyUI的包文件复制进去即可，但是必须先按如下的顺序引用（在js标签中加上charset="utf-8"可以防止页面乱码）

1     <link href="UI/themes/default/easyui.css" rel="stylesheet" />
2     <link href="UI/themes/icon.css" rel="stylesheet" />
3     <script src="UI/jquery-1.8.3.min.js"type="text/javascript" charset="utf-8"></script>
4     <script src="UI/jquery.easyui.min.js"type="text/javascript" charset="utf-8"></script>
5     <script src="UI/locale/easyui-lang-zh_CN.js"type="text/javascript" charset="utf-8"></script>