Диалоговое окно jQuery UI: как добавить вкладки в область содержимого? - PullRequest
Новая
       4

Диалоговое окно jQuery UI: как добавить вкладки в область содержимого?

3 голосов
/ 28 сентября 2010

Как добавить вкладку в область содержимого диалогового окна jQuery UI ?

1 Ответ

2 голосов
/ 28 сентября 2010

Узнайте код для создания вкладок в диалоговом окне jQuery UI. Загрузите файлы CSS и JavaScript, то есть пакет с веб-сайта jQuery и прикрепите его к своему проекту. 

        $(function() {
            $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
            $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');
        });

        $(document).ready(function () {
            $("#dialog").dialog({
                resizable:false,
                closeOnEscape: false,
                open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
                modal: true,
                width:800
            }).parent().find('div.ui-dialog-titlebar').addClass('titleClass');
        });

            .ui-tabs-vertical { width: 55em; }
            .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
            .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
            .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
            .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
            .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
        </style>

        <div id="dialog" style="background-color:Gray; text-align:center;">
            <div class="demo">
                <div id="tabs">
                    <ul>
                        <li><a href="#tabs-1">Nunc tincidunt</a></li>
                        <li><a href="#tabs-2">Proin dolor</a></li>
                        <li><a href="#tabs-3">Aenean lacinia</a></li>
                    </ul>
                    <div id="tabs-1">
                        <h2>Content heading 1</h2>
                    </div>
                    <div id="tabs-2">
                        <h2>Content heading 2</h2>
                    </div>
                    <div id="tabs-3">
                        <h2>Content heading 3</h2>
                    </div>
                </div>
            </div><!-- End demo -->

            <div class="demo-description">
            </div>
        </div>
    </body>
</html>

Alt text

...