ansaurus

Question

Answer 1

A:

Jeremy -- Yes, the idea was to have a bit of javascript that could create tabs on the fly, without much reworking of the default Views config. With this little bit of javascript you can basically convert any grouped-view into tabs. The main benefit being that if the user doesn't have js enabled they get the same info in a plain list.

This Problem is Solved

<!DOCTYPE html>

jQuery UI Tabs (Auto create tabs)

 <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"&gt;&lt;/script&gt;
 <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"&gt;&lt;/script&gt;
 <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"&gt;&lt;/script&gt;

 <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>

robotoverlord 2009-08-20 18:19:33

For a live version please look here,http://robotoverlord.mobi/LAB/drupal-calendar-tabs/

robotoverlord 2009-08-20 18:20:53

Nice solution. You could possible bundle it up into a module of some sort.

Jeremy French 2009-08-21 11:07:40

ansaurus

tags:

views:

answers:

Auto-populate Jquery UI Tabs

related questions