Utilisation de JQuery EasyUI_jquery

jQuery EasyUI est un framework basé sur jQuery qui intègre divers plug-ins d'interface utilisateur.

Introduction à EasyUI

easyui est une collection de plug-ins d'interface utilisateur basés sur jQuery.

easyui fournit les fonctionnalités nécessaires pour créer des applications JavaScript modernes et interactives.

En utilisant easyui, vous n'avez pas besoin d'écrire beaucoup de code. Il vous suffit de définir l'interface utilisateur en écrivant quelques balises HTML simples.

easyui est un framework complet qui supporte parfaitement les pages web HTML5.

easyui fait gagner du temps et de l'ampleur à votre développement web.

easyui est très simple mais puissant.

Cet article se concentre sur deux façons d'utiliser EasyUI, notamment le chargement différent et le chargement intelligent à la demande easyload. Enfin, apprenez à utiliser l’analyseur Parser.

Remarque : Tous les codes seront introduits sur la dernière page de l'article

1. Importer les fichiers nécessaires

Comme jQuery EasyUI1.4.4 vient d'être mis à jour, la mise à jour de cette petite version est principalement une optimisation interne et quelques ajustements fins de l'interface utilisateur, ce qui n'affecte pas l'apprentissage. Auparavant, nous utilisions la version 1.2.4 du manuel chinois pour apprendre la 1.3.5 sans aucun obstacle, il n'y a donc pas lieu de s'inquiéter des problèmes de version.

La structure des répertoires de JQuery EasyUI tout au long de notre article est la suivante

Le dossier easyui est l'endroit où sont enregistrés tous les fichiers à utiliser par JQuery EasyUI

Le dossier JS stocke nos propres fichiers JS

index.html sert à enregistrer le code html que nous avons écrit nous-mêmes

//引入 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 : Une fois l'introduction terminée, nous pouvons écrire du code jQuery EasyUI.

2. Comment charger les composants de l'interface utilisateur

Il existe deux manières de charger des composants d'interface utilisateur : 1. Charger à l'aide de la méthode de classe 2. Charger à l'aide d'un appel JS ;

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

PS : Un composant d'interface utilisateur peut être généré en utilisant le format spécifié. Cela est dû au rôle d'un analyseur (Parser) de jQuery EasyUI. Après l'analyse, vous pouvez voir le code HTML modifié des composants de l'interface utilisateur de Firebug.

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

PS : Il est généralement recommandé d'utiliser le deuxième appel JS pour charger, car un composant d'interface utilisateur a de nombreuses propriétés et méthodes, et il sera extrêmement gênant d'utiliser une classe. Et basé sur le principe de séparation du JS et du HTML, le second améliore la lisibilité du code.

3. Utilisez easyload.js pour charger intelligemment

//删除 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 : utilisez easyloader pour charger intelligemment, qui se charge à la demande en fonction des composants de l'interface utilisateur que vous utilisez. Nous pouvons visualiser le HTML via Firebug et constater que de nombreux fichiers js sont chargés. Ces js sont toutes des conditions nécessaires pour le composant de dialogue. Par conséquent, utiliser easyloader pour charger réduira le chargement de contenu inutile. Mais le problème est qu'avec le chargement intelligent, la difficulté et le coût de votre codage augmentent, et l'efficacité est réduite. De plus, le nombre de fichiers js chargés intelligemment est toujours très important, ce qui n'augmentera pas trop la vitesse. Au contraire, comme il y a plus de fichiers js, les moteurs de recherche nécessiteront une optimisation de fusion.

4. Analyseur

L'analyseur Parser est spécialisé dans l'analyse et le rendu de divers composants de l'interface utilisateur. De manière générale, nous n'avons pas besoin de l'utiliser pour terminer automatiquement l'analyse des composants de l'interface utilisateur. Bien entendu, une analyse manuelle peut parfois être nécessaire dans certaines circonstances.
L'analyse manuelle est généralement efficace lors de l'utilisation d'une classe, comme la définition de class="easyui-dialog".

Attribut de l'analyseur

Nom de l'attribut Valeur par défaut Description

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

Méthode de l'analyseur

Nom de l'attribut Description du paramètre

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

PS : Pour utiliser l'interface utilisateur spécifiée pour analyser, vous devez définir un conteneur de classe parent pour l'analyser. Par exemple :

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

Le contenu ci-dessus vous présente l'utilisation de JQuery EasyUI, j'espère qu'il vous sera utile !