EasyUI组件使用.pdf

1 / 10 Easyui 组件使用 一、EasyUI 组件的简单介绍 easyUI 提供了很多组件让我们使用，如下图所示： 使用这些组件可以帮助我们快速地进行项目开发，下面以一个用户登录程序为例讲解 EasyUI 组件的使用 二、EasyUI 组件的使用 2.1、创建测试的 JavaWeb 项目 2.2、编写测试代码 编写一个用户登录页面 Login1.html，用于输入用户名和密码进行登录，使用 JQuery 的 ajax 方法异步提交表单 Login1.html 的代码如下： 1 !DOCTYPE html 2 html 3 head 2 / 10 4 titleEasyUI 组件使用范例/title 5 meta http-equiv=content-type content=text/html; charset=UTF-8 6 !-- 引入 JQuery -- 7 script type=text/javascript src=jquery-easyui-1.4.1/jquery.min.js/script 8 !-- 引入 EasyUI -- 9 script type=text/javascript src=jquery-easyui-1.4.1/jquery.easyui.min.js/script 10 !-- 引入 EasyUI 的中文国际化 js，让 EasyUI 支持中文 -- 11 script type=text/javascript src=jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js/script 12 !-- 引入 EasyUI 的样式文件-- 13 link rel=stylesheet href=jquery-easyui-1.4.1/themes/default/easyui.css type=text/css/ 14 !-- 引入 EasyUI 的图标样式文件-- 15 link rel=stylesheet href=jquery-easyui-1.4.1/themes/icon.css type=text/css/ 16 script type=text/javascript src=js/Utils.js/script 17 script type=text/javascript 18 $(function(){ 19 //(g_contextPath); 20 //(g_basePath); 21 //页面加载完成之后创建登录的 dialog 22 $(#loginAndRegisterForm).dialog({ 23 title: 用户登录, 24 width: 240, 25 height: 150, 26 closable: false,//设置 dialog 不允许被关闭 27 cache: false, 28 modal: true, 29 buttons:[ 30 { 31 text:登录, 32 iconCls: icon-ok, 33 width:70, 34 height:30, 35 handler:function(){ 36 //(g_contextPath+/s