Le meilleur didacticiel jQuery EasyUI plug-in en 2024, dans ce didacticiel, vous pouvez apprendre Plug-in liste,Widget,Je commencé à utiliser jQuery EasyUI,
jQuery EasyUI fourni pour créer des pages Web multi-navigateur ensemble complet de composants, y compris datagrid puissant (grille de données), treegrid (forme d'arbre), le panneau (Panel), combo (combinaison déroulante) et ainsi de suite. Les utilisateurs peuvent combiner ces composants peuvent également être utilisés seuls un.
Easyui Chaque composant possède des propriétés, méthodes et événements. Les utilisateurs peuvent facilement étendre à ces composants.
Il est défini dans les jQuery.fn. {} Plugin .defaults. Par exemple, les attributs de dialogue sont définies dans jQuery.fn.dialog.defaults.
Event (fonction de rappel) est définie dans jQuery.fn. {} Plugin .defaults.
Méthode syntaxe appel: $ ( 'sélecteur') plugin ( «méthode», paramètre) ;.
dans lequel:
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
});
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)
} ">