| Les deux révisions précédentesRévision précédente | |
| issue187:inkscape [2022/11/28 15:12] – auntiee | issue187:inkscape [2022/11/30 18:37] (Version actuelle) – andre_domenech |
|---|
| Au cours des deux derniers articles, j'ai présenté l'extension Web > Maquette Web interactive, puis j'ai montré comment il est possible de créer le même effet - et avec moins de problèmes - avec une quantité minimale de JavaScript. Cette fois-ci, je vais terminer ce projet en ajoutant un peu plus de code qui démontrera quelques capacités supplémentaires de maquettage qui ne sont tout simplement pas possibles en utilisant l'extension. | Au cours des deux derniers articles, j'ai présenté l'extension Web > Maquette Web interactive, puis j'ai montré comment il est possible de créer le même effet - et avec moins de problèmes - avec une quantité minimale de JavaScript. Cette fois-ci, je vais terminer ce projet en ajoutant un peu plus de code qui démontrera quelques capacités supplémentaires de maquettage qui ne sont tout simplement pas possibles en utilisant l'extension. |
| |
| Pour rappel, jusqu'à présent, j'ai créé une maquette composée de trois calques, chacune représentant une page différente d'un site Web (qui aurait tout aussi bien pu être la conception d'une application, d'un tutoriel ou d'une présentation). En empilant les calques les uns sur les autres, le code JS doit simplement masquer toutes les calques, puis réafficher le bon lorsque l'on clique sur la maquette de l'interface utilisateur. Ce code est stocké dans le document Inkscape, et on y accède via Fichier > Propriétés du document, puis l'onglet Programmation, l'onglet Programmes incorporés, et enfin en cliquant sur l'ID du script généré aléatoirement dans la liste. Le code apparaîtra dans le volet Contenu au bas de la boîte de dialogue - qui n'est malheureusement pas redimensionnable (vous pouvez copier/coller entre Inkscape et un éditeur de texte pour faciliter la modification du code). Après les ajouts du mois dernier, le code ressemble à celui illustré ci-dessus. | Pour rappel, jusqu'à présent, j'ai créé une maquette composée de trois calques, chacune représentant une page différente d'un site Web (qui aurait tout aussi bien pu être la conception d'une application, d'un tutoriel ou d'une présentation). En empilant les calques les uns sur les autres, le code JS doit simplement masquer tous les calques, puis réafficher le bon lorsque l'on clique sur la maquette de l'interface utilisateur. Ce code est stocké dans le document Inkscape, et on y accède via Fichier > Propriétés du document, puis l'onglet Programmation, l'onglet Programmes incorporés, et enfin en cliquant sur l'ID du script généré aléatoirement dans la liste. Le code apparaîtra dans le volet Contenu au bas de la boîte de dialogue - qui n'est malheureusement pas redimensionnable (vous pouvez copier/coller entre Inkscape et un éditeur de texte pour faciliter la modification du code). Après les ajouts du mois dernier, le code ressemble à celui illustré ci-dessus. |
| |
| |
| alert("You are now signed out");** | alert("You are now signed out");** |
| |
| Tout ce que nous devons faire maintenant, c'est d'appeler la fonction showMenu() à partir l'attribut onclick du menu hamburger qui se trouve sur la couche Main. Nous n'appelons pas la fonction showLayer() existante, de sorte qu'aucun des calques existants n'est caché. Tout ce qui se passe, c'est que le calque Menu est affiché en plus des autres qui étaient déjà visibles - exactement ce que nous voulions. | Tout ce que nous devons faire maintenant, c'est d'appeler la fonction showMenu() à partir l'attribut onclick du menu hamburger qui se trouve sur la couche Main. Nous n'appelons pas la fonction showLayer() existante, de sorte qu'aucun des calques existants n'est caché. Tout ce qui se passe, c'est que le calque Menu est affiché en plus des autres qui étaient déjà visibles, exactement ce que nous voulions. |
| |
| En l'état actuel des choses, la maquette est suffisamment bonne pour servir de démonstration, mais peut-être un peu maladroite par endroits. Lorsque le menu est « ouvert », par exemple, il n'y a aucun moyen de le « fermer » autrement qu'en naviguant vers l'une des pages. Une amélioration possible serait d'ajouter un rectangle presque transparent à cette couche, derrière le contenu principal. Une fonction closeMenu() appropriée et un gestionnaire de clic ajouté au rectangle, vous permettraient de cliquer en dehors du menu pour le fermer. Je laisse au lecteur le soin de s'exercer sur ce point. | En l'état actuel des choses, la maquette est suffisamment bonne pour servir de démonstration, mais peut-être un peu maladroite par endroits. Lorsque le menu est « ouvert », par exemple, il n'y a aucun moyen de le « fermer » autrement qu'en naviguant vers l'une des pages. Une amélioration possible serait d'ajouter un rectangle presque transparent à cette couche, derrière le contenu principal. Une fonction closeMenu() appropriée et un gestionnaire de clic ajouté au rectangle, vous permettraient de cliquer en dehors du menu pour le fermer. Je laisse au lecteur le soin de s'exercer sur ce point. |
