タブ付きのJquery UIダイアログウィジェット

Question

私は、JQueryウィジェットの混合ダイアログとタブを探しています。考え方は、タブと同じ行に閉じることと、ok/cancelボタンのオプションを持つことです。 stackoverflowに古いエントリがありますが、最新のJquery UIバージョン1.8では正しく動作していません。

自分のバージョンを行う前に、誰かが既存のソリューションを共有したいのですか？

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

ディディエからの答えは正常に動作し、私はjqueryのアイコンにボタンをボタンを追加し、変更することが彼の答えを修正し、 jquery-uiウィジェットを作成する - >こちらはcode/exampleです。

誰かがハードコードされたCSSを実際のCSSに移動する方法を見つけたら、歓迎されます。

Answer 1

私はあなたが与えたリンクの例を踏襲したが、別の方法で実装：

あなたは、タブボタンのマークアップで<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>を使用しているが、あなたができます別のタイプの要素を持っている。アンカータグを使用することはできますが、タブプラグインはそれを可能なタブボタンとみなし、何もできない場合は無効なタブを作成します。これにより、取り消すのが少し難しくなります。その後

、ダイアログを閉じたタブの作成イベントに<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

Answer 2

だけ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); 
},