Comment combiner Dialogue de l'INTERFACE utilisateur avec l'INTERFACE utilisateur Onglets jQuery?

Donc j'essaye de combiner le Dialogue avec les Onglets de l'INTERFACE utilisateur des composants de formulaire jQuery UI suis-j'y suis presque mais je n'arrive pas à déplacer la boîte de dialogue bouton fermer dans la boîte de Dialogue de l'INTERFACE utilisateur barre de titre dans les Onglets de l'INTERFACE utilisateur.

J'ai essayé de déplacer l'existant boîte de Dialogue de l'INTERFACE utilisateur barre de titre bouton fermer les Onglets de l'INTERFACE utilisateur barre, mais qui a présenté beaucoup de problèmes, et le bouton déplacé la souris passe dessus. J'ai essayé de créer des boutons avec l'icône de fermeture dans les Onglets de l'INTERFACE utilisateur barre, mais cela s'avère difficile à positionner le bouton à l'extrême droite, avec le regard et le toucher d'un bouton (avec l'icône de fermeture).

Le problème est que les Onglets de l'INTERFACE utilisateur barre accepte uniquement <li> parce que c'est un <ul>. Si je veux ajouter quelque chose d'autre là-bas, j'ai besoin de l'enfermer dans <li> et qui est la cause de beaucoup de problèmes, ou " je ne suis pas à voir la solution de facilité.

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>

OriginalL'auteur Ricardo Amaral | 2010-11-30

  1. 7

    J'ai trouver 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;
}

    OriginalL'auteur Ricardo Amaral