Auto-peupler les onglets de l'interface utilisateur de Jquery

J'ai besoin d'un moyen de remplir automatiquement les contrôles Tab de jquery en saisissant des bits du code HTML qui est sorti par drupal. Quelqu'un peut-il offrir des suggestions? À l'heure actuelle, le script de l'interface utilisateur se détraque et crée son propre ensemble de div pour correspondre à la navigation. À ce stade, les onglets se cassent. Je suis pas un pro javascript ou jquery donc excuser mon code simple;)Auto-peupler les onglets de l'interface utilisateur de Jquery

<!DOCTYPE html>

jQuery UI onglets (Auto créer des onglets)

<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script> 

    <script type="text/javascript"> 

     $(function(){ 

      $('div.tab-body .title').each(function(i){ 
       var Str = $(this).text(); 
       var li = '<li><a href="#link">' + Str + '</a></li>'; 
       $('ul.tabs').append(li); 
       $('ul.tabs li a').each(function(i){ 
        $(this).attr("href", ('div' + ++i)); 
       }) 

      }) 
     });  

     $(function(){ 
      $('#tabs').tabs(); 

     }); 

    </script> 

    <style> 
     body {font: 12px/14px "Lucida Grande", Lucida, Verdana, sans-serif;padding:50px;} 
     .demoHeaders {width:330px;border:1px #ccc solid;padding:15px;margin-bottom:20px;} 
     .tab-body {padding: 15px} 
    </style> 

</head> 
<body> 

    <div class="demoHeaders"> 
     The purpose of the test is to find a way to auto-populate tab navigation for jQuery UI Tabs. 
     This would be particularly useful for Drupal Views that are grouped according to field data. 
     <br /><br /> 
     <a href="works.html">A link to regular tabs </a> 
    </div> 
    <div id="tabs"> 

       <ul class="tabs"> 

        <!-- TABS GO HERE --> 

       </ul> 


       <div id="tabs-1" class="tab-body"> 
        <div class="title">Aug</div> 
        <ul> 
         <li>Outdoor Adventure Club -- Thu, 2009-08-31 09:00</li> 
        </ul> 
       </div> 

       <div id="tabs-2" class="tab-body"> 
        <div class="title">Sept</div> 
        <ul> 
         <li>Outdoor Adventure Club -- Thu, 2009-09-31 09:00</li> 
        </ul> 
       </div> 

       <div id="tabs-3" class="tab-body"> 
        <div class="title">Oct</div> 
        <ul> 
         <li>Outdoor Adventure Club -- Thu, 2009-10-31 09:00</li> 
        </ul> 
       </div> 

       <div id="tabs-4" class="tab-body"> 
        <div class="title">Nov</div> 
        <ul> 
         <li>Outdoor Adventure Club -- Thu, 2009-11-31 09:00</li> 
        </ul> 
       </div> 

       <div id="tabs-5" class="tab-body"> 
        <div class="title">Dec</div> 
        <ul> 
         <li>Outdoor Adventure Club -- Thu, 2009-12-31 09:00</li> 
        </ul> 
       </div> 

    </div> 

</body>

Source

2009-08-19 d3l3t3m3

Y at-il une raison paticular vous faites cela en jquery plutôt que la couche de thème? –

Jeremy - Oui , l'idée était d'avoir un peu de javascript qui pourrait créer des onglets à la volée, sans beaucoup retravailler la config Views par défaut. Avec ce peu de javascript, vous pouvez convertir n'importe quelle vue groupée en onglets. Le principal avantage étant que si l'utilisateur n'a pas js activé, ils obtiennent la même information dans une liste simple.

Ce problème est résolu

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <title>jQuery UI Tabs (Auto create tabs)</title> 

     <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
     <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
     <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
     <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script> 

     <script type="text/javascript"> 

      $(document).ready(function(){ 

       $('div.tab-body .title').each(function(i){ 
        var i = 0; 
        var Str = $(this).text(); 
        var IDval = $(this).parent().attr("id"); 

        if (Str == "<?php echo date('M'); ?>") 
         { 
         var li = '<li class="' + Str + ' ui-tabs-selected ui-state-active"><a href="#' + IDval + '">' + Str + '</a></li>'; 
         } 
        else 
         { 
         var li = '<li class="' + Str + '"><a href="#' + IDval + '">' + Str + '</a></li>'; 
         }    

        $('ul.tabs').append(li); 
       }) 
      });  

      $(document).ready(function(){ 

       $('#tabs').tabs(); 

      }); 

     </script> 

     <style> 
      body {font: 12px/14px "Lucida Grande", Lucida, Verdana, sans-serif;padding:50px;} 
      .demoHeaders {width:330px;border:1px #ccc solid;padding:15px;margin-bottom:20px;} 
      .tab-body {padding: 15px} 
     </style> 

    </head> 
    <body> 

     <div class="demoHeaders"> 
      The purpose of the test is to find a way to auto-populate tab navigation for jQuery UI Tabs. 
      This would be particularly useful for Drupal Views that are grouped according to field data. 
      <br /><br /> 
      <b>Update:</b> The tabs populate properly, and the right tab is selected with a bit of php. 
     </div> 
     <div id="tabs"> 

        <ul class="tabs"> 

         <!-- TABS GO HERE --> 

        </ul> 

        <div id="tabs-1" class="tab-body"> 
         <div class="title">Jul</div> 
         <ul> 
          <li>Outdoor Adventure Club -- Thu, 2009-08-31 09:00</li> 
         </ul> 
        </div>   

        <div id="tabs-2" class="tab-body"> 
         <div class="title">Aug</div> 
         <ul> 
          <li>Outdoor Adventure Club -- Thu, 2009-08-31 09:00</li> 
         </ul> 
        </div> 

        <div id="tabs-3" class="tab-body"> 
         <div class="title">Sept</div> 
         <ul> 
          <li>Outdoor Adventure Club -- Thu, 2009-09-31 09:00</li> 
         </ul> 
        </div> 

        <div id="tabs-4" class="tab-body"> 
         <div class="title">Oct</div> 
         <ul> 
          <li>Outdoor Adventure Club -- Thu, 2009-10-31 09:00</li> 
         </ul> 
        </div> 

        <div id="tabs-5" class="tab-body"> 
         <div class="title">Nov</div> 
         <ul> 
          <li>Outdoor Adventure Club -- Thu, 2009-11-31 09:00</li> 
         </ul> 
        </div> 

        <div id="tabs-6" class="tab-body"> 
         <div class="title">Dec</div> 
         <ul> 
          <li>Outdoor Adventure Club -- Thu, 2009-12-31 09:00</li> 
         </ul> 
        </div> 

     </div> 

    </body> 
</html>

Source

2009-08-20 18:19:33 d3l3t3m3

Pour une version en direct s'il vous plaît regardez ici, http://robotoverlord.mobi/LAB/drupal-calendar-tabs/ – d3l3t3m3

Belle solution. Vous pourriez éventuellement le regrouper dans un module quelconque. –

Auto-peupler les onglets de l'interface utilisateur de Jquery

Répondre

Questions connexes