如何將UI對話框與jQuery中的UI選項卡結合起來？

Question

所以我試圖將對話框與Tabs UI組件形成jQuery UI我幾乎在那裏，但我似乎無法將對話框關閉按鈕從對話框UI標題欄移動到Tabs UI。

我試圖將前面的對話框用戶界面標題欄關閉按鈕移動到標籤用戶界面欄，但提出了很多問題和鼠標懸停時移動的按鈕。我嘗試使用Tabs UI欄中的關閉圖標創建按鈕，但這被證明很難將按鈕定位在最右側，具有按鈕的外觀和感覺（帶有關閉圖標）。

問題是標籤UI欄只接受<li>，因爲它是<ul>。如果我想在其中添加其他內容，則需要將它放在<li>中，這會導致很多問題，或者我無法看到簡單的解決方案。

任何人都可以幫我嗎？

這裏是我當前的代碼：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#dialog-movie-info').dialog({ 
      draggable: false, 
      resizable: false, 
      show: 'fade', 
      hide: 'fade', 
      modal: true, 
      height: 370, 
      width: 650, 
      position: ['center', 35], 
      open: function() { 
       //$('.ui-dialog-titlebar-close').appendTo('#ui-tab-dialog-close'); 
       $(this).parent().children('.ui-dialog-titlebar').remove(); 
       $('#tabs-movie').tabs(); 
      }, 
      close: function() { 
       $(this).find('#tab-info').children().remove(); 
       $(this).dialog('destroy'); 
      } 
     }); 
    } 
</script> 
<div id="dialog-movie-info" class="ui-helper-hidden"> 
    <div id="tabs-movie"> 
    <ul> 
     <li><a href="#tab-info"><img src="template/images/icon-block.png" alt="" />Information</a></li> 
     <li><a href="#tab-cast"><img src="template/images/icon-block.png" alt="" />Cast List</a></li> 
    </ul> 
    <div id="tab-info"> 
     <em>Info tab...</em> 
    </div> 
    <div id="tab-cast"> 
     <em>Cast tab...</em> 
    </div> 
    </div> 
</div> 

Answer 1

我發現我的偉大工程的解決方案：

的Javascript：

$(document).ready(function() { 
    $('#tabs-movie').tabs(); 

    $('#dialog-movie-info').dialog({ 
     closeOnEscape: false, 
     draggable: false, 
     resizable: false, 
     autoOpen: false, 
     open: function() { 
      $(this).find('.ui-dialog-titlebar-close').blur(); 
     } 
    }).parent().find('.ui-dialog-titlebar-close').prependTo('#tabs-movie').closest('.ui-dialog').children('.ui-dialog-titlebar').remove(); 
}); 

HTML：

<div id="dialog-movie-info"> 
    <div id="tabs-movie"> 
    <ul> 
     <li><a href="#tab-info"><img src="template/images/icon-block.png" alt="" />Information</a></li> 
     <li><a href="#tab-cast"><img src="template/images/icon-block.png" alt="" />Cast List</a></li> 
    </ul> 
    <div id="tab-info"></div> 
    <div id="tab-cast"> 
     <em>Cast Tab!</em> 
    </div> 
    </div> 
</div> 

CSS：

#tabs-movie { 
    border: none; 
    padding: 0; 
}