自動填充jquery UI選項卡

我需要一種方法來通過從drupal輸出的html中抓取位來自動填充jquery Tab控件。誰能提供建議？現在，UI腳本變得不合時宜，並創建它自己的一組div來匹配導航。此時標籤打破。我絕不是一個JavaScript或jQuery的親所以原諒我的簡單的代碼;）自動填充jquery UI選項卡

<!DOCTYPE html>

jQuery用戶界面標籤（自動創建標籤）

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

來源

2009-08-19 d3l3t3m3

有你在jQuery的，而不是主題層這樣一個paticular原因是什麼？ – 2009-08-20 08:35:26

傑里米 - 是的，這個想法是有一點點的JavaScript，可以動態創建選項卡，而不需要重新設置默認的Views配置。有了這一點的JavaScript，你基本上可以將任何分組視圖轉換爲標籤。主要的好處是，如果用戶沒有啓用js，他們會在普通列表中獲得相同的信息。

這個問題就解決了

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

來源

2009-08-20 18:19:33 d3l3t3m3

對於現場版本，請看這裏， http://robotoverlord.mobi/LAB/drupal-calendar-tabs/ – d3l3t3m3 2009-08-20 18:20:53

很好的解決方案。你可以將它捆綁成某種模塊。 – 2009-08-21 11:07:40

自動填充jquery UI選項卡

回答

相關問題