{"id":124663,"date":"2022-11-16T17:31:19","date_gmt":"2022-11-16T16:31:19","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-an-inline-edit\/"},"modified":"2025-02-03T16:44:44","modified_gmt":"2025-02-03T15:44:44","slug":"how-to-create-an-inline-edit","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/comment-prototyper-modification-ligne","title":{"rendered":"Comment prototyper une modification en ligne"},"content":{"rendered":"<p>Dans cet article, vous apprendrez \u00e0 prototyper une modification en ligne.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73262325\/index.html\" width=\"820px\" height=\"180px\" frameborder=\"0\"><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">Voici comment le construire :<\/span><\/p>\n<h3><b>Voir<\/b><\/h3>\n<ul>\n<li>S\u00e9lectionnez un \u00ab\u00a0panneau dynamique\u00a0\u00bb dans la section \u00ab\u00a0Contenu dynamique\u00a0\u00bb et placez-le sur le canevas.<\/li>\n<li>Maintenez la touche commande (Mac) ou contr\u00f4le (Windows) enfonc\u00e9e et faites glisser un \u00ab\u00a0texte\u00a0\u00bb dans le panneau. Vous verrez une teinte bleue lorsque vous faites glisser un \u00e9l\u00e9ment \u00e0 l&rsquo;int\u00e9rieur.<video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\"><source src=\"\" type=\"\"><\/source><img decoding=\"async\" src=\"\" alt=\"\">Cr\u00e9er un panneau dynamique<\/video> <\/li>\n<\/ul>\n<ul>\n<li>Ajoutez un panneau suppl\u00e9mentaire en cliquant sur le bouton \u00ab\u00a0+\u00a0\u00bb dans le menu.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-2.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<li>Ensuite, s\u00e9lectionnez un \u00ab\u00a0Champ de texte de saisie\u00a0\u00bb dans la section \u00ab\u00a0Champs de saisie interactifs\u00a0\u00bb et placez-le \u00e0 l&rsquo;int\u00e9rieur du panneau en maintenant la touche commande (Mac) ou control (Windows). Pour terminer la vue, dans le m\u00eame panneau, maintenez la commande et placez un \u00ab\u00a0Bouton\u00a0\u00bb.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-3.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-3.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-3.png\" alt=\"Ins\u00e9rer du contenu dans un panneau dynamique\">Ins\u00e9rer du contenu dans un panneau dynamique<\/video><\/li>\n<\/ul>\n<h3><b>Ev\u00e9nements<\/b><\/h3>\n<p><span data-preserver-spaces=\"true\">S\u00e9lectionnez le \u00ab\u00a0Texte\u00a0\u00bb dans le panneau 1 et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb dans la palette \u00c9v\u00e9nements.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-4.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choose Action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Set active panel\u00a0\u00bb et s\u00e9lectionnez Panel 2. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-5.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Le bouton du panneau 2 \u00e9tant s\u00e9lectionn\u00e9, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-6.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choose Action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Set value to an element\u00a0\u00bb, et dans l&rsquo;onglet \u00ab\u00a0layers\u00a0\u00bb de la bo\u00eete de dialogue, s\u00e9lectionnez le texte dans le panneau 1.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">S\u00e9lectionnez le bouton radio \u00ab\u00a0Calcul\u00e9\u00a0\u00bb pour la valeur et cliquez sur \u00ab\u00a0Ajouter une expression\u00a0\u00bb.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-7.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<li><span data-preserver-spaces=\"true\">Dans le g\u00e9n\u00e9rateur d&rsquo;expression de valeur, s\u00e9lectionnez le \u00ab\u00a0champ de texte d&rsquo;entr\u00e9e\u00a0\u00bb dans le panneau 2. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb et \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.  <\/span><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-8.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-8.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-8.png\" alt=\"Constructeur d'expression\">Constructeur d&rsquo;expression<\/video><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Enfin, une fois le bouton s\u00e9lectionn\u00e9, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0+\u00a0\u00bb pour cr\u00e9er un nouvel \u00e9v\u00e9nement.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-9.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choose Action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Set active panel\u00a0\u00bb et cliquez sur le panneau 1.  <\/span>Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-10.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Simulez votre prototype.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans cet article, vous apprendrez \u00e0 prototyper une modification en ligne. Voici comment le construire : Voir S\u00e9lectionnez un \u00ab\u00a0panneau dynamique\u00a0\u00bb dans la section \u00ab\u00a0Contenu dynamique\u00a0\u00bb&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8435,8426],"tags":[],"class_list":["post-124663","post","type-post","status-publish","format-standard","hentry","category-interactions-avancees","category-comment-faire"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124663"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124663"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124663\/revisions"}],"predecessor-version":[{"id":126189,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124663\/revisions\/126189"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}