jQuery EasyUI plug-in

Plug-in liste

Base (base)

• parser parser
• loader EasyLoader
• draggable draggable
• Déposable peut être placé
• Redimensionnable Taille ajustable
• onglet Pagination
• boîte de recherche Searchbox
• Barre de progression Progressbar
• ballons tooltip

Mise en page (mise en page)

• Panneau
• Onglets Tab / Tab
• Accordéon fois panneau
• Mise en page Mise en page

Menu (Menu) et Button (Bouton)

• Menu Menu
• Linkbutton bouton de lien
• Menubutton bouton de menu
• bouton fendu SplitButton

(Formulaire)

• Formulaire de formulaire
• boîte de vérification Validatebox
• combinaison Combo
• zone de liste déroulante Combobox
• Arbre combinaison Combotree
• Combogrid grille composite
• boîte numérique NumberBox
• Datebox zone Date
• Datetimebox Échéancier Date
• Calendrier
• Spinner spinner
• Numberspinner valeur spinner
• Timespinner temps spinner
• curseur curseur

Fenêtre (Window)

• Fenêtre Fenêtre
• Dialog Dialog
• boîte de message Messager

DataGrid (Data Grid) et Tree (Arbre)

• Datagrid Data Grid
• PropertyGrid Propriété Grille
• Arbre Arbre
• grille d'arbre TreeGrid

Widget

Easyui Chaque composant possède des propriétés, méthodes et événements. Les utilisateurs peuvent facilement étendre à ces composants.

propriété

Il est défini dans les jQuery.fn. {} Plugin .defaults. Par exemple, les attributs de dialogue sont définies dans jQuery.fn.dialog.defaults.

événement

Event (fonction de rappel) est définie dans jQuery.fn. {} Plugin .defaults.

manière

Méthode syntaxe appel: $ ( 'sélecteur') plugin ( «méthode», paramètre) ;.

dans lequel:

• jquery sélecteur est le sélecteur d'objet.
• plugin est un nom de plug-in.
• méthode avec prise appropriée la méthode existante.
• paramètre est un objet de paramètre peut être un objet, 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 nécessaire, une référence à l'objet jQuery. Le second paramètre «param» fait référence aux paramètres de la méthode réelles passées. Par exemple, la méthode des composants de dialogue approche dite 'MyMove' étendre, comme suit:

.extend $ ($. Fn.dialog.methods, {
    MyMove: function (jq, nouvPosition) {
		retour jq.each (function () {
			$ (Ce) .dialog ( «déplacer», nouvPosition);
		});
    }
});

Maintenant, vous pouvez appeler la méthode 'de MyMove' pour déplacer la boîte de dialogue (de dialogue) à l'emplacement spécifié:

$ ( '# Dd'). Dialog ( 'MyMove', {
    gauche: 200,
    top: 100
});

Je commencé à utiliser jQuery EasyUI

Bibliothèque de téléchargement, et CSS et JavaScript fichiers de références dans votre page.

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

Une fois que vous faites référence à EasyUI fichiers nécessaires, vous pouvez définir un des composants EasyUI par l'utilisation de balises ou JavaScript. Par exemple, pour un panneau supérieur avec une fonction de pliage, vous devez écrire le code HTML comme suit:

<Div id = class "p" style = "easyui panneau" = "width: 500px; height: 200px; padding: 10px;"
    title = "My Panel" iconCls = "icon-save" pliable = "true">
    Le contenu du panneau
</ Div>

Lors de la création d'un composant par le marquage, l'attribut «data-options est utilisé pour soutenir le nom de la propriété depuis la version 1.3 compatible HTML5. Ainsi, vous pouvez réécrire le code ci-dessus comme suit:

<Div id = class "p" style = "easyui panneau" = "width: 500px; height: 200px; padding: 10px;"
    title = "My Panel" données-options = "iconCls:« icon-save ', pliable: true ">
    Le contenu du panneau
</ Div>

Le code suivant montre comment créer une zone de liste déroulante liée de l'événement 'onSelect'.

<Input class = "easyui-combobox" name = "langue"
    data-options = "
    url: 'combobox_data.json',
    ValueField: 'id',
    textField: «texte»,
    panelHeight: 'auto',
    onSelect: function (enregistrement) {
    alert (record.text)
    } ">