【Web前端学习笔记】EasyUI、JQuery表单验证
EasyUI、JQuery表单验证
A.EasyUI
1.概述
是一组基于JQuery的UI插件框架，提供了创建网页所需的一切
帮助开发者轻松打造出功能丰富且美观的web网页
2.特点
a.基于jquery库的插件集合
b.支持javascript和html标记两种渲染方式
c.支持根据需求扩展插件
3.框架介绍
demo：插件示例
locale： 国际化js文件
plugins: 组件的js文件
themes：组件样式文件
4.步骤
a.在easyui官网下载相应的文件
b.在页面引入相应的js文件和css样式文件
js：jquery.js/jquery.easyui.js/easyui-lang-zh_CN.js
css: easyui.css/icon.css
备注：通常把themes文件夹导入以便样式风格有效c.使用js或dom方式配置组件
EazyUI 你好！
5.Messager消息框
提供不同样式的消息框，包括警示（alert）、确认（confirm）、提示（prompt）、进展（progress）等等。所有的消息框都是异步的。用户可以在与消息框交互后使用回调函数来完成一些动作
创建方式
a.$.messager.show({options});
在屏幕的右下角显示一个消息窗口，options 参数是一个配置对象
b.$.messager.alert(title, msg, icon, fn);
警告提示框:
icon: 显示的图标图片。可用值: error question info warning
c.$.messager.confirm(title, msg, fn);
显示一个带"确定"和"取消"按钮的确认消息窗口
d.$.messager.prompt(title, msg, fn);
显示一个带"确定"和"取消"按钮的消息窗口，提示输入一些文本
6.DIalog对话框
对话框（dialog）是一个特殊类型的窗口
它在顶部有一个工具栏，在底部有一个按钮栏
默认情况下，对话框（dialog）只有一个显示在头部右侧的关闭工具
用户可以配置对话框行为来显示其他工具
（比如：可折叠 collapsible、可最小化 minimizable、可最大化 maximizable等等）
创建方式
a.通过标记从已有的 DOM 节点创建
代码见第一个例子
b.使用 javascript 创建
你好！
7.练习
写一个登录页面(比较用传统的css写法)
8.Layout组件
布局（layout）是有五个区域的容器
（北区 north、南区 south、东区 east、西区 west 和中区 center）
中间的区域面板是必需的，边缘区域面板是可选的
每个边缘区域面板可通过拖拽边框调整尺寸
也可以通过点击折叠触发器来折叠面板
布局（layout）可以嵌套，因此用户可建立复杂的布局
a.常用设置
1)north区域：用来显示网站的标题栏
2)south区域：用来显示版权以及一些说明
3)west区域：用来显示导航菜单
4)east区域：用来显示一些推广的项目
5)center区域：用来显示主要的内容 必须的区域
b.创建方式
1)使用已有DOM节点创建布局：代码在上方
2)js方式创建
9.Panel组件
a.Panel面板
是用来作为其他内容的一个容器，允许您创建用于多种用途的自定义布局
这是最基本构建其他组件(如layout, tabs, accordion, 等等) 的组件
还提供内置的可折叠,可闭,允许最大化和允许最小化行为和其他定制的行为
面板可以很容易地嵌入到web页面的任何位置
b.创建方式
通过标记创建面板：把 easyui-panel 的class 添加到DOM元素上
panel content.
panel content.
10.Accordion组件
a.Accordion
折叠面板（Accordion）包含一系列的面板（panel）
所有面板（panel）的头部（header）都是可见的
但是一次仅仅显示一个面板（panel）的 body 内容
当用户点击面板（panel）的头部（header）时
该面板（panel）的 body 内容将可见
同时其他面板（panel）的 body 内容将隐藏不可见
通常嵌套在layout的west面板作为菜单栏容器使用
b.html方式： 对应DOM元素添加名为easyui-accordion的class属性
c.综合应用
订单管理系统
11.Tabs组件
a.概述
Tabs 有多个可以动态地添加或移除的面板（panel）
您可以使用 Tabs 来在相同的页面上显示不同的实体
Tabs 一次仅仅显示一个面板（panel）
每个面板（panel）都有标题、图标和关闭按钮
当 Tabs 被选中时，将显示对应的面板（panel）的内容
通常用作layout布局的center中内容显示页面容器
b.创建方式
html标签方式： 对应DOM元素添加名为easyui-tabs的class属性
你好！
大家好！
c.动态添加Tabs组件
通过使用 jQuery EasyUI 可以很容易地添加 Tabs
只需要调用 'add' 方法即可
12.Tree组件
a.Tree树
通常以树形结果显示分层数据，适合做菜单使用
一个树形菜单（Tree）可以从标记创建
easyui 树形菜单（Tree）也可以定义在
元素中
无序列表的
元素提供一个基础的树（Tree）结构
每一个
元素将产生一个树节点 子
元素将产生一个父树节点
b.给DOM元素添加名为eaysui-tree的class,结合ul和li元素
- Folder
- Sub Folder1
- File 11
- File 12
- File 13
- File 2
- File 3
- File 21
c.JS创建
d.API说明
e.从后台获取
前台
后台
package org.xxxx.demo01; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/TreeServlet") public class TreeServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置响应方式 response.setContentType("application/json;charset=utf-8"); // 创建一个json字符串 String str = "[{\"id\":\"1\",\"text\":\"Node1\",\"state\":\"closed\",\"children\":[{\"id\":\"11\",\"text\":\"Node11\"},{\"id\":\"12\",\"text\":\"Node12\"}]},{\"id\":\"2\",\"text\":\"Node2\",\"state\":\"open\"}]"; // 相应给前台 response.getWriter().write(str); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }结果
如果把state设置为closed(且没有子节点)\，
则该节点会加载整个tree，形成死循环
13.Datagrid组件
a.Datagrid数据网络
加载列表信息，可以起到分页，查询，即时刷新等效果，通常基于table实现
b.静态数据
姓名 性别 张三 男 李四 女 c.后台动态数据(添加网络工具栏)
前台
姓名 性别 后台
package org.xxxx.demo01; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/InfoServlet") public class InfoServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json;charset=utf-8"); String jsonStr = "[{\"name\":\"张三\",\"sex\":\"male\"},{\"name\":\"王六\",\"sex\":\"female\"}]"; response.getWriter().write(jsonStr); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
14.标识符
a.添加复选框
对应的列添加checkbox="true"属性就行
b.获取选择的数据
B.JQuery表单验证
1.概述
在做网页表单时时常，需要在客户端对表单填写的数据进行验证一番才能提交
用户名必填 重复密码输入必须相同 电子邮件格式必须正确的
我们可以通过自己编写JavasScript代码来验证
但是有时数据量过多时就会有些难度了，还有国际化等问题
2.validator表单验证
基于jQuery的jquery.validate验证框架帮我们解决了困难
我们可以通过它迅速验证一些常见的输入
并且可以自己扩充自己的验证方法，而且对国际化也有非常好的支持
3.步骤
a.引用对应的js文件
jquery.js jquery.validate.js jquery.metadata.js
b.使用class属性，将校验规则写到表单对应控件中
或者使用单独的js文件定义
c.调用表单的validate()方法
4.练习
将校验规则写到控件中
5.规则
