1. JQuery와 EasyUI 프레임 워크 개요

1.1. JQuery와 EasyUI은 무엇입니까

A : JQuery와 EasyUI은 기본 세트입니다 JQuery와 의 리치 클라이언트 의 UI의 프레임 워크. 이러한 공통 컨트롤에 포장됩니다 같이 UI의 라이브러리 프레임 워크 공동으로 리치 클라이언트 프레임 워크.

1.2. JQuery와 EasyUI은 의 역할 무엇입니까

A : 때문에 EasyUI는 A는 UI의 틀 때문에 그 기능은 페이지 처리의 효과를 보여주기 위해 사용된다. 페이지 레이아웃은 일반적으로 사무실 관리 시스템을 다시 작성하는 데 사용됩니다.

어떤 시장은 이제 일반적인 리치 클라이언트 프레임 워크입니다

答: EasyUI , LigerUI , ExtJS로

1.3. EasyUI 카탈로그 설명

1.3.1 다운로드 경로

EasyUI 의 공식 웹 사이트 주소는 다음과 같습니다 http://www.jeasyui.com/

1.3.2. 라이브러리를 지원하기 위해 필요한 기초

폴더가 빨간색으로 표시되어 PC의 사용 종료를 EasyUI의 프레임 워크를 사용하면 기본 라이브러리를 가져와야합니다.

1.3.3. 디렉토리 설명

데모 : 그림은 매우 중요 코드를 직접 예시 복사 할 수 있습니다 기억할 수없는, 미래에 개발 않습니다.

moblie - 데모 : 그림의 휴대 전화 측, 전화 쪽이 좋은 많이 가지고 있기 때문에 UI의 있도록 프레임 워크, EasyUI 전화 쪽은 기본적으로 아무도 사용하지를 (무시).

로케일 : 지원 라이브러리를 인코딩

플러그인 : 어떤 플러그인 소스 코드를 압축하지

SRC : 없음 압축 핵심 소스

테마 : 테마 스타일, 당신은되도록 선택할 수 있습니다

easyloader.js : 소스 로더

jquery.easyui.min.js : PC 라이브러리를 사용하여.

jquery.easyui.moblie.js : 라이브러리를 사용하여 이동 단말

jquery.min.js : JQuery와 프레임 워크

1.4. EasyUI 예를 시작할

1.4.1 개발 단계 :

요구 사항 : 사용 EasyUI은 드래그 층을 얻을 수 있습니다.

. 1.4.1.1 첫 번째 단계 : 가져 오기 EasyUI의 라이브러리 파일

하는 프로젝트 만들기 easyui 의 JS 프로젝트에 프레임의 사본을

. 1.4.1.2 번째 단계는 코드 작성

쓰기 easyui-draggable.html의 파일을

<! DOCTYPE html로>

<HTML>

<head>

<메타 캐릭터 = "UTF-8" >

<! - 가져 오기 easyui 도서관 ->

<! - 가져 오기 스타일 ->

<! -이 스타일은 easyui 아이콘을 사용하여 ->

<링크 REL = "스타일" HREF = "../js/easyui/themes/icon.css" >

<! -가 easyui 제어 스타일 ->

//$(function(){});

