JQuery UI диалоговый виджет с вкладками - PullRequest
Новая
       35

JQuery UI диалоговый виджет с вкладками

3 голосов
/ 11 февраля 2012

Я ищу диалоговое окно и вкладки для смешивания виджетов JQuery.Идея состоит в том, чтобы закрыть строку в той же строке, что и вкладки, и параметр для кнопок ОК / Отмена.В stackoverflow есть старая запись, но она не работает должным образом с последней версией пользовательского интерфейса Jquery - 1.8.

Случайно и до создания моей собственной версии кто-то хочет поделитьсясуществующее решение?

----- ОБНОВЛЕНИЕ -------------

Ответ от Дидье работает отлично, я изменил его ответ, добавив кнопки и изменивнажмите на иконку jquery и создайте виджет jquery-ui -> вот код / ​​пример .

Если кто-то найдет, как переместить жестко запрограммированный CSS к фактическому CSSбудет приветствоваться.

Ответы [ 2 ]

6 голосов
/ 12 февраля 2012

Я следовал примеру в приведенной вами ссылке, но реализовал по-другому:

Вы можете добавить <li> в разметку кнопок вкладок: 

<ul>
    <li><a href="#tab-info">Information</a></li>
    <li><a href="#tab-cast">Cast List</a></li>
    <li class="ui-tabs-close-button"><button id="closeBtn">X</button></li>
</ul>

Я использовал здесь <button>, но вы можете использовать другой тип элемента. Вы могли бы использовать тег привязки, но плагин Tabs рассматривает его как возможную кнопку вкладки, и если он не может ничего с ним сделать, он создает отключенную вкладку, что затрудняет отмену.

Затем привяжите событие щелчка к <button> в событии создания вкладок, чтобы закрыть диалоговое окно: 

$('#tabs-movie').tabs({
    create: function(e, ui) {
        $('#closeBtn').click(function() {
            $('#dialog-movie-info').dialog('close');
        });
    }
});

С этим фрагментом CSS вы можете поместить кнопку закрытия справа: 

.ui-tabs-nav li.ui-tabs-close-button {
    float: right;
    margin-top: 3px;
}

DEMO

Вот CSS, который нужно применить для удаления жестко закодированных стилей CSS: 

.ui-dialog .ui-dialog-buttonpane {
    border: 0;
    margin: 0;
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: 0.5em 0em 0.5em 0.4em;
}

DEMO

1 голос
/ 12 февраля 2012

Просто переместите кнопку в функции открытия dialog: 

open: function() {
    var li = $('<li />').append($(this).siblings().find('a.ui-dialog-titlebar-close').css('float', 'right').detach());
    $('#tabs-movie').tabs();
    $('#tabs-movie ul.ui-tabs-nav').append(li);
},
...