bonjour, je souhaiterais créer une barre de navigation verticale sur laquelle j'aimerais que l'utilisateur puisse ajouter/supprimer des onglets. J'ai trouvé quelques réponses sur internet mais toutes sans exeption utilisent Jquery que je ne peut utiliser par manque de place sur mon système embarqué.

si l'un d'entre vous à ne serais -ce qu'une piste de recherche a me proposer j'en serais ravis

Bonjour,

Il est très simple de passer du code utilisant jquery à du pure javascript. Je t'invite à essayer et à nous partager ton avancement lorsque tu bloqueras.

    <script src="http://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
       <script>
        $(document).ready(function() {
         $("#demoTabs").tabs();
         $("#removeTabs").click(function() {
        var tabIndex = parseInt($("#indexValue").val(), 10);
        var tab = $( "#demoTabs" ).find(".ui-tabs-nav li:eq(" + tabIndex + ")").remove();
        $("#demoTabs").tabs("refresh");
      });
      $("#addTabs").click(function() {
        $("<li><a href='myTab.txt'>New Tab</a></li>").appendTo("#demoTabs .ui-tabs-nav");
        $("#demoTabs").tabs("refresh");
      });

        });
    </script> 

pour le java script et voici le HTML de base

<div id="demoTabs">
    <ul>x
      <li><a href="">Tab 1</a></li>
      <li><a href="">Tab 2</a></li>
      <li><a href="">Tab 3</a></li>
    </ul>
    
  </div>
  <br>
   <label>Index No of Tab to be Removed (zero based):</label>
  <input for="indexValue" id="indexValue"><p>
  <button type="button" id="removeTabs">Remove!</button>
  <button type="button" id="addTabs">Add a new tab!</button>
</body>
</html>

l'idée est donc de passer le script jquery en javascript vanilla. J'ai donc aussi fait une recherche pour passer de Jquery a Js et j'ai trouvé ce site https://putaindecode.io/fr/articles/js/de-jquery-a-vanillajs/

en ce qui concert les .click je pensais donc les remplacer par des onclick ou des :

.addEventListener('click', function() {

les .appendTo en :

document.body.appendChild(document.createElement("p"));

je reviens vers vous en cas de bloquage/problème ou même en cas de solution trouvée
merci encore

Bonjour seiseo,

Voici un exemple rapide, pour te montrer comment on peut faire  :

https://codepen.io/Zonecss/pen/RvdRMm

Je suis partie du principe qu'il faut en réalité juste ajouter un LI dans le UL

Pour le desing c'est du css

J'espère que cela t'aidra

AliasDmc: alors dans un premier temps je te remercie d'avoir fait ça pour moi. Pour le moment je dois bien avouer qu'il y a encore quelques choses que je ne comprend pas bien mais la solution est bien pour ce que je souhaite faire. Donc vraiment merci.

je vais donc regarder ça de plus près pour tout bien comprendre

encore merci a tous