JQuery EasyUI_jquery 사용

jQuery EasyUI는 다양한 사용자 인터페이스 플러그인을 통합하는 jQuery 기반 프레임워크입니다.

EasyUI 소개

easyui는 jQuery를 기반으로 한 사용자 인터페이스 플러그인 모음입니다.

easyui는 최신 대화형 JavaScript 애플리케이션을 만드는 데 필요한 기능을 제공합니다.

easyui를 사용하면 많은 코드를 작성할 필요가 없으며 간단한 HTML 태그만 작성하여 사용자 인터페이스를 정의하면 됩니다.

easyui는 HTML5 웹페이지를 완벽하게 지원하는 완전한 프레임워크입니다.

easyui는 웹 개발 시간과 규모를 줄여줍니다.

easyui는 매우 간단하지만 강력합니다.

이 기사에서는 다양한 로딩과 Easyload 지능형 주문형 로딩을 포함하여 EasyUI를 사용하는 두 가지 방법에 중점을 둡니다. 마지막으로 Parser 파서를 사용하는 방법을 알아보세요.

참고: 모든 코드는 기사 마지막 페이지에 소개됩니다

1. 필요한 파일 가져오기

jQuery EasyUI1.4.4가 최근 업데이트되었기 때문에 이번 작은 버전의 업데이트는 주로 내부 최적화와 일부 UI 미세 조정으로 학습에 영향을 주지 않습니다. 이전에는 1.2.4 버전의 중국어 매뉴얼을 이용하여 1.3.5를 학습하는데 어려움이 없었기 때문에 버전 문제에 대해 걱정할 필요가 없습니다.

기사 전반에 걸쳐 JQuery EasyUI의 디렉터리 구조는 다음과 같습니다

easyui 폴더에는 JQuery EasyUI에서 사용할 모든 파일이 저장되는 폴더입니다

JS 폴더에는 자체 JS 파일이 저장됩니다

index.html은 우리가 직접 작성한 HTML 코드를 저장하는 것입니다

//引入 jQuery 核心库，这里采用的是 .
<script type="text/javascript" src="easyui/jquery.min.js"></script>
//引入 jQuery EasyUI 核心库，这里采用的是 ..
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
//引入 EasyUI 中文提示信息
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
//引入自己开发的 JS 文件
<script type="text/javascript" src="js/index.js"></script>
//引入 EasyUI 核心 UI 文件 CSS
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
//引入 EasyUI 图标文件
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

PS: 소개가 완료되면 jQuery EasyUI 코드를 작성할 수 있습니다.

2. UI 구성요소 로드 방법

UI 구성요소를 로드하는 방법에는 두 가지가 있습니다. 1. 클래스 메소드를 사용하여 로드 2. JS 호출을 사용하여 로드.

//使用 class 加载，格式为：easyui-组件名
<div class="easyui-dialog" id="box" title="标题" style="width:px;height:px;">
内容部分
</div>

PS: 지정된 형식을 사용하여 UI 구성요소를 생성할 수 있는 이유는 jQuery EasyUI의 파서(Parser) 역할 때문입니다. 파싱 ​​후 Firebug에서 UI 구성요소의 변경된 HTML을 확인할 수 있습니다.

//使用 JS 调用加载
$('#box').dialog();

PS: UI 구성 요소에는 많은 속성과 메서드가 있고 클래스를 사용하는 것이 매우 불편하기 때문에 일반적으로 두 번째 JS 호출을 사용하여 로드하는 것이 좋습니다. 그리고 두 번째는 JS와 HTML의 분리 원칙을 바탕으로 코드의 가독성을 높였습니다.

3. easyload.js를 사용하여 지능적으로 로드

//删除 jQuery EasyUI 的 JS 核心文件及 CSS，引入 easyloader.js 文件
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/easyloader.js"></script>
//JS 代码
easyloader.load('dialog', function () {
$('#box').dialog();
});

PS: 사용하는 UI 구성요소에 따라 필요할 때 로드되는 지능적으로 로드하려면 easyloader를 사용하세요. Firebug를 통해 HTML을 보면 많은 js 파일이 로드되어 있음을 알 수 있습니다. 이러한 js는 모두 대화 상자 구성 요소에 필요한 조건입니다. 따라서 easyloader를 사용하여 로드하면 불필요한 콘텐츠 로딩이 줄어듭니다. 그러나 문제는 스마트 로딩을 사용하면 코딩의 난이도와 비용이 증가하고 효율성이 감소한다는 것입니다. 또한 지능적으로 로드되는 js 파일의 수가 여전히 매우 커서 속도가 크게 증가하지 않습니다. 반대로 js 파일이 더 많기 때문에 검색 엔진에서는 병합 최적화가 필요합니다.

4. 파서

Parser 파서는 다양한 UI 구성 요소를 구문 분석하고 렌더링하는 데 특화되어 있습니다. 일반적으로 UI 구성 요소의 구문 분석을 자동으로 완료하는 데 사용할 필요는 없습니다. 물론 특정 상황에서는 수동 구문 분석이 필요할 수도 있습니다.
수동 구문 분석은 일반적으로 class="easyui-dialog" 설정과 같이 클래스를 사용할 때 효과적입니다.

파서 속성

속성 이름 기본값 설명

$.parser.auto true 定义是否自动解析 EasyUI 组件
//关闭自动解析功能，放在$(function() {})外
$.parser.auto = false;

파서 방법

속성 이름 매개변수 설명

$.parser.parse 空或 JQ 选择器 解析指定的 UI 组件
$.parser.onComplete 回调函数 解析完毕后执行
//解析所有 UI
$.parser.parse();
//解析指定的 UI
$.parser.parse('#box');

PS: 지정된 UI를 사용하여 구문 분석하려면 상위 클래스 컨테이너를 설정하여 구문 분석해야 합니다. 예:

<div id="box">
<div class="easyui-dialog" title="标题" style="width:400px;height:200px;">
<span>内容部分</span>
</div>
</div>
//UI 组件解析完毕后执行，放在$(function () {})外
$.parser.onComplete = function () {
alert('UI 组件解析完毕！');
};

위 내용은 JQuery EasyUI 사용법을 소개한 내용인데, 도움이 되셨으면 좋겠습니다!