CODEWITHSUNDEEP
jqueryjquery-uijquery-tabsjquery-dialog
ic3
ic3

Reputation: 7680

Jquery ui dialog widget with tabs

I'm looking for a JQuery widget mixing dialog and tabs. The idea is to have the close in the same line as the tabs and an option for the ok/cancel buttons. There is an old entry in stackoverflow, but it's not working properly with the latest Jquery UI version - 1.8.

By any chance and before doing my own version, does somebody want to share an existing solution ?

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

The answer from Didier works fine, I modified his answer to add buttons and change the button to a jquery icon and create a jquery-ui widget -> here is the code/example.

If somebody finds how to move the hard-coded css to the actual css it would be welcomed.

Upvotes: 3

Views: 7751

Answers (2)

Didier Ghys
Didier Ghys

Reputation: 30666

I followed the example in the link you gave but implemented in another way:

You can add a <li> in the tabs buttons markup:

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

I have used here a <button> but you can have another type of element. You could use an anchor tag but the Tabs plugin considers it as a possible tab button and if it cannot do anything with it, it creates a disabled tab, which makes it a bit harder to undo.

Then, bind a click event on the <button> in the create event of the Tabs to close the dialog:

$('#tabs-movie').tabs({
    create: function(e, ui) {
        $('#closeBtn').click(function() {
            $('#dialog-movie-info').dialog('close');
        });
    }
});

With this piece of CSS you can put the close button right-side:

.ui-tabs-nav li.ui-tabs-close-button {
    float: right;
    margin-top: 3px;
}

DEMO

Here's the css to apply to remove the hard-coded css styles:

.ui-dialog .ui-dialog-buttonpane {
    border: 0;
    margin: 0;
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: 0.5em 0em 0.5em 0.4em;
}

DEMO

Upvotes: 6

pete
pete

Reputation: 25081

Just move the button in the dialog open function:

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

Upvotes: 1

Related Questions