Pleins feux sur les composants: PanelBar
Découvrez comment l'interface utilisateur de Kendo supprime la douleur de la création d'un PanelBar entièrement fonctionnel et stylé
Si vous lisez l'article précédent de cette série, vous savez maintenant comment TabStrip les composants sont utilisés dans la navigation pour afficher le contenu associé mais différent sur une page. Le prochain composant à conquérir est le PanelBar .
Un PanelBar est un conteneur avec des sections empilées verticalement les unes sur les autres pouvant être développées ou réduites. Une utilisation pour un PanelBar consiste à organiser une hiérarchie de navigation profonde. Dans un projecteur précédent vous avez vu comment réaliser une navigation imbriquée en utilisant des listes déroulantes en cascade dans le composant Menu . C'est bien quand vous avez seulement quelques liens dans la liste déroulante. Cependant, lorsque la liste déroulante devient trop profonde, il est préférable de placer ces liens enfants dans un PanelBar . Ensuite, je vais vous montrer comment Kendo UI prend la peine de créer un PanelBar entièrement fonctionnel et stylé .
Basic Barre de Navigation
Tout d'abord, jetons un coup d'oeil au code minimal nécessaire pour implémenter un PanelBar . Le balisage est similaire à la création d'un menu. Vous utiliserez un élément
- pour la racine du composant. Chaque élément
PanelBar qui a été stylée en utilisant le thème Kendo UI Bootstrap : 
{font-famille: helvetica; }
</style>
</head>
<body>
<ul id="panelbar">
<li>
Livres
<ul>
<li> Sci-Fi </li>
<li> Jeune adulte </li>
<li> Non-Fiction </li>
</ul>
</li>
<li>
Films
<ul>
<li> Comédie </li>
<li> Action </li>
<li> Sci-Fi </li>
</ul>
</li>
<li>
Électronique
<ul>
<li> Téléphones </li>
<li> Ordinateurs </li>
<li> Téléviseurs </li>
</ul>
</li>
</ul> <script defer src="data:text/javascript;base64,CiAgICAgJCAoZG9jdW1lbnQpIC5yZWFkeSAoZnVuY3Rpb24gKCkgewrCoMKgwqDCoMKgwqAkICgmIzM5OyMgcGFuZWxiYXImIzM5OykuIGtlbmRvUGFuZWxCYXIgKCk7CsKgwqDCoMKgfSk7CsKgwqA="></script> </body>
</html></code></pre><p> Dans un composant <code class="language-js"> PanelBar </code>la sélection d'un lien pousse le contenu vers le bas pour révéler le sous-menu. Alors que dans un composant <code class="language-js"> </code>la sélection d'un lien révèle une liste déroulante qui définit le contenu de la page.</p><h2> Construction d'un <code class="language-js"> PanelBar </code> à partir d'une source de données</h2><p> Vous pouvez ignorer l'écriture baliser et configurer votre <code class="language-js"> PanelBar </code> à travers ses options. Construire votre <code class="language-js"> PanelBar </code> à partir d'une source de données par opposition à coder en dur le code HTML vous donne plus de flexibilité. Au lieu de considérer le composant comme HTML, vous pouvez le considérer comme des données. Lorsque vous souhaitez modifier le composant, vous pouvez modifier ses données ou utiliser l'une de ses méthodes. C'est le code refactorisé pour créer notre navigation en utilisant l'option <code class="language-js"> dataSource </code>:</p><div class="quads-location quads-ad54740 " id="quads-ad54740" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="0"> <ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="pub-2247171909266990"
data-ad-slot="3144894705"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div><pre><code class="language-markup"><ul id="panelbar"></ul> <script defer src="data:text/javascript;base64,CiAgICQgKGRvY3VtZW50KSAucmVhZHkgKGZ1bmN0aW9uICgpIHsKwqDCoMKgwqAkICgmIzM5OyMgcGFuZWxiYXImIzM5OykuIGtlbmRvUGFuZWxCYXIgKHsKwqDCoMKgwqDCoMKgU291cmNlOiBbCiAgICAgICAgewogICAgICAgICAgdGV4dDogJ0Jvb2tzJywKICAgICAgICAgIGl0ZW1zOiBbCiAgICAgICAgICAgIHsgdGV4dDogJ1NjaS1GaScgfSwKICAgICAgICAgICAgeyB0ZXh0OiAnWW91bmcgQWR1bHQnIH0sCiAgICAgICAgICAgIHsgdGV4dDogJ05vbiBGaWN0aW9uJyB9CiAgICAgICAgICBdCsKgwqDCoMKgwqDCoMKgwqB9LArCoMKgwqDCoMKgwqDCoMKgewrCoMKgwqDCoMKgwqDCoMKgwqDCoHRleHRlOiAmIzM5O0ZpbG1zJiMzOTssCsKgwqDCoMKgwqDCoMKgwqDCoMKgYXJ0aWNsZXM6IFsKICAgICAgICAgICAgeyB0ZXh0OiAnQ29tZWR5JyB9LAogICAgICAgICAgICB7IHRleHQ6ICdBY3Rpb24nIH0sCiAgICAgICAgICAgIHsgdGV4dDogJ1NjaS1GaScgfQogICAgICAgICAgXQrCoMKgwqDCoMKgwqDCoMKgfSwKwqDCoMKgwqDCoMKgwqDCoHsKwqDCoMKgwqDCoMKgwqDCoMKgwqB0ZXh0ZTogJiMzOTvDiWxlY3Ryb25pcXVlJiMzOTssCsKgwqDCoMKgwqDCoMKgwqDCoMKgYXJ0aWNsZXM6IFsKICAgICAgICAgICAgeyB0ZXh0OiAnUGhvbmVzJyB9LAogICAgICAgICAgICB7IHRleHQ6ICdDb21wdXRlcnMnIH0sCiAgICAgICAgICAgIHsgdGV4dDogJ1RWcycgfQogICAgICAgICAgXQrCoMKgwqDCoMKgwqDCoMKgfQrCoMKgwqDCoMKgwqBdCsKgwqDCoMKgfSk7CsKgwqB9KTsK"></script></code></pre><h2> Autres utilisations pour une barre de panneau</h2><p> Une barre de panneau <code class="language-js"> </code> peut également être utilisée comme contrôleur pour éditer le contenu. Si vous construisiez une application de retouche photo, vous pourriez avoir un <code class="language-js"> PanelBar </code> avec un panneau de calques, un panneau de couleurs et un panneau d'historique. La sélection d'un panneau révélerait l'outil. La vue de chaque outil peut occuper un espace considérable et cacher le contenu dans les panneaux permet de bien organiser l'espace de travail de l'utilisateur</p><p> Un <code class="language-js"> PanelBar </code> peut également être utilisé pour diriger une série d'actions ou d'étapes. Dites que vous avez un formulaire de commande et que vous avez besoin que l'utilisateur fournisse son adresse de livraison, son mode de livraison et son mode de paiement. Vous ne voulez pas demander toutes les informations à l'avance, mais vous ne voulez pas non plus mettre les informations sur des pages différentes. Au lieu de cela, vous utilisez un <code class="language-js"> PanelBar </code> pour diviser le flux de paiement en plusieurs parties. Voici un exemple de ce à quoi ressemblerait votre formulaire de commande:</p><p> <img decoding="async" src="https://i0.wp.com/blog.arcoptimizer.com/wp-content/uploads/2018/06/1528750900_267_pleins-feux-sur-les-composants-panelbar.png?w=660" data-displaymode="Original" alt=" Barre d'icônes de l'interface utilisateur de Kendo " title="panelbar02" data-recalc-dims="1"/></p><h2> Comparaison des composants de navigation</h2><p> Dans cette série, plusieurs composants ont été introduits. Il peut être déroutant de savoir quand utiliser chaque type. Il peut sembler qu'ils font la même chose mais ne diffèrent que par leur apparence. Ce n'est pas le cas. Choisir le bon composant au bon endroit rend votre application plus utilisable. Les principaux composants de navigation que vous avez vus jusqu'ici sont <a href="https://www.telerik.com/blogs/spotlight-on-kendo-ui-button-groups" title="" class="" target=""><code class="language-js"> ButtonGroup </code></a><a href="https://www.telerik.com/blogs/component-spotlight-menus"><code class="language-js"> Menu </code></a><a href="https://www.telerik.com/blogs/component-spotlight-tabstrip"><code class="language-js"> TabStrip </code></a>et maintenant <code class="language-js"> PanelBar </code>.</p><p> Ci-dessous un résumé avec quelques informations de base à garder à l'esprit:</p><p> <img decoding="async" src="https://i0.wp.com/blog.arcoptimizer.com/wp-content/uploads/2018/06/1528750900_915_pleins-feux-sur-les-composants-panelbar.png?w=660" data-displaymode="Original" alt=" Barre de Panneau de l'UI Kendo " title="panelbar03" data-recalc-dims="1"/></p><h2> Conclusion</h2><p> Le Barre de <code class="language-js"> </code> vous donne un autre moyen de afficher et masquer le contenu Cette dissimulation d'informations est importante pour éviter de submerger l'utilisateur avec trop de choix. Vous avez plusieurs choix pour la conception de la navigation, mais vous n'avez pas à en choisir un seul. Vous pouvez et devriez combiner des composants. Vous pouvez avoir un menu avec quelques liens fixés en haut de votre page et un bouton qui ouvre un tiroir de navigation fait à partir d'un <code class="language-js"> PanelBar </code>. Expérimentez pour voir ce qui fonctionne le mieux pour vous.</p><p> J'ai mentionné dans le tableau ci-dessus que les groupes de boutons peuvent être utilisés pour les barres d'outils. Eh bien, il n'est pas nécessaire d'utiliser un groupe de boutons pour créer une barre d'outils car <a href="https://www.telerik.com/kendo-ui/toolbar" title="" class="" target=""> Kendo UI a un composant de barre d'outils </a>que nous avons également couvert dans cette <a href="https://www.telerik.com/blogs/spotlight-on-toolbars" title="" class="" target=""> série de projecteurs </a>. Et il a beaucoup plus de fonctionnalités afin de personnaliser le comportement exactement comme vous le souhaitez. Si vous avez suivi, vous avez acquis suffisamment de connaissances pour tester vos compétences en Kendo sur des applications dans la nature.</p><h3> Vous voulez essayer l'interface utilisateur de Kendo <a href="http://www.telerik.com/kendo-ui/scheduler" title="" class="" target=""> Vous voulez commencer à profiter de la barre d'outils de l'interface utilisateur de Kendo <a href="https://www.telerik.com/kendo-ui/panelbar" title="" class="" target=""> </a> ou de l'un des 70 autres composants de l'interface utilisateur de Kendo? <a href="http://www.telerik.com/kendo-ui/grid" title="" class="" target=""> Grille </a> ou <a href="http://www.telerik.com/kendo-ui/scheduler" title="" class="" target=""> Planificateur </a>? Vous pouvez commencer un essai gratuit de Kendo UI aujourd'hui et commencer à développer vos applications plus rapidement.</p><p><a href="https://www.telerik.com/download-login-v2-kendoui?ReturnUrl=https://www.telerik.com/download-login-v2-kendoui/thank-you-for-downloading" class="Btn Btn--wl" title="" target=""><i class="fas fa-download"/> Commencer mon test d'interface utilisateur de Kendo </a></p><link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism.min.css" rel="stylesheet" type="text/css"/><link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/toolbar/prism-toolbar.min.css" rel="stylesheet" type="text/css"/><style>code[class*=language-],pre[class*=language-]{background:#f7f7f7;font-family:Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;line-height:1.25}code[class*=language-]{font-size:.8em}pre[class*=language-]{margin:30px 0}.black-text{color:#000 !important}.top-border{margin-top:100px;position:relative}.top-border:before{border-top:3px solid #0181ca;content:"";display:block;position:absolute;top:-50px;width:100%;left:0}.tk-question-and-answer{background:#e6f5ff;border-radius:2px;margin-bottom:30px}.tk-question{background-color:#0181ca;border-top-left-radius:2px;border-top-right-radius:2px;color:#fff;font-weight:bold;padding:10px}.tk-answer{color:#000;padding:10px}.tk-green-highlight,.tk-blue-highlight,.tk-grey-highlight{border-left-width:8px;border-left-style:solid;border-radius:2px;color:#000;padding:20px}.tk-green-highlight{background-color:#ebffeb;border-left-color:#27c106;color:#27c106}.tk-blue-highlight{background-color:#e6f5ff;border-left-color:#0181ca;color:#0181ca}.tk-grey-highlight{background-color:#f7f7f7;border-left-color:#646464;color:#646464}.tk-black-background{background-color:#000}.tk-white-background{background-color:#fff}.tk-green-background{background-color:#27c106}.tk-light-green-background{background-color:#ebffeb}.tk-blue-background{background-color:#0181ca}.tk-light-blue-background{background-color:#e6f5ff}.tk-grey-background{background-color:#646464}.tk-light-grey-background{background-color:#f7f7f7}.tk-fifty-fifty{height:50%;width:50%}.tk-green-border{border-color:#27c106}.tk-blue-border{border-color:#0181ca}blockquote{background:#e6f5ff;border-left:8px solid #0181ca;border-radius:2px;color:#000;margin:20px auto;padding:20px;overflow:auto}blockquote> *: last-child, .tk-blue-highlight> *: last-child, .tk- vert-highlight> *: dernier-enfant, .tk-gris-highlight> *: dernier-enfant, .tk-réponse> *: dernier-enfant {padding-bas: 0px; marge-bas: 0px} .editor-note {margin-top: 0px} .blockquote-image {float: droit! important; padding-left: 20px; padding-bottom: 20px; largeur maximale: 30%}. about-quote {font-size: .7em} blockquote span {color: # 000; affichage: bloc; police-style: normal; police-poids: gras; marge-dessus: 1em} .tk-table {marge-bas: 30px; largeur: 100%} .tk-table td , .tk-table th {frontière: 1px solide # f7f7f7; couleur: # 000; remplissage: 8px} .tk-table th {padding-top: 12px; padding-bottom: 12px; text-align: left} .tk- table-alt-rows tr: nième-enfant (pair) {couleur-arrière-plan: # f7f7f7} .tk-blue-headers th {couleur de fond: # 0181ca; couleur: #fff} .tk-blue-first-column td : first-child {background-color: # 0181ca; couleur: #fff; font-weight: gras} .tk-green-headers th {background-color: # 27c106; couleur: #fff} .tk-gray-headers th {background-color: # 646464; color: #fff} détails {margin-bottom: 40px} kbd {affichage: inline-block; marge: 0 .1em; remplissage: .1em .6em; police-famille: Arial, " Helvetica Neue ", Helvetica, sans-serif; taille-de-police: .7em; hauteur-ligne: 1,4; couleur: # 000; texte-ombre: 0 1px 0 #FFF; couleur de fond: # f7f7f7; bordure: 1px solide # adb3b9; border-radius: 3px; box-shadow: 0 1px 0 rgba (12,13,14,0.2), 0 0 0 2px Encart #FFF, espace-blanc: nowrap} .tk-featured-image-right ,. tk-featured-image-left {max-largeur: 30%! important; marge-bas: 20px! important} .tk-featured-image-right {float: droit! important; marge-gauche: 20px! important} .tk -featured-image-left {float: gauche! important; marge-droite: 20px! important} .twitter-tweet {marge-bas: 30px} .tk-stackblitz {hauteur: 600px; marge inférieure: 30px; largeur: 100 %}
]]></style><hr/></div><p> <span id="previewMode" class="u-dn"> Les commentaires sont désactivés en mode prévisualisation. <br />[ad_2] <br /><a href="https://www.telerik.com/blogs/component-spotlight-panelbar">Source link </a></p><div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon sd-sharing"><h3 class="sd-title">Partager :</h3><div class="sd-content"><ul><li class="share-twitter"><a rel="nofollow noopener noreferrer" data-shared="sharing-twitter-4903" class="share-twitter sd-button share-icon no-text" href="https://blog.arcoptimizer.com/pleins-feux-sur-les-composants-panelbar?share=twitter" target="_blank" title="Cliquez pour partager sur Twitter" ><span></span><span class="sharing-screen-reader-text">Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)</span></a></li><li class="share-facebook"><a rel="nofollow noopener noreferrer" data-shared="sharing-facebook-4903" class="share-facebook sd-button share-icon no-text" href="https://blog.arcoptimizer.com/pleins-feux-sur-les-composants-panelbar?share=facebook" target="_blank" title="Cliquez pour partager sur Facebook" ><span></span><span class="sharing-screen-reader-text">Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)</span></a></li><li class="share-end"></li></ul></div></div></div></p><div id='jp-relatedposts' class='jp-relatedposts' ><h3 class="jp-relatedposts-headline"><em>Articles similaires</em></h3></div></div><footer class="meta-info"><p><span class="meta-item meta-date"><i class="l-clock-o"></i> juin 11, 2018</span> <span class="meta-item meta-tags"><i class="l-tags"></i> <a href="https://blog.arcoptimizer.com/tag/composants" title="View all posts tagged composants">composants</a>, <a href="https://blog.arcoptimizer.com/tag/feux" title="View all posts tagged feux">feux</a>, <a href="https://blog.arcoptimizer.com/tag/panelbar" title="View all posts tagged PanelBar">PanelBar</a>, <a href="https://blog.arcoptimizer.com/tag/pleins" title="View all posts tagged Pleins">Pleins</a></span></p></footer></article></div></div><div id="back-to-top"> <a href="#top">Revenir vers le haut</a></div></section><footer id="footer" class="footer-site invert"><div class="container content clearfix"><div class="row copyright"><div class="column span-6"><p class="site-text">Copyright arcoptimizer.com <script>document.write(new Date().getFullYear())</script> article@arcoptimizer.com</p></div><div class="column span-6 clearfix t-right"><nav class="nav nav-horizontal pull-right"><ul id="menu-menu_footer" class="menu"><li id="menu-item-142202" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-142202"><a href="mailto:article@arcoptimizer.com"><i class='fa fa-envelope'></i></a></li><li id="menu-item-142203" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-142203"><a href="http://article@arcoptimizer.com">article@arcoptimizer.com</a></li></ul></nav></div></div></div></footer><div class="search-interface-overlay"><form role="search" method="get" class="search-interface-holder" action="https://blog.arcoptimizer.com/"> <label class="search-text"> Search: </label> <input
type="text"
id="layers-modal-search-field"
class="search-field"
placeholder="Type Something"
value=""
name="s"
title="Search for:"
autocomplete="off"
autocapitalize="off"
></form> <a href="#" class="search-close"> <i class="l-close"></i> </a></div></section><style type="text/css">@media (max-width: 480px) { .ednpro_main_wrapper{display:none; } }</style><div class="ednpro_main_wrapper ednpro_section"><div class="edn-close-section" id="apex_cookie_0" ><div class="edn-notify-bar edn-position-bottom edn-visibility-show-time edn-custom-template edn_no_close_button" id="edn_custom_template" data-barid="apexbar-0" data-postid="4903"> <input type="hidden" id='effect_type0' value="edn_pro_static"/> <input type="hidden" class='edn_social_optons' value="0"/> <input type="hidden" class='edn_right_optons' value="1"/><div class="edn-container apexnb-bartypeedn_pro_static"><style type="text/css">.edn-notify-bar .edn-custom-design-wrapper .ticker-wrapper .ticker, .edn-notify-bar .ticker-wrapper .ticker{
font-family: default;
font-size: 22px;
background-color: #1e73be;
}
/*added custom css*/
.edn-custom-template[data-barid=apexbar-0] .edn-custom-design-wrapper,
.edn-custom-template[data-barid=apexbar-0],
.edn-custom-template[data-barid=apexbar-0] .edn-contact-lightbox .edn-contact-lightbox-inner-wrap,
.edn-custom-template[data-barid=apexbar-0] .edn-contact-close,
.edn-custom-template[data-barid=apexbar-0] .edn-contact-lightbox-inner-wrap{
font-family: default;
font-size: 22px;
background-color: #1e73be;
}
.edn-custom-template[data-barid=apexbar-0] .edn-contact-lightbox-inner-wrap label{
}
.edn-custom-template[data-barid=apexbar-0] .edn-mulitple-text-content,
.edn-custom-template[data-barid=apexbar-0] .edn_static_text,
.slider_template_wrapper .edn-tweet-content, .edn-post-title-wrap .edn-post-title li,
.edn-custom-template[data-barid=apexbar-0] .edn_static_text,
.slider_template_wrapper .edn-tweet-content, .edn-post-title-wrap .edn-post-title li,
.edn-custom-template[data-barid=apexbar-0] .edn-tweet-content,
.edn-custom-template[data-barid=apexbar-0] .edn-tweet-content a,
.edn-custom-template[data-barid=apexbar-0] .ticker-content,
.edn-custom-template[data-barid=apexbar-0] a,
.edn-custom-template[data-barid=apexbar-0] .ticker-wrapper .ticker-content a,
.edn-custom-template[data-barid=apexbar-0] .ticker-wrapper .ticker-content .edn-tweet-content,
.edn-custom-template[data-barid=apexbar-0] .ticker-wrapper .edn-mulitple-text-content{
font-family: default;
font-size: 22px;
}
.edn-custom-template[data-barid=apexbar-0] .edn-contact-form-wrap .edn-contact-close{
background-color: #1e73be;
}
/*tweets*/
.edn-custom-template[data-barid=apexbar-0] .ticker-wrapper .edn-post-title-readmore{
font-family: default;
font-size: 22px;
}
/*ticker custom design start*/
.edn-custom-template[data-barid=apexbar-0] .ticker-wrapper .ticker-content a{
margin-left: 8px;
}
.edn-custom-template[data-barid=apexbar-0] .ticker_pattern .edn-ticker-wrapper .ticker-wrapper .ticker-swipe{
background-color: #1e73be;
}
/*ticker custom design end*/
.edn-custom-template[data-barid=apexbar-0] .edn-contact-close,input[type="button"].edn-contact-submit{
background-color: #1e73be;
}
.edn-custom-template[data-barid=apexbar-0] a.edn-controls-close,input[type="button"].edn-contact-submit{
color: #000000;
}
.edn-custom-template[data-barid=apexbar-0] .edn-social-heading-title{
font-size: 22px;
}
/*Custom Subscribe Form CSS ADDED*/
.edn-custom-template[data-barid=apexbar-0] h1,
.edn-custom-template[data-barid=apexbar-0] h2,
.edn-custom-template[data-barid=apexbar-0] h3,
.edn-custom-template[data-barid=apexbar-0] h4,
.edn-custom-template[data-barid=apexbar-0] h5,
.edn-custom-template[data-barid=apexbar-0] h6,
.edn-custom-template[data-barid=apexbar-0] .edn-subscribe-form .edn-front-title h3{
font-size: 22px;
}
.edn-custom-template[data-barid=apexbar-0] .edn-subscribe-form .edn-front-title h3 span{
}
.edn-custom-template[data-barid=apexbar-0] .edn-subscribe-form .edn-front-title .show_icon i{
}
/*Constant Contact Subscribe Form CSS END*/
/* For all CUstom buttons start */
.edn-custom-template[data-barid=apexbar-0] .edn-form-field .constant_subscribe,
.edn-custom-template[data-barid=apexbar-0] .edn-subscribe-form .edn-form-field .edn_subs_submit_ajax,
.edn-custom-template[data-barid=apexbar-0] .edn-custom-contact-link,
.edn-custom-template[data-barid=apexbar-0] .edn-temp1-static-button,
.edn-custom-template[data-barid=apexbar-0] .apexnb-search-layout1 .apex-search-right-section .btn-search-now,
.edn-custom-template[data-barid=apexbar-0] .edn_static_text .edn-call-action-button a,
.edn-custom-template[data-barid=apexbar-0] .edn-call-action-button a,
.edn-custom-template[data-barid=apexbar-0] .edn-contact-lightbox .edn-form-field .edn-field input.edn-contact-submit{
background: #eeee22;
color: #000000;
font-family: default;
}
.edn-custom-template[data-barid=apexbar-0] .edn_static_text .edn-call-action-button a:hover,
.edn-custom-template.edn-notify-bar .edn-custom-contact-link:hover,
.edn-custom-template[data-barid=apexbar-0] .apexnb-search-layout1 .apex-search-right-section .btn-search-now:hover,
.edn-custom-template[data-barid=apexbar-0] .edn-subscribe-form .edn-form-field .edn_subs_submit_ajax:hover,
.edn-custom-template[data-barid=apexbar-0] .edn-form-field .edn_mailchimp_submit_ajax:hover,
.edn-custom-template[data-barid=apexbar-0] .edn-form-field .constant_subscribe:hover
{
color: #ffffff;
background: #81d742;
}
.edn-custom-template[data-barid=apexbar-0] .edn_static_text .edn-text-link a,
.edn-custom-template[data-barid=apexbar-0] .edn_multiple_text .edn-mulitple-text-content a,
edn-custom-template[data-barid=apexbar-0] .edn-multiple-content .edn-mulitple-text-content a,
.edn-custom-template[data-barid=apexbar-0] .edn-post-title-wrap .edn-post-title li a{
color: #000000;
background: ;
}
/* close button custom css */
.edn-custom-template[data-barid=apexbar-0] .edn-top-up-arrow.open,
.edn-custom-template[data-barid=apexbar-0] .edn-bottom-down-arrow.open,
.edn-custom-template[data-barid=apexbar-0] .edn-bottom-down-arrow.open,
.edn-custom-template[data-barid=apexbar-0] .edn-left-arrow,
.edn-custom-template[data-barid=apexbar-0] .edn-right-arrow,
.edn-custom-template[data-barid=apexbar-0] .edn-cntrol-wrap.ednpro_user-can-close {
background-image: url("../../images/showhidetoggledown.png") no-repeat scroll 0 0;
}
.edn-custom-template[data-barid=apexbar-0] .edn-cntrol-wrap.ednpro_user-can-close .fa-close{
}
.edn-custom-template[data-barid=apexbar-0] .edn-top-up-arrow {
background-image: url("../../images/showhidetoggletop.png") no-repeat scroll 0 0;
border-radius: 14px;
}
.edn-custom-template[data-barid=apexbar-0] .edn-bottom-down-arrow{
border-radius: 14px;
background-image: url("../../images/showhidetoggledown.png") no-repeat scroll 0 0;
}
/* close button custom css */
.edn-custom-template[data-barid=apexbar-0] .edn_error,.edn-error,
.edn-constant-error
.edn-custom-template[data-barid=apexbar-0] .edn-success,
.edn-constant-success{
font-family: default;
}
/*social icons custom design start*/
.edn-custom-template[data-barid=apexbar-0] .edn-post-title-wrap .edn-post-title li{
}
.edn-custom-template[data-barid=apexbar-0].edn-visibility-show-time{
display: none;
}
.edn-custom-template[data-barid=apexbar-0] .visibility_show-time{
display: none;
}
.edn-notify-bar .edn-custom-design-wrapper .edn-post-title-readmore{
color: #000000 !important;
background: #eeee22 !important;
padding: 2px 8px;
font-size: 35px !important; font-weight: bolder !important; }
.edn-notify-bar .edn-custom-design-wrapper .edn-post-title-readmore:hover{
color: #ffffff !important;
background: #81d742 !important;
}</style><div class="edn-temp-design-wrapper edn-custom-design-wrapper"><div class="edn_middle_content edn_pro_static_pattern"><div class="edn-text-content-wrap"><div class="edn_static_text"><div class="edn-text-link">L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !</div> <span class="edn-call-action-button"> <span class="edn-ca-custom"> <a class="edn-static-button" href="https://allleads.arcoptimizer.com/fr" target='_blank'> <span class="edn-ca-static-button">Essai Gratuit Aujourd'hui</span> </a> </span> </span></div></div></div></div></div> <input type="hidden" class="edn-ticker-option" id="apexnb-ticker-0"
data-ticker-speed=""
data-ticker-direction="vertical"
data-ticker-title=""
data-ticker-hover=""
data-slider-controls=""
data-slider-animation="horizontal"
data-slider-duration=""
data-slider-auto="true"
data-slider-transition=""
data-slider-adaptive-height="true"
data-scroll-controls=""
data-scroll-direction="ltr"
data-scroll-animation="reveal"
data-scroll-speed=""
data-scroll-title=""
/> <input type="hidden" class="edn-visibility-bar-options edn-visibility-option-0" id="apexnb-0"
data-show-time-duration="200"
data-hide-time-duration=""
data-visibility-type = "show-time"
data-close-type = "disable"
data-close-once = ""
data-duration-close = ""
data-show_once_hideshow = ""
data-notification_bar_id = "0"
/><div class="apexnb-ccform edn-template-3 edn-popup-form" data-formtype="apexnb-static-custom" data-barid="0"><div class="edn-contact-lightbox" id="edn-static-cf-btn-0-lightbox" style="display: none;"><div class="ednpro_overlay"></div><div class="edn-contact-lightbox-inner-wrap " id="edn-contact-lightbox-inner-wrap-0"><div class="edn-contact-lightbox-inner-content edn-contact-lightbox-inner-wrap apexnb-ccustomform-wrapper "></div></div></div></div></div></div></div><script defer src="data:text/javascript;base64,PGFtcC1hdXRvLWFkcyB0eXBlPSJhZHNlbnNlIgogICAgICAgIGRhdGEtYWQtY2xpZW50PSJjYS1wdWItMjI0NzE3MTkwOTI2Njk5MCI+CjwvYW1wLWF1dG8tYWRzPg=="></script> <script defer src="data:text/javascript;base64,CgkJd2luZG93LldQQ09NX3NoYXJpbmdfY291bnRzID0geyJodHRwczpcL1wvYmxvZy5hcmNvcHRpbWl6ZXIuY29tXC9wbGVpbnMtZmV1eC1zdXItbGVzLWNvbXBvc2FudHMtcGFuZWxiYXIiOjQ5MDN9OwoJ"></script> <link rel='stylesheet' id='aal_style-css' href='https://blog.arcoptimizer.com/wp-content/cache/autoptimize/css/autoptimize_single_4c15efd49114c121de9d8db67a23db93.css' type='text/css' media='all' /> <script defer type='text/javascript' src='https://blog.arcoptimizer.com/wp-content/cache/autoptimize/js/autoptimize_single_328b8123661abdd5f4a0c695e7aa9dcc.js?minify=false&ver=132249e245926ae3e188' id='jetpack-photon-js'></script> <script defer type='text/javascript' src='https://blog.arcoptimizer.com/wp-content/themes/defaut_theme3/assets/js/wow.min.js' id='layers-child-wow-js'></script> <script defer type='text/javascript' src='https://stats.wp.com/e-202416.js' id='jetpack-stats-js'></script> <script type='text/javascript' id='jetpack-stats-js-after'>_stq = window._stq || [];
_stq.push([ "view", {v:'ext',blog:'146388461',post:'4903',tz:'0',srv:'blog.arcoptimizer.com',j:'1:12.8.1'} ]);
_stq.push([ "clickTrackerInit", "146388461", "4903" ]);</script> <script defer type='text/javascript' src='https://blog.arcoptimizer.com/wp-content/cache/autoptimize/js/autoptimize_single_f4c0e5d883b22cceae0e8fbf05d26b3c.js' id='quads-ads-js'></script> <script defer id="sharing-js-js-extra" src="data:text/javascript;base64,Ci8qIDwhW0NEQVRBWyAqLwp2YXIgc2hhcmluZ19qc19vcHRpb25zID0geyJsYW5nIjoiZW4iLCJjb3VudHMiOiIxIiwiaXNfc3RhdHNfYWN0aXZlIjoiMSJ9OwovKiBdXT4gKi8K"></script> <script defer type='text/javascript' src='https://blog.arcoptimizer.com/wp-content/plugins/jetpack/_inc/build/sharedaddy/sharing.min.js' id='sharing-js-js'></script> <script defer id="sharing-js-js-after" src="data:text/javascript;base64,CnZhciB3aW5kb3dPcGVuOwoJCQkoIGZ1bmN0aW9uICgpIHsKCQkJCWZ1bmN0aW9uIG1hdGNoZXMoIGVsLCBzZWwgKSB7CgkJCQkJcmV0dXJuICEhICgKCQkJCQkJZWwubWF0Y2hlcyAmJiBlbC5tYXRjaGVzKCBzZWwgKSB8fAoJCQkJCQllbC5tc01hdGNoZXNTZWxlY3RvciAmJiBlbC5tc01hdGNoZXNTZWxlY3Rvciggc2VsICkKCQkJCQkpOwoJCQkJfQoKCQkJCWRvY3VtZW50LmJvZHkuYWRkRXZlbnRMaXN0ZW5lciggJ2NsaWNrJywgZnVuY3Rpb24gKCBldmVudCApIHsKCQkJCQlpZiAoICEgZXZlbnQudGFyZ2V0ICkgewoJCQkJCQlyZXR1cm47CgkJCQkJfQoKCQkJCQl2YXIgZWw7CgkJCQkJaWYgKCBtYXRjaGVzKCBldmVudC50YXJnZXQsICdhLnNoYXJlLXR3aXR0ZXInICkgKSB7CgkJCQkJCWVsID0gZXZlbnQudGFyZ2V0OwoJCQkJCX0gZWxzZSBpZiAoIGV2ZW50LnRhcmdldC5wYXJlbnROb2RlICYmIG1hdGNoZXMoIGV2ZW50LnRhcmdldC5wYXJlbnROb2RlLCAnYS5zaGFyZS10d2l0dGVyJyApICkgewoJCQkJCQllbCA9IGV2ZW50LnRhcmdldC5wYXJlbnROb2RlOwoJCQkJCX0KCgkJCQkJaWYgKCBlbCApIHsKCQkJCQkJZXZlbnQucHJldmVudERlZmF1bHQoKTsKCgkJCQkJCS8vIElmIHRoZXJlJ3MgYW5vdGhlciBzaGFyaW5nIHdpbmRvdyBvcGVuLCBjbG9zZSBpdC4KCQkJCQkJaWYgKCB0eXBlb2Ygd2luZG93T3BlbiAhPT0gJ3VuZGVmaW5lZCcgKSB7CgkJCQkJCQl3aW5kb3dPcGVuLmNsb3NlKCk7CgkJCQkJCX0KCQkJCQkJd2luZG93T3BlbiA9IHdpbmRvdy5vcGVuKCBlbC5nZXRBdHRyaWJ1dGUoICdocmVmJyApLCAnd3Bjb210d2l0dGVyJywgJ21lbnViYXI9MSxyZXNpemFibGU9MSx3aWR0aD02MDAsaGVpZ2h0PTM1MCcgKTsKCQkJCQkJcmV0dXJuIGZhbHNlOwoJCQkJCX0KCQkJCX0gKTsKCQkJfSApKCk7CnZhciB3aW5kb3dPcGVuOwoJCQkoIGZ1bmN0aW9uICgpIHsKCQkJCWZ1bmN0aW9uIG1hdGNoZXMoIGVsLCBzZWwgKSB7CgkJCQkJcmV0dXJuICEhICgKCQkJCQkJZWwubWF0Y2hlcyAmJiBlbC5tYXRjaGVzKCBzZWwgKSB8fAoJCQkJCQllbC5tc01hdGNoZXNTZWxlY3RvciAmJiBlbC5tc01hdGNoZXNTZWxlY3Rvciggc2VsICkKCQkJCQkpOwoJCQkJfQoKCQkJCWRvY3VtZW50LmJvZHkuYWRkRXZlbnRMaXN0ZW5lciggJ2NsaWNrJywgZnVuY3Rpb24gKCBldmVudCApIHsKCQkJCQlpZiAoICEgZXZlbnQudGFyZ2V0ICkgewoJCQkJCQlyZXR1cm47CgkJCQkJfQoKCQkJCQl2YXIgZWw7CgkJCQkJaWYgKCBtYXRjaGVzKCBldmVudC50YXJnZXQsICdhLnNoYXJlLWZhY2Vib29rJyApICkgewoJCQkJCQllbCA9IGV2ZW50LnRhcmdldDsKCQkJCQl9IGVsc2UgaWYgKCBldmVudC50YXJnZXQucGFyZW50Tm9kZSAmJiBtYXRjaGVzKCBldmVudC50YXJnZXQucGFyZW50Tm9kZSwgJ2Euc2hhcmUtZmFjZWJvb2snICkgKSB7CgkJCQkJCWVsID0gZXZlbnQudGFyZ2V0LnBhcmVudE5vZGU7CgkJCQkJfQoKCQkJCQlpZiAoIGVsICkgewoJCQkJCQlldmVudC5wcmV2ZW50RGVmYXVsdCgpOwoKCQkJCQkJLy8gSWYgdGhlcmUncyBhbm90aGVyIHNoYXJpbmcgd2luZG93IG9wZW4sIGNsb3NlIGl0LgoJCQkJCQlpZiAoIHR5cGVvZiB3aW5kb3dPcGVuICE9PSAndW5kZWZpbmVkJyApIHsKCQkJCQkJCXdpbmRvd09wZW4uY2xvc2UoKTsKCQkJCQkJfQoJCQkJCQl3aW5kb3dPcGVuID0gd2luZG93Lm9wZW4oIGVsLmdldEF0dHJpYnV0ZSggJ2hyZWYnICksICd3cGNvbWZhY2Vib29rJywgJ21lbnViYXI9MSxyZXNpemFibGU9MSx3aWR0aD02MDAsaGVpZ2h0PTQwMCcgKTsKCQkJCQkJcmV0dXJuIGZhbHNlOwoJCQkJCX0KCQkJCX0gKTsKCQkJfSApKCk7Cg=="></script> <script defer src="data:text/javascript;base64,DQogd293ID0gbmV3IFdPVygNCiB7DQogLy9ib3hDbGFzczogICAgICd3b3cnLCAgICAgIC8vIGRlZmF1bHQNCiAvL2FuaW1hdGVDbGFzczogJ2FuaW1hdGVkJywgLy8gZGVmYXVsdA0KIG9mZnNldDogICAgICAgMTAwLCAgICAgICAgICAvLyBkZWZhdWx0DQogLy9tb2JpbGU6ICAgICAgIHRydWUsICAgICAgIC8vIGRlZmF1bHQNCiAvL2xpdmU6ICAgICAgICAgdHJ1ZSAgICAgICAgLy8gZGVmYXVsdA0KIH0NCiApDQogd293LmluaXQoKTsNCiA="></script> <script defer src="data:text/javascript;base64,DQogICAgICAgIGpRdWVyeShkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24gKCQpIHsNCg0KICAgICAgICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCBkb2N1bWVudC5mb3Jtcy5sZW5ndGg7ICsraSkgew0KICAgICAgICAgICAgICAgIGxldCBmb3JtID0gZG9jdW1lbnQuZm9ybXNbaV07DQoJCQkJaWYgKCQoZm9ybSkuYXR0cigibWV0aG9kIikgIT0gImdldCIpIHsgJChmb3JtKS5hcHBlbmQoJzxpbnB1dCB0eXBlPSJoaWRkZW4iIG5hbWU9ImdxZUtwQ04tVHNWUHgiIHZhbHVlPSJWOUBKW1hfOGFxTCIgLz4nKTsgfQppZiAoJChmb3JtKS5hdHRyKCJtZXRob2QiKSAhPSAiZ2V0IikgeyAkKGZvcm0pLmFwcGVuZCgnPGlucHV0IHR5cGU9ImhpZGRlbiIgbmFtZT0id1JrT3VOQS1MZEVybSIgdmFsdWU9Ii5UZkZdYXQiIC8+Jyk7IH0KICAgICAgICAgICAgfQ0KDQogICAgICAgICAgICAkKGRvY3VtZW50KS5vbignc3VibWl0JywgJ2Zvcm0nLCBmdW5jdGlvbiAoKSB7DQoJCQkJaWYgKCQodGhpcykuYXR0cigibWV0aG9kIikgIT0gImdldCIpIHsgJCh0aGlzKS5hcHBlbmQoJzxpbnB1dCB0eXBlPSJoaWRkZW4iIG5hbWU9ImdxZUtwQ04tVHNWUHgiIHZhbHVlPSJWOUBKW1hfOGFxTCIgLz4nKTsgfQppZiAoJCh0aGlzKS5hdHRyKCJtZXRob2QiKSAhPSAiZ2V0IikgeyAkKHRoaXMpLmFwcGVuZCgnPGlucHV0IHR5cGU9ImhpZGRlbiIgbmFtZT0id1JrT3VOQS1MZEVybSIgdmFsdWU9Ii5UZkZdYXQiIC8+Jyk7IH0KICAgICAgICAgICAgICAgIHJldHVybiB0cnVlOw0KICAgICAgICAgICAgfSk7DQoNCiAgICAgICAgICAgIGpRdWVyeS5hamF4U2V0dXAoew0KICAgICAgICAgICAgICAgIGJlZm9yZVNlbmQ6IGZ1bmN0aW9uIChlLCBkYXRhKSB7DQoNCiAgICAgICAgICAgICAgICAgICAgaWYgKGRhdGEudHlwZSAhPT0gJ1BPU1QnKSByZXR1cm47DQoNCiAgICAgICAgICAgICAgICAgICAgaWYgKHR5cGVvZiBkYXRhLmRhdGEgPT09ICdvYmplY3QnICYmIGRhdGEuZGF0YSAhPT0gbnVsbCkgew0KCQkJCQkJZGF0YS5kYXRhLmFwcGVuZCgiZ3FlS3BDTi1Uc1ZQeCIsICJWOUBKW1hfOGFxTCIpOwpkYXRhLmRhdGEuYXBwZW5kKCJ3UmtPdU5BLUxkRXJtIiwgIi5UZkZdYXQiKTsKICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgICAgIGVsc2Ugew0KICAgICAgICAgICAgICAgICAgICAgICAgZGF0YS5kYXRhID0gZGF0YS5kYXRhICsgJyZncWVLcENOLVRzVlB4PVY5QEpbWF84YXFMJndSa091TkEtTGRFcm09LlRmRl1hdCc7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9KTsNCg0KICAgICAgICB9KTsNCiAgICA="></script> </body></html>