Boîte de dialogue jQuery UI: comment ajouter des onglets à la zone de contenu?

Question

Comment pouvez-vous ajouter des tabulations à la zone de contenu de la boîte de dialogue jQuery UI?

Answer 1

Recherchez le code permettant de créer des onglets dans la boîte de dialogue jQuery UI. Veuillez télécharger les fichiers CSS et JavaScript, c'est-à-dire regrouper à partir du site Web jQuery et les attacher à votre projet.

 $(function() { 
      $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix'); 
      $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left'); 
     }); 

     $(document).ready(function() { 
      $("#dialog").dialog({ 
       resizable:false, 
       closeOnEscape: false, 
       open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }, 
       modal: true, 
       width:800 
      }).parent().find('div.ui-dialog-titlebar').addClass('titleClass'); 
     }); 

      .ui-tabs-vertical { width: 55em; } 
      .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } 
      .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } 
      .ui-tabs-vertical .ui-tabs-nav li a { display:block; } 
      .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } 
      .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} 
     </style> 

     <div id="dialog" style="background-color:Gray; text-align:center;"> 
      <div class="demo"> 
       <div id="tabs"> 
        <ul> 
         <li><a href="#tabs-1">Nunc tincidunt</a></li> 
         <li><a href="#tabs-2">Proin dolor</a></li> 
         <li><a href="#tabs-3">Aenean lacinia</a></li> 
        </ul> 
        <div id="tabs-1"> 
         <h2>Content heading 1</h2> 
        </div> 
        <div id="tabs-2"> 
         <h2>Content heading 2</h2> 
        </div> 
        <div id="tabs-3"> 
         <h2>Content heading 3</h2> 
        </div> 
       </div> 
      </div><!-- End demo --> 

      <div class="demo-description"> 
      </div> 
     </div> 
    </body> 
</html>