Как сделать многоуровневые панели с вкладками в HTML / CSS / JavaScript? - PullRequest
Новая
       19

Как сделать многоуровневые панели с вкладками в HTML / CSS / JavaScript?

0 голосов
/ 12 июля 2011

Я хочу создать многоуровневые панели с вкладками для моего PHP-интерфейса.

Я хочу добиться чего-то вроде этого:

_______ | TAB1 || Tab2 || Tab3 | ________________________________
___________ | SUB TAB1 || Sub Tab2 | _____________________
| Content of Sub Tab 1 of Tab1 |
| Content of Sub Tab 1 of Tab1 |
| Content of Sub Tab 1 of Tab1 |
| Content of Sub Tab 1 of Tab1 |

Точно так же, когда я нажимаю на Sub tab2 в Tab1, он должен показывать его содержимое. Теперь, когда я нажимаю Tab 2, он должен по умолчанию отображать содержимое своей вложенной вкладки 11, а когда я нажимаю SubTab2 вкладки Tab2, он должен отображать ее содержимое. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head><title>Tab-View Sample</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords"    content="" />
        <link rel="stylesheet" type="text/css" href="tab-view.css" />
    </head>

    <body>
        <?php $id = isset($_GET['id']) ? $_GET['id'] : 1;
            $ida = isset($_GET['ida']) ? $_GET['ida'] : 11;
        ?>
        <div class="TabView" id="TabView">
            <!-- ***** Tabs ************************************************************ -->
            <div class="Tabs" style="width: 452px;">
              <a <?=($id == 1) ? 'class="Current"' : 'href="sample.php?id=1"';?>>Tab 1</a>
              <a <?=($id == 2) ? 'class="Current"' : 'href="sample.php?id=2"';?>>Tab 2</a>
              <a <?=($id == 3) ? 'class="Current"' : 'href="sample.php?id=3"';?>>Tab 3</a>
            </div>

            <!-- ***** Pages *********************************************************** -->
            <div class="Pages">
                <div class="Page" style="display: <?=($id == 1 && $ida == 11) ? 'block' : 'none';?>">
                    <div class="Pad">
                        <div class="Tabs" style="width: 452px;">
                            <a <?=($ida == 11) ? 'class="Current"' : 'href="sample.php?id=1&ida=11"';?>>Tab 1</a>
                            <a <?=($ida == 12) ? 'class="Current"' : 'href="sample.php?id=1&ida=12"';?>>Tab 2</a>
                        </div>

                        <div class="Pages">
                            <div class="Page" style="display: <?=($ida == 11) ? 'block' : 'none';?>">
                                <div class="Pad">
                                    Hello World Tab 11!!!
                                </div>
                            </div>
                        </div>
                        <div class="Pages">
                            <div class="Page" style="display: <?=($ida == 12) ? 'block' : 'none';?>">
                                <div class="Pad">
                                    Hello World Tab 12!!!
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="Page" style="display: <?=($id == 2) ? 'block' : 'none';?>">
                    <div class="Pad">
                        <? odbc_result_all($cur,"border=1"); ?>
                    </div>
                </div>

                <div class="Page" style="display: <?=($id == 3) ? 'block' : 'none';?>">
                    <div class="Pad">
                        <?
                        foreach($arr as $val)
                        {
                            echo($val.'<br>');
                        }
                        ?>
                    </div>
                </div>
            </div>

            <div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
        </div>


        <div class="TabView1" id="TabView1">
            <!-- ***** Tabs ************************************************************ -->
            <div class="Tabs" style="width: 452px;">
              <a <?=($id == 4) ? 'class="Current"' : 'href="sample.php?id=4"';?>>Tab 4</a>
              <a <?=($id == 5) ? 'class="Current"' : 'href="sample.php?id=5"';?>>Tab 5</a>
              <a <?=($id == 6) ? 'class="Current"' : 'href="sample.php?id=6"';?>>Tab 6</a>
            </div>

            <!-- ***** Pages *********************************************************** -->
            <div class="Pages">
                <div class="Page" style="display: <?=($id == 4) ? 'block' : 'none';?>">
                    <div class="Pad">
                        Hello India!!!
                    </div>
                </div>

                <div class="Page" style="display: <?=($id == 5) ? 'block' : 'none';?>">
                    <div class="Pad">
                        <? odbc_result_all($cur,"border=1"); ?>
                    </div>
                </div>

                <div class="Page" style="display: <?=($id == 6) ? 'block' : 'none';?>">
                    <div class="Pad">
                        <?
                        foreach($arr as $val)
                        {
                            echo($val.'<br>');
                        }
                        ?>
                    </div>
                </div>
            </div>

            <div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
        </div>

        <script type="text/javascript" src="tab-view.js"></script>
        <script type="text/javascript">
            tabview_initialize('TabView');
            tabview_initialize('TabView1');
        </script>
    </body>
</html>

Я хочу получить многоуровневые вкладки с помощью этого кода. Он отображается правильно, но когда я нажимаю на одну из вложенных вкладок, выдает ошибку:

"Объект не найден"

Ответы [ 2 ]

1 голос
/ 12 июля 2011

В качестве простого примера вы можете использовать , где 1 - номер вкладки, для каждой вкладки.

Затем создайте специальные именованные теги для разделов: 

<div id="div1">section 1</div>
<div id="div2">section 2</div>
...

и скрипт для изменения видимости: 

function show(number) {
    document.getElementById("div2").style.display='none'
    document.getElementById("div2").style.display='none'
    ...
    document.getElementById("div"+number).style.display='block'
}

Вы должны быть в состоянии сделать то же самое для вкладок подраздела, так как вложенный элемент скрытого элемента скрыт.

0 голосов
/ 13 октября 2011

http://flowplayer.org/tools/tabs/index.html

Наконец, я использовал этот библиотечный файл, чтобы выполнить свою работу.

Спасибо всем за ваши мнения, ответы и предложения. :)

...