Автозаполнение вкладок пользовательского интерфейса Jquery - PullRequest
Новая
       5

Автозаполнение вкладок пользовательского интерфейса Jquery

0 голосов
/ 19 августа 2009

Мне нужен способ автоматического заполнения элементов управления вкладки jquery путем получения битов из html, который выводится drupal. Кто-нибудь может предложить предложения? Прямо сейчас UI-скрипт становится бесполезным и создает свой собственный набор элементов div, соответствующих навигации. В этот момент вкладки ломаются. Я ни в коем случае не Javascript или JQuery Pro, так что извините мой простой код;) 

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

1 Ответ

0 голосов
/ 20 августа 2009

Джереми - Да, идея заключалась в том, чтобы иметь немного javascript, который мог бы создавать вкладки на лету, без особой переделки конфигурации представлений по умолчанию. С этим небольшим количеством 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...