jQuery EasyUI 사용 설명

13881 단어 jQueryEasyUI
jQuery EasyUI 는 jQuery 를 기반 으로 한 UI 플러그 인 집합 이 며,jQuery EasyUI 의 목 표 는 웹 개발 자 들 이 기능 이 풍부 하고 아름 다운 UI 인터페이스 를 쉽게 만 들 수 있 도록 돕 는 것 이다.개발 자 는 복잡 한 javascript 을 작성 할 필요 도 없고 css 스타일 에 대해 깊이 이해 할 필요 도 없습니다.개발 자가 알 아야 할 것 은 간단 한 html 태그 만 있 습 니 다.
 
 jQuery EasyUI 는 accordion,combobox,menu,dialog,tabs,tree,window 등 대부분의 UI 컨트롤 을 제공 합 니 다.
OK,다음은 우리 의 첫 여행 을 시작 하 겠 습 니 다.jQuery EasyUI-Accordion 아코디언 효과 에 대해 잘 아 실 겁 니 다.기본 코드:
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Accordion</title>
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../jquery.easyui.min.js" type="text/javascript"></script>
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../themes/icon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"></script>
</head>
<body>
<div style="overflow:auto;width:600px;height:300px;padding:10px;border:1px solid #ccc;">
<div id="aa" class="easyui-accordion" fit="true" style="width:300px;height:200px;">
<div title="Title1" style="overflow:auto;padding:10px;">
<h3>Accordion1</h3>
</div>
<div title="Title2" style="padding:10px;">
<h3>Accordion2</h3>
</div>
<div title="Title3">
<h3>Accordion3</h3>
</div>
</div>
</div>
</body>
</html>
코드 는 매우 간단 합 니 다.간단 한 html 만 있 으 면 이 루어 집 니 다.여기 서 가장 중요 한 것 은 먼저 jquery-1.4.2.min.js 와 jquery.easyui.min.js 를 인용 하 는 것 이다.효과:간단 한 html 이기 때문에 우 리 는 js 를 통 해 Accordion 을 쉽게 조작 하고 크기,위치 등 을 제어 할 수 있 습 니 다.jQuery EasyUI-DataGrid 는 이름 에서 데이터 의 바 인 딩 과 디 스 플레이 컨트롤 임 을 알 수 있 습 니 다.기본 코드:
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DataGrid</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../jquery.easyui.min.js" type="text/javascript"></script>
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../themes/icon.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$('#test').datagrid({
title: 'jQuery EasyUI---DataGrid',
iconCls: 'icon-save',
width: 500,
height: 350,
nowrap: false,
striped: true,
url: '../Data/datagrid_data.json',
sortName: 'ID',
sortOrder: 'desc',
idField: 'ID',
frozenColumns: [[
{ field: 'ck', checkbox: true },
{ title: 'ID', field: 'ID', width: 80, sortable: true }
]],
columns: [[
{ title: ' ', colspan: 2 },
{ field: 'opt', title: ' ', width: 100, align: 'center', rowspan: 2,
formatter: function(value, rec) {
return '<span style="color:red"> </span>';
}
}
], [
{ field: 'name', title: 'Name', width: 120 },
{ field: 'addr', title: 'Address', width: 120, rowspan: 2, sortable: true }
]],
pagination: true,
rownumbers: true,
singleSelect: false,
toolbar: [{
text: ' ',
iconCls: 'icon-add',
handler: function() {
alert(' ')
}
}, '-', {
text: ' ',
iconCls: 'icon-save',
handler: function() {
alert(' ')
}
}]
});
});
</script>
</head>
<body>
<table id="test"></table>
</body>
</html>
여기 서 datagriddata.json 에서 데 이 터 를 가 져 옵 니 다.코드 의 작성 스타일 은 EXTIS 와 매우 비슷 합 니 다.ExtJS 개발 실천 효과: jQuery EasyUI-Dialog 웹 페이지 창 효과.기본 코드:
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dialog</title>
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../jquery.easyui.min.js" type="text/javascript"></script>
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../themes/icon.css" rel="stylesheet" type="text/css" />
<script>
$(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(' ');
}
}]
});
});
</script>
</head>
<body>
<div id="dd" style="padding:5px;width:400px;height:200px;">
<p>jQuery EasyUI---Dialog</p>
</div>
</body>
</html>
효과: jQuery EasyUI-Tabs 는 사이트 든 관리 소프트웨어 든 우 리 는 Tabs 를 점점 더 많이 사용 하고 EasyUI 도 자 연 스 럽 게 지원 했다.기본 코드:
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tabs</title>
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../jquery.easyui.min.js" type="text/javascript"></script>
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../themes/icon.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
<h1>Tab1 Content</h1>
</div>
<div title="Tab5" closable="true" style="padding:10px;display:none;">
<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
<div title="Title1">Content 1</div>
<div title="Title2">Content 2</div>
<div title="Title3">Content 3</div>
</div>
</div>
</div>
</body>
</html>
효과: jQuery EasyUI-Messager 정보 알림 컨트롤,데이터 알림 을 잘 할 수 있 습 니 다.추천 합 니 다.기본 코드:
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Messager</title>
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../jquery.easyui.min.js" type="text/javascript"></script>
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../themes/icon.css" rel="stylesheet" type="text/css" />
<script>
function show1() {
$.messager.show({
title: ' 1',
msg: ' 1',
showType: 'show'
});
}
function show2() {
$.messager.show({
title: ' 2',
msg: ' 5 .',
timeout: 5000,
showType: 'slide'
});
}
function show3() {
$.messager.show({
title: ' 3',
msg: ' 3',
timeout: 0,
showType: 'fade'
});
}
</script>
</head>
<body>
<h1> </h1>
<div>
<a href="javascript:void(0)" onclick="show1()"> </a> |
<a href="#" onclick="show2()"> </a> |
<a href="#" onclick="show3()"> </a> |
</div>
</body>
</html>
효과:페이지 왼쪽 아래 정보 알림 jQuery EasyUI-ValidateBox 데이터 검증 컨트롤 로 폼 데 이 터 를 잘 검증 할 수 있 습 니 다.기본 코드:
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ValidateBox</title>
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../jquery.easyui.min.js" type="text/javascript"></script>
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../themes/icon.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<table>
<tr>
<td> :</td>
<td><input class="easyui-validatebox" required="true" validType="length[1,3]"></td>
</tr>
<tr>
<td> :</td>
<td><input class="easyui-validatebox" required="true" validType="email"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" required="true" validType="url"></td>
</tr>
<tr>
<td> :</td>
<td><textarea class="easyui-validatebox" required="true" style="height:100px;"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
함 수 를 쓸 필요 가 없습니다.검증 할 컨트롤 required="true"validType="url"만 있 으 면 됩 니 다.효과: jQuery EasyUI-LayOut 페이지 레이아웃 은 전체 페이지 를 몇 개의 영역 으로 나 눌 수 있 습 니 다.ExtJS 의 Border 레이아웃 과 유사 합 니 다.기본 코드:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>LayOut</title>
    <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../jquery.easyui.min.js" type="text/javascript"></script>
    <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="easyui-layout" style="width:600px;height:400px;">
        <div region="north" border="false" style="overflow:hidden;height:60px;background:#A4BED4;">
            <h2>Border </h2>
        </div>
        <div region="south" split="true" style="height:50px;background:#efefef;">
        </div>
        <div region="east" icon="icon-reload" title="Menu2" split="true" style="width:180px;">
        </div>
        <div region="west" split="true" title="Menu1" style="width:100px;">
        </div>
        <div region="center" title="Main Form" style="background:#eee;">
        </div>
    </div>
</body>
</html>
효과: jQuery EasyUI-스킨 케 어 jQuery EasyUI 는 통 일 된 CSS 스타일 을 사용 하여 수정 에 도 편리 합 니 다. 그림 에서 보 듯 이 모든 컨트롤 에 대해 전문 적 인 CSS 가 있다.그 에 맞 게 수정 하면 되 고 CSS 를 간단하게 알 면 된다.
소결:jQuery EasyUI 의 체험 은 여기까지 입 니 다.그리고 일부 컨트롤 은 여기 서 소개 하지 않 았 습 니 다.예 를 들 어 combobox,splitbutton 등 입 니 다.
공식 홈 페이지:http://jquery-easyui.wikidot.com/start
다운로드 주소:http://jquery-easyui.wikidot.com/download
본문 코드 패키지 다운로드글 쓴 이:고 웨 이 펑(Brian)

좋은 웹페이지 즐겨찾기