easyui学习笔记1:搭建环境,编写hellworld

一、引言

为了方便没有接触过easyui的同学快速入门,考虑写easyui学习笔记。easyui组件非常多,本笔记打算只介绍几个开发MIS中常用的组件,包括layout,tab,tree,datagrid,theme,combobox,form,dialog等。此外介绍与后台java代码传递数据的问题。笔记中代码参考了一些博客和项目。初步打算写7篇,争取1天1篇。

EasyUI是一个基于Jquery的Web富客户端UI框架。为什么使用UI框架呢?

(1) 使用UI框架可以让没有美工的情况下也能开发出美观漂亮的系统界面。

(2) 掌握基本使用方法后,能帮助开发团队快速、简单地实现很多功能,如分页、排序、多对多等。

二、环境准备

(1) 因为IE对js支持不够友好,建议安装firefox或chrome浏览器。本笔记代码暂不考虑浏览器兼容问题。

(2) 编写代码过程中如果出错,界面直接显示空白,难以调试错误。因此,如果使用firefox,建议安装firebug插件。如果使用chrome,点击页面右键选择“审查元素”也可以辅助调试。

(3) 一个代码文本编辑器。我自己喜欢用EditPlus,其他当然也可以。

(4) 从官方网站上下载EasyUI库。网址是:www.jeasyui.com , 如果访问不了,可以从中文站点http://www.jeasyui.net/ 下载。

(5) 学习过程中建议要多看教程和示例demo。EasyUI官网上有很多教程和示例demo。如果讨厌E文,依旧建议http://www.jeasyui.net/ 。

(6) 如果不用到动态数据或Json数据,可以直接运行html网页即可测试代码。否则需要一个web服务器,tomcat即可。可在tomcat的webapps目录内编写代码,修改代码后不需要重启服务器。

三、HelloWorld

1. 在tomcat的webapps目录下新建easyui文件夹作为项目空间。解压下载的easyui库,本笔记本笔记使用的是3.1.5版本。

2. 新建子文件夹easyui/jslib/ easyui1.3.5用于存放easyui的库文件。在实际项目中,我们可能用到多个UI库,建议都扔到jslib内,每个UI库一个文件夹。我们需要将easyui根目录下3个文件拷贝到easyui1.3.5目录下。再将themes拷贝进来,然后再将locale目录拷贝进来,locale目录只留下easyui-lang-zh_CN.js(因为咱是中国人),其它删除。如下图所示

easyui学习笔记1:搭建环境,编写hellworld_第1张图片

3. 在easyui目录下新建about.html网页。为了应用easyui,需要在页面引入easyui的样式和js库文件。代码如下:

<html>
    <head>
        <meta charset="UTF-8">
        <title>easyui学习笔记</title>
        <link id="easyuiTheme" rel="stylesheet" type="text/css" href="jslib/easyui1.3.5/themes/default/easyui.css"/>
        <link rel="stylesheet" type="text/css" href="jslib/easyui1.3.5/themes/icon.css"/>
        <script type="text/javascript" src="jslib/easyui1.3.5/jquery.min.js"></script>
        <script type="text/javascript" src="jslib/easyui1.3.5/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="jslib/easyui1.3.5/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
    </head>
    <body>
        <script type="text/javascript">
            $.messager.alert('About','Hello EasyUI World!');
        </script>
    </body>
</html>

每个文件作用如下。

easyui.css为主题样式文件。Easyui提供浅蓝、灰色、黑色、Metro和Bootstrap等5种风格主题皮肤。

icon.css 为图标样式文件。

jquery.min.js 为压缩版jquery库文件

jquery.easyui.min.js 为压缩版easyui库文件

easyui-lang-zh_CN.js为本地化文件,可让easyui支持中文。

网页中就一句js,弹出一个消息框。$.messager是easyui的消息组件。

4. 运行tomcat,在浏览器中输入localhost:8080/easyui/about.html。如显示如下界面,恭喜你,环境配置成功。

easyui学习笔记1:搭建环境,编写hellworld_第2张图片


你可能感兴趣的:(easyui)