Plug-in jQuery EasyUI


jQuery EasyUI fournit un ensemble complet de composants pour créer des pages Web multi-navigateurs, notamment une puissante grille de données (grille de données), une grille arborescente (table arborescente), un panneau (panneau), un combo (combinaison déroulante) )etc. . Les utilisateurs peuvent utiliser ces composants en combinaison ou en utiliser un individuellement.

Liste des plug-ins

Base (Basic)

  • Parseur analyseur

  • Chargeur Easyloader

  • Déplaçable

  • Déposable

  • Redimensionnable redimensionnable

  • Pagination de pagination

  • Boîte de recherche de la zone de recherche

  • Barre de progression de la barre de progression

  • Boîte d'invite d'info-bulle

Mise en page (mise en page)

  • Panneau de panneau

  • Onglet Onglets/Onglet

  • Panneau de réduction en accordéon

  • Mise en page

Menu (menu) et bouton (bouton)

  • Menu Menu

  • Linkbutton Bouton Lien

  • Menubutton Bouton Menu

  • Splitbutton Bouton partagé

Formulaire (formulaire)

  • Formulaire

  • Boîte de validation Validatebox

  • Combinaison Combo

  • Boîte combo Combobox

  • Arbre à combinaison Combotree

  • Grille combinée Combogrid

  • Boîte de numéro Numberbox

  • Boîte de date Datebox

  • Datetimebox

  • Calendrier

  • Spinner Spinner

  • Spinner de valeur Numberspinner

  • Timespinner time spinner

  • Curseur de curseur

Fenêtre

  • Fenêtre Fenêtre

  • Boîte de dialogue de dialogue

  • Boîte de message Messager

DataGrid (grille de données) et Tree (arbre)

  • Grille de données Datagrid

  • Grille de propriétés Propertygrid

  • Arbre Arbre

  • Treegrid Tree Grid

Plug-in

Chaque composant d'easyui a des propriétés, des méthodes et des événements. Les utilisateurs peuvent facilement étendre ces composants.

Propriété La propriété

est définie dans jQuery.fn.{plugin}.defaults. Par exemple, les propriétés du dialogue sont définies dans jQuery.fn.dialog.defaults.

événement

événement (fonction de rappel) est également défini dans jQuery.fn.{plugin}.defaults.

Méthode

La syntaxe d'appel d'une méthode : $('selector').plugin('method', paramètre);

où :

  • selector est un sélecteur d'objet jquery.

  • plugin est le nom du plug-in.

  • method est une méthode existante qui correspond au plugin.

  • paramètre est un objet paramètre, qui peut être un objet ou une chaîne...

    La méthode

est définie dans jQuery.fn.{plugin}.methods. Chaque méthode a deux paramètres : jq et param. Le premier paramètre 'jq' est obligatoire et fait référence à l'objet jQuery. Le deuxième paramètre « param » fait référence au paramètre réel transmis à la méthode. Par exemple, pour étendre la méthode nommée 'mymove' du composant de dialogue, le code est le suivant : 

$.extend($.fn.dialog.methods, {
    mymove: function(jq, newposition){
		return jq.each(function(){
			$(this).dialog('move', newposition);
		});
    }
});

Vous pouvez maintenant appeler la méthode 'mymove' pour déplacer la boîte de dialogue (dialog) vers la position spécifiée : 

$('#dd').dialog('mymove', {
    left: 200,
    top: 100
});

Démarrez avec jQuery EasyUI

Téléchargez la bibliothèque et référencez les fichiers CSS et JavaScript EasyUI dans vos pages. 

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

Une fois que vous avez référencé les fichiers EasyUI nécessaires, vous pouvez définir un composant EasyUI via un balisage ou en utilisant JavaScript. Par exemple, pour couronner un panneau avec une fonctionnalité pliable, vous devez écrire le code HTML suivant : 

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
    title="My Panel" iconCls="icon-save" collapsible="true">
    The panel content
</div>

Lors de la création de composants via un balisage, l'attribut 'data-options' est utilisé pour prendre en charge la compatibilité HTML5 depuis la version 1.3. nom. Vous pouvez donc réécrire le code ci-dessus comme suit : 

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
    title="My Panel" data-options="iconCls:'icon-save',collapsible:true">
    The panel content
</div>

Le code ci-dessous montre comment créer une liste déroulante qui lie l'événement 'onSelect'. 

<input class="easyui-combobox" name="language"
    data-options="
    url:'combobox_data.json',
    valueField:'id',
    textField:'text',
    panelHeight:'auto',
    onSelect:function(record){
    alert(record.text)
    }">