$(document).ready(function(){

//alert("-测试-");

$("#cc").draggable({

//值字符串类型，需要引号

handle:'#title'

});

</script>

</head>

<body>

==HTML格式==

<hr/>

<!--

控件引用：easyui-控件名

属性的设置:data-options="属性名:值"

-->

</div>

<br/>

==javascript格式==

<hr/>

</div>

</body>

</html>

1.5. EasyUI的三大基础概念

分别是：属性，事件，方法

属性指的是EsayUI框架控件（HTML）的属性

事件指的是 EasyUI 框架控件可以触发的事件（如：点击事件、双击事件等）

方法指的是 EasyUI 框架控件，只有调用了默认执行的逻辑代码块。

1.5.1. 属性设置

1.javascript方式设置：

格式：$(选择器).组件名({属性名:值});

注意事项

字符串类型的数值一定要有引号（单引号，或者双引号都可以）
属性之间使用逗号分隔，最后一个属性不可以有逗号

$("#cc").draggable({

//值字符串类型，需要引号

handle:'#title'

});

2.HTML方式设置：

格式：data-options=”属性名:值,属性名：值”

data-options="handle:'#title'"

1.5.2. 事件触发

JavaScript方式触发:

格式：$(选择器).组件名({事件名:function(参数列表){}});

$("#cc").draggable({

//以后在easyui里看到e是一个事件参数

onDrag:function(e){

console.log('x:'+e.pageX+'y:'+e.pageY);

}

});

2.HTML方式触发：

格式：data-options=”事件名:function(){}”

一般情况下不用

<div class="easyui-draggable" data-options="handle:'#title',onDrag:function(e){console.log('x'+e.pageX+',Y:'+e.pageY);}" style="width: 100px;height: 100px;border: 1px solid #ccc;

</div>

1.5.3. 方法调用

JavaScript方式调用:

无参数格式：$(选择器).组件名(“方法名”);

$("#cc").draggable("disable");

有参数的格式：$(选择器).组件名(“方法名”,参数1,参数2....);

$("#btn4").click(function(){

$('#pp').pagination("select",3);

});

有返回的方法格式：

var 变量名=$(选择器).组件名(“方法名”,参数1,参数2....);
var 变量名=$(选择器).组件名(“方法名”);

//getValue获取搜索值

$("#btn1").click(function(){

var value=$('#ss').searchbox("getValue");

alert(value);

});

--注意：方法调用没有HTML调用的格式。

1.5.4. 注意事项

我们必须要理解属性、事件、方法的使用方式，因为所有的EasyUI组件的就是千篇一律地使用上述的这三种概念的知识完成界面的构建以及事件的触发。

问题：EsayUI有很多组件，那么属性、事件、方法、去哪里找呢？

答：直接通过它的官方帮助文档，也可以在代码的src文件夹下查找

--通过官方 API（可以在网上找到中文版的）

--通过src目录与plugins目录的文件代码查看。

src目录是EsayUI的基础模块代码，plugins目录存放的是基于基础模块扩展的控件的实现代码

1.5.5. 关于组件之间的依赖关系

通过官方的API文档，我们发现有很多控件与控件之间是有依赖关系的。

如：SearchBox（搜索框）：依赖textbox与menubutton组件。

所以，如果当属性、事件、方法在当前控件找不到，可以去它的父控件上面去寻找。

2. 控件使用说明

本章的学习就是对EasyUI框架，提供的常用控件。包括了基础控件、布局控件、菜单、按钮、菜单、表单控件、窗口控件、表格控件、树控件

学习难点：

布局控件
表格控件
树控件

2.1. Base（基础）

基础控件全部控件如下：

我们主要通过常用的来教学，如果对于本讲义没有提及的控件，可以在学习完后，可以通过官方提供的的Demo配置API 文档了解。

拖动控件
分页控件
搜索框控件
提示框控件

2.1.1. Draggable（拖动）

2.1.1.1. HTML方式创建

class：通过class选择器，指定框架名

data-options：通过EasyUI框架自定义的属性data-options指定handle属性

<div id="title" style="padding:5px;background:#ccc;color:#fff">Title</div>

</div>

2.1.1.2. JavaScript方式创建

--HTM代码

<div id="title" style="padding:5px;background:#ccc;color:#fff">Title</div>

</div>

--通过JavaScript创建控件

$('#dd').draggable({

handle:'#title'

});

--注意：JavaScript与HTML绑定的ID必须要一一对应

handle属性：开始拖动的句柄。就是只有按住Title这个DIV才可以拖动

2.1.1.3. 结果展示

2.1.2. Pagination（分页）

2.1.2.1. HTML方式创建

</div>

2.1.2.2. JavaScript方式创建

--HTML声明代码

</div>

--Javscript代码

$('#pp').pagination({

total:114,

pageSize:10

});

2.1.2.3. 结果展示

2.1.3. SearchBox（搜索框）

2.1.3.1. HTML方式创建

</div>

<div data-options="name:'sports'">Sports News</div>

</div>

function doSearch(value,name){

alert('You input: ' + value+'('+name+')');

}

</script>

2.1.3.2. JavaScript方式创建

--HTML DIV代码

</div>

<div data-options="name:'sports'">Sports News</div>

</div>

function doSearch(value,name){

alert('You input: ' + value+'('+name+')');

}

</script>

--JavaScript创建控件

$('#ss').searchbox({

searcher:function(value,name){

alert(value + "," + name)

menu:'#mm',

prompt:'请输入值'

});

2.1.3.3. 结果展示

2.1.4. Tooltip（提示框）

2.1.4.1. HTML方式创建

2.1.4.2. JavaScript方式创建

--HTML声明

--Javascript创建代码

2.1.4.3. 结果展示

2.2. Layout（布局）

2.2.1. Panel（面板）

2.2.1.1. HTML方式创建

2.2.1.2. JavaScript方式创建

2.2.1.3. 结果展示

2.2.2. Tabs（选项卡）

2.2.2.1. HTML方式创建

2.2.2.2. 结果展示

2.2.3. Accordion（分类）

2.2.3.1. HTML方式创建

2.2.3.2. 结果展示

2.2.4. Layout（布局案例）

2.2.4.1. HTML方式创建

2.2.4.2. 结果展示

2.6.3. 注意事项

1.因为一个组件有可能由多个依赖的组件。

跟据组件依赖的不同部分，可以单独通过ID去定位某一部对应的组件。

如：包括有menu的组件，menu可以单独使用。

表格DataGrid.数据格式

{total: 200 rows: [

{记录}

]}

树的数据格式：

{

id:1

txt:’内容’

children:[

]

}

id：节点ID，对加载远程数据很重要。

text：显示节点文本。

state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。

checked：表示该节点是否被选中。

attributes: 被添加到节点的自定义属性。

children: 一个节点数组声明了若干节点。

JQuery와 EasyUI 프레임 워크

1. JQuery와 EasyUI 프레임 워크 개요

1.1. JQuery와 EasyUI은 무엇입니까

1.2. JQuery와 EasyUI은 의 역할 무엇입니까

1.3. EasyUI 카탈로그 설명

1.3.1 다운로드 경로

1.3.2. 라이브러리를 지원하기 위해 필요한 기초

1.3.3. 디렉토리 설명

1.4. EasyUI 예를 시작할

1.4.1 개발 단계 :

. 1.4.1.1 첫 번째 단계 : 가져 오기 EasyUI의 라이브러리 파일

. 1.4.1.2 번째 단계는 코드 작성

1.5. EasyUI的三大基础概念

1.5.1. 属性设置

1.5.2. 事件触发

1.5.3. 方法调用

1.5.4. 注意事项

1.5.5. 关于组件之间的依赖关系

2. 控件使用说明

2.1. Base（基础）

2.1.1. Draggable（拖动）

2.1.1.1. HTML方式创建

2.1.1.2. JavaScript方式创建

2.1.1.3. 结果展示

2.1.2. Pagination（分页）

2.1.2.1. HTML方式创建

2.1.2.2. JavaScript方式创建

2.1.2.3. 结果展示

2.1.3. SearchBox（搜索框）

2.1.3.1. HTML方式创建

2.1.3.2. JavaScript方式创建

2.1.3.3. 结果展示

2.1.4. Tooltip（提示框）

2.1.4.1. HTML方式创建

2.1.4.2. JavaScript方式创建

2.1.4.3. 结果展示

2.2. Layout（布局）

2.2.1. Panel（面板）

2.2.1.1. HTML方式创建

2.2.1.2. JavaScript方式创建

2.2.1.3. 结果展示

2.2.2. Tabs（选项卡）

2.2.2.1. HTML方式创建

2.2.2.2. 结果展示

2.2.3. Accordion（分类）

2.2.3.1. HTML方式创建

2.2.3.2. 结果展示

2.2.4. Layout（布局案例）

2.2.4.1. HTML方式创建

2.2.4.2. 结果展示

2.6.3. 注意事项

추천