Verwendung von JQuery EasyUI_jquery

jQuery EasyUI ist ein jQuery-basiertes Framework, das verschiedene Plug-Ins für die Benutzeroberfläche integriert.

EasyUI-Einführung

easyui ist eine Sammlung von Benutzeroberflächen-Plug-ins basierend auf jQuery.

easyui bietet die notwendige Funktionalität zum Erstellen moderner, interaktiver JavaScript-Anwendungen.

Mit easyui müssen Sie nicht viel Code schreiben. Sie müssen nur einige einfache HTML-Tags schreiben, um die Benutzeroberfläche zu definieren.

easyui ist ein vollständiges Framework, das HTML5-Webseiten perfekt unterstützt.

easyui spart Zeit und Umfang bei Ihrer Webentwicklung.

easyui ist sehr einfach, aber leistungsstark.

Dieser Artikel konzentriert sich auf zwei Möglichkeiten zur Verwendung von EasyUI, einschließlich unterschiedlichem Laden und intelligentem On-Demand-Laden von easyload. Schließlich erfahren Sie, wie Sie den Parser-Parser verwenden.

Hinweis: Alle Codes werden auf der letzten Seite des Artikels vorgestellt

1. Importieren Sie die erforderlichen Dateien

Da jQuery EasyUI1.4.4 gerade aktualisiert wurde, handelt es sich bei der Aktualisierung dieser kleinen Version hauptsächlich um interne Optimierung und einige Feinabstimmungen der Benutzeroberfläche, die sich jedoch nicht auf das Lernen auswirken. Zuvor haben wir die Version 1.2.4 des chinesischen Handbuchs verwendet, um 1.3.5 ohne Hindernisse zu lernen, sodass wir uns keine Sorgen über Versionsprobleme machen müssen.

Die Verzeichnisstruktur von JQuery EasyUI in unserem gesamten Artikel ist wie unten dargestellt

Im Ordner „easyui“ werden alle von JQuery EasyUI zu verwendenden Dateien gespeichert

Der JS-Ordner speichert unsere eigenen JS-Dateien

index.html dient zum Speichern des HTML-Codes, den wir selbst geschrieben haben

//引入 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: Nachdem die Einführung abgeschlossen ist, können wir jQuery EasyUI-Code schreiben.

2. So laden Sie UI-Komponenten

Es gibt zwei Möglichkeiten, UI-Komponenten zu laden: 1. Laden mit der Klassenmethode 2. Laden mit JS-Aufruf;

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

PS: Eine UI-Komponente kann mit dem angegebenen Format generiert werden. Dies liegt an der Rolle eines Parsers (Parser) von jQuery EasyUI. Nach dem Parsen können Sie den geänderten HTML-Code der UI-Komponenten von Firebug sehen.

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

PS: Es wird im Allgemeinen empfohlen, zum Laden den zweiten JS-Aufruf zu verwenden, da eine UI-Komponente viele Eigenschaften und Methoden hat und die Verwendung von Klassen äußerst unpraktisch ist. Und basierend auf dem Prinzip der Trennung von JS und HTML verbessert das zweite die Lesbarkeit des Codes.

3. Verwenden Sie easyload.js, um

intelligent zu laden

//删除 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: Verwenden Sie Easyloader zum intelligenten Laden, das je nach den von Ihnen verwendeten UI-Komponenten bei Bedarf geladen wird. Wir können den HTML-Code über Firebug anzeigen und feststellen, dass viele js-Dateien geladen sind. Diese js sind alles notwendige Bedingungen für die Dialogkomponente. Daher wird durch die Verwendung von Easyloader zum Laden das unnötige Laden von Inhalten reduziert. Das Problem besteht jedoch darin, dass durch intelligentes Laden die Schwierigkeit und die Kosten Ihrer Codierung steigen und die Effizienz sinkt. Darüber hinaus ist die Anzahl der intelligent geladenen JS-Dateien immer noch sehr groß, was die Geschwindigkeit nicht allzu sehr erhöht. Im Gegenteil, da mehr JS-Dateien vorhanden sind, ist eine Zusammenführungsoptimierung für Suchmaschinen erforderlich.

4. Parser

Der Parser-Parser ist auf das Parsen und Rendern verschiedener UI-Komponenten spezialisiert. Im Allgemeinen müssen wir ihn nicht verwenden, um das Parsen von UI-Komponenten automatisch abzuschließen. Natürlich kann unter bestimmten Umständen manchmal eine manuelle Analyse erforderlich sein.
Manuelles Parsen ist im Allgemeinen effektiv, wenn Klassen verwendet werden, z. B. das Festlegen von class="easyui-dialog".

Parser-Attribut

Attributname Standardwert Beschreibung

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

Parser-Methode

Attributname Parameterbeschreibung

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

PS: Um die angegebene Benutzeroberfläche zum Parsen zu verwenden, müssen Sie einen übergeordneten Klassencontainer zum Parsen festlegen. Zum Beispiel:

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

Der obige Inhalt führt Sie in die Verwendung von JQuery EasyUI ein. Ich hoffe, er wird Ihnen hilfreich sein!