Виджет диалогового окна JQuery с вкладками

Я ищу диалоговое окно смешения виджета JQuery и вкладки. Идея состоит в том, чтобы закрыть в той же строке, что и вкладки, и параметр для кнопок ok/cancel. Существует старая запись в stackoverflow, но она не работает должным образом с последней версией JQuery UI - 1,8.Виджет диалогового окна JQuery с вкладками

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

----- UPDATE -------------

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

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

источник

2012-02-11 ic3

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

Вы можете добавить <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 рассматривает его как возможную кнопку вкладок, и если он ничего не может с ней поделать, он создает вкладку disabled, что делает ее немного сложнее отменить.

Затем связать событие нажатия на <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

источник

2012-02-12 01:00:49

спасибо за ответ, вопрос, существует ли рациональное, почему вкладки создаются «на открытом», а не «на создании» диалога? – ic3

Я только что привел пример из вашей ссылки, но вы можете использовать «создать» событие диалога для правильной инициализации вкладок ([пример] (http://jsfiddle.net/didierg/Pn9HM/)). –

Спасибо за помощь. Я просто изменил ваш пример, чтобы добавить кнопки и изменить значок (я обновил вопрос), всего лишь небольшая проблема с css – ic3

Просто переместите кнопку в 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); 
},

источник

2012-02-12 01:55:12 pete

Виджет диалогового окна JQuery с вкладками

ответ

Смежные вопросы