jQuery EasyUI를 처음 사용하는 방법 소개_jquery

jQuery EasyUI는 jQuery를 기반으로 한 UI 플러그인 모음이며, jQuery EasyUI의 목표는 웹 개발자가 기능이 풍부하고 아름다운 UI 인터페이스를 보다 쉽게 ​​만들 수 있도록 돕는 것입니다. 개발자는 복잡한 자바스크립트를 작성할 필요도 없고 CSS 스타일에 대한 심층적인 이해도 필요하지 않습니다. 모든 개발자는 간단한 HTML 태그만 알면 됩니다.

jQuery EasyUI는 아코디언, 콤보 상자, 메뉴, 대화 상자, 탭, 트리, 창 등과 같은 대부분의 UI 컨트롤을 사용할 수 있도록 해줍니다.

자, 첫 번째 탐험 여정을 시작하겠습니다.
jQuery EasyUI---아코디언
아코디언 효과는 누구에게나 익숙할 것입니다.
기본 코드:

코드 복사 코드는 다음과 같습니다.

;/head>

;div id ="aa" class="easyui-accordion" fit="true" style="width:300px;height:200px;">

Accordion1

< ;h3>아코디언2

아코디언3

div>

코드는 매우 간단합니다. 간단한 html을 달성할 수 있습니다. 여기서 가장 중요한 것은 먼저 jquery-1.4.2.min.js와 jquery.easyui.min.js를 참조하는 것입니다.
효과:

단순한 HTML이므로 js를 통해 아코디언, 크기, 위치 등을 쉽게 제어할 수 있습니다.


jQuery EasyUI---DataGrid

이름에서 알 수 있듯이 데이터 바인딩 및 디스플레이 컨트롤입니다.
기본 코드:



코드 복사

코드는 다음과 같습니다.

<머리>








<본문>


 

jQuery EasyUI---Dialog

网页窗体效果。
基本代码：

复主代码


代码如下:

<머리>

<스크립트>
$(function(){
$('#dd').dialog({
toolbar:[{
text:'添加',
iconCls:'icon-add',
handler:function(){
alert('添加数据')
}
},'-',{
text:'保存',
iconCls:'icon- save',
handler:function(){
alert('保存数据')
}
}],
buttons:[{
text:'提交',
iconCls:'icon-ok',
handler:function(){
alert('提交数据')
}
},{
text:'取消',
handler:function(){
$('#dd').dialog('取消');
}
}]
});


<본문>

jQuery EasyUI---대화상자

效果：

 

jQuery EasyUI---탭

无论是网站还是管理软件，我们越来越多的使用탭 ，EasyUI自然也进行了支持。

基本代码：


复代码

代码如下:

<머리>






<본문>

Tab1 콘텐츠

콘텐츠 1

콘텐츠 2

콘텐츠 3

效果：
 
jQuery EasyUI---Messager
信息提示控件，可以很好的进行数据的提示，推荐.
基本代码：

复代码 代码如下:

<머리>





<스크립트>
function show1() {
$.messager.show({
title: '提示信息1',
msg: '信息1',
showType: 'show'
});
}
function show2() {
$.messager.show({
title: '提示信息2',
msg: '信息5分钟后消失.',
시간 초과: 5000,
showType: '슬라이드'
});
}
function show3() {
$.messager.show({
title: '渐进显示信息3',
msg: '渐进显示信息3',
timeout : 0,
showType: '페이드'
});
}


<본문>

信息提示

显示 |
滑动 |
渐进显示 |

效果：

页面左下角信息提示
jQuery EasyUI---ValidateBox
数据验证掻䧶，可以很好的对表单数据进行验证。
基本代码：

复代码 代码如下:

<머리>






<본문>

<테이블>

이름:



电子邮件:



URL:



说명:

불요식은 只需对要验证적 控件required="true" validType="url"就可以。
效果：
 
jQuery EasyUI---LayOut
页면布局，可以将整个页면划分成几个区域。类似ExtJS中的Border布局。
基本代码：

复제代码 代码如下:

http://www.w3.org/1999/xhtml">

   
   
   
   


   

       

           

Border布局

       

       

       

        < div 지역="동" icon="icon-reload" title="메뉴2" 분할="true" 스타일="너비:180px;">
       

       

       

       

       

   

효과:

jQuery EasyUI---스킨 변경

jQuery EasyUI는 통합 CSS 스타일을 사용하며 이는 수정에도 매우 편리합니다.

그림과 같이 각 컨트롤에는 전용 CSS가 있습니다. 그에 따라 수정하면 됩니다. CSS에 대한 간단한 이해만 있으면 됩니다.

요약: jQuery EasyUI 경험은 여기서 끝납니다. 콤보 상자, 분할 버튼 등과 같이 여기에 소개되지 않은 일부 컨트롤이 있습니다.

공식 홈페이지: http://jquery-easyui.wikidot.com/start

다운로드 주소: http://jquery-easyui.wikidot.com/download

이 기사의 코드 패키지 다운로드
기사 작성자: Gao Weipeng(Brian)