Comment combiner la boîte de dialogue de l'interface utilisateur avec les onglets de l'interface utilisateur dans jQuery?

Question

J'essaie donc de combiner les composants UI Dialog avec les onglets de l'interface utilisateur jQuery. J'y suis presque mais je n'arrive pas à déplacer le bouton de fermeture de la boîte de dialogue Dialog UI dans l'interface utilisateur Tabs.

J'ai essayé de déplacer le bouton de fermeture de la barre de titre de l'interface de dialogue existante vers la barre d'onglets de l'interface utilisateur, mais cela posait beaucoup de problèmes et le bouton était déplacé lors du survol de la souris. J'ai essayé de créer des boutons avec l'icône de fermeture dans la barre d'onglets de l'interface utilisateur, mais il s'avère difficile de positionner le bouton à l'extrême droite, avec l'apparence d'un bouton (avec l'icône de fermeture).

Le problème est que la barre d'onglets de l'interface utilisateur n'accepte que <li> car il s'agit d'un <ul>. Si je veux ajouter quelque chose d'autre, je dois l'inclure dans <li> et cela cause beaucoup de problèmes ou je n'arrive pas à voir la solution facile.

Quelqu'un peut-il m'aider?

Voici mon code actuel:

<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

je trouve une solution qui fonctionne très bien pour moi:

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; 
}