Jquery UIタブの自動入力

drupal jquery-ui tabs

私はdrupalによって出力されるhtmlからビットをつかむことによってjqueryタブコントロールを自動生成する方法が必要です。 誰もが提案を提供できますか? 今のところUIスクリプトは見栄えよくなり、ナビゲーションに合わせて独自のdivのセットを作成します。 その時点でタブは壊れます。 私は決してjavascriptやjqueryのプロではないので、私の簡単なコードを言い訳してください;)

jQuery UIタブ(タブを自動作成)

$(function(){

$( 'div.tab-body .title')。each(関数(i){var Str = $(this).text(); var li = '<li> <a href="#link">' Str '</a> </li>'; $( 'ul.tabs')。追加(li); $( 'ul.tabs li a')。それぞれ(function(i){$(this).attr( "href"、( 'div' i));})

})});

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

;));


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 {パディング:15px}


このテストの目的は、jQuery UIタブのタブナビゲーションに自動入力する方法を見つけることです。 これは、フィールドデータに従ってグループ化されているDrupal Viewsに特に役立ちます。

通常のタブへのリンク




8月屋外アドベンチャークラブ - 木、2009-08-31 09:00

セプトアウトドアアドベンチャークラブ - 木、2009-09-31 09:00

10月屋外アドベンチャークラブ - 木、2009-10-31 09:00

11月屋外アドベンチャークラブ - 木、2009-11-31 09:00

12月屋外アドベンチャークラブ - 木、2009-12-31 09:00

  0  0


ベストアンサー

Jeremy – はい、アイデアは、デフォルトのViews設定をそれほど変更せずに、その場でタブを作成できるjavascriptを少し用意することでした。 このちょっとしたjavascriptを使えば、基本的にグループ化されたビューをタブに変換することができます。 主な利点は、ユーザーがjsを有効にしていない場合、プレーンリストに同じ情報が表示されることです。

この問題は解決されました

        jQuery UI Tabs (Auto create tabs)








            $(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();

            });




            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}






            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.



            Update: The tabs populate properly, and the right tab is selected with a bit of php.










                        Jul

                            Outdoor Adventure Club -- Thu, 2009-08-31 09:00




                        Aug

                            Outdoor Adventure Club -- Thu, 2009-08-31 09:00




                        Sept

                            Outdoor Adventure Club -- Thu, 2009-09-31 09:00




                        Oct

                            Outdoor Adventure Club -- Thu, 2009-10-31 09:00




                        Nov

                            Outdoor Adventure Club -- Thu, 2009-11-31 09:00




                        Dec

                            Outdoor Adventure Club -- Thu, 2009-12-31 09:00

0


タイトルとURLをコピーしました