jQuery EasyUI

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
特点
jQuery EasyUI为提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。

jQuery EasyUI有以下特点：

1、基于jquery用户界面插件的集合

2、为一些当前用于交互的js应用提供必要的功能

3、EasyUI支持两种渲染方式分别为javascript方式（如：$('#p').panel({...})）和html标记方式（如：class="easyui-panel"）

4、支持HTML5（通过data-options属性）

5、开发产品时可节省时间和资源

6、简单，但很强大

7、支持扩展，可根据自己的需求扩展控件

8、目前各项不足正以版本递增的方式不断完善

使用EasyUI

在网站http://www.jeasyui.net/可得到全面的EasyUI使用内容,包括EasyUI Demo,EasyUI教程,EasyUI文档等学习内容

image.png
在EasyUI Demo可查询到多个EasyUI设计实例

image.png
在EasyUI 文档中可查询到其各种插件的使用示例

image.png
插件列表如下：

image.png

在Myeclipse中使用EasyUI

1.首先下载EasyUI的压缩包
http://www.jeasyui.net/download选择jQuery EasyUI 下载,此文章中下载的jquery-easyui-1.7.6版本
下载得到压缩包,并解压

image.png
2.在Myeclipse中新建web工程,在WebRoot文件夹中新建一个EasyUI文件夹用于存放EasyUI插件相关文件,将解压后的文件复制到文件夹中

image.png
此处一创建一个登录表单为例
新建一个login.jsp文件
打开EasyUI->demo->form->basic.html文件

image.png
如图红框所示向login.jsp文件的<head>标签下添加相应的引入文件语句
并修改引用路径

    <base href="<%=basePath%>">
    
    <title>My JSP 'login.jsp' starting page</title>
    
    <link rel="stylesheet" type="text/css" href="EasyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="EasyUI/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="EasyUI/demo.css">
    <script type="text/javascript" src="EasyUI/jquery.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>


  </head>

这里使用的是相对路径形式
复制basic.html中<body>标签下的内容到login.jsp中根据需求进行修改

<body>
    <div align="center">
    <div style="margin:20px 0;"></div>
    <div class="easyui-panel" title="用户登录" style="width:400px;max-width:400px;padding:30px 60px;">
        <form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="账号:" style="width:100%" data-options="label:'账号',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-passwordbox"  name="密码:" style="width:100%" data-options="label:'密码',required:true">
            </div>
            
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
    </div>
    <script>
        function submitForm(){
            $('#ff').form('submit');
        }
        function clearForm(){
            $('#ff').form('clear');
        }
    </script>
    
  </body>

开启tomcat 7.0服务器,运行登录网页界面如下

image.png