jQuery EasyUI Layout est un framework de mise en page basé sur jQuery. J'ai utilisé Jquery EasyUi pour la première fois aujourd'hui. J'ai simplement créé une page de mise en page et je voulais la partager avec vous, mais je ne sais pas comment. la compatibilité du navigateur de Jquery EasyUi est.
Le rendu final est le suivant :
Avant d'utiliser Jquery EasyUi pour développer, vous devez d'abord citer les fichiers Js et Css de Jquery EasyUi. La citation est la suivante :
1 2 3 4 |
|
OK, commençons notre mise en page.
1. Utilisez le panneau de mise en page pour la mise en page globale et collez directement le code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
L'effet du code ci-dessus est le suivant (terminez la première étape partielle) :
2. Ajouter le menu de gauche
Le menu de gauche utilise une combinaison du contrôle de panneau évolutif et du contrôle d'arborescence de jquery easyui. Placez simplement le contrôle de panneau évolutif et le contrôle d'arborescence directement dans le domaine ouest et écrivez un événement de clic :
.Code de la page :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
|
Code événement clic Js :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
|
Rendu du code ci-dessus :
3. Lorsque vous cliquez enfin sur le menu, vous devez afficher la page de contenu cliquée dans le champ central. Le code est le suivant :
1 2 3 4 5 |
|
Cet article se termine ici. J'espère que partager cet article sera utile à tout le monde.