Search jQuery

jQuery Forum

Using jQuery UI

prescottn

Combining ui Dialog and Tabs

Answered

Need more info
Answered
Working on it

in Using jQuery UI • 2 years ago

Hello, I'd like to combind the dialog and the tabs, such that the tabs act as the dialog-title, and the close button is added to the right side of the tabs.

Does anyone have any idea how to go about this. I tried to create both and then move elements round (replace the dialog-title with the tabs strip, etc) but I couldn't get anything working.

Any help would be greatly appreciated.

Replies(6)

dbroox

Re: Combining ui Dialog and Tabs

2 years ago

I just started digging for this exact same thing.

It'd definitely be nice to be able to add tabs to your dialog title or vice versa. I was hoping to be able to call a tabs() method on a dialog class or set dialog/modal options on the tabs class - all while using the same tab based html.

dbroox

Re: Combining ui Dialog and Tabs

2 years ago

actually... this is sort of cheating but you can easily do this with a little css/js hacking.

First, build out the jqueryUI tab html into a div which you will call dialog on. Then, add an extra li to your tabs for your close button. After that, just add a couple css rules to hide the existing title, remove padding, and remove the tab border. Finally, steal the close button from the dialog title and append it to the tab UL.

HTML

<div id="tenant" title="My Tenant">
<div id="tenant_info">
<ul id="tenant_tabs">
<li><a href="#tenant_details">My Tenant</a></li>
<li><a href="#tenant_events">Events</a></li>
<li><a href="#tenant_jobs">Jobs</a></li>
<li id="ui-tab-dialog-close"></li>
</ul>
<div id="tenant_content">
<div id="tenant_details">
some details
</div>
<div id="tenant_events">
some events
</div>
<div id="tenant_jobs">
some jobs
</div>
</div>
</div>
</div>

CSS...

.ui-dialog .ui-dialog-content, .ui-tabs { padding:0; }
.ui-dialog-titlebar { display:none; }
#tenant_info { border:0; }
#ui-tab-dialog-close { position:absolute; right:0; top:23px; }
#ui-tab-dialog-close a { float:none; padding:0; }

Javascript...

$j(function() {
$j('#tenant_info').tabs();
$j('#tenant').dialog({ 'modal':true, 'width':600, 'height':400 });
$j('#ui-tab-dialog-close').append($j('a.ui-dialog-titlebar-close'));
});

So that's pretty much it... the next step would be to implement draggable if you need it. Check out the attachments for screenshots of what this does...

Attachments

after.png
Size : 19.19 KB Download : 6060
before.png
Size : 22.76 KB Download : 5664

dbroox

Re: Combining ui Dialog and Tabs

2 years ago

so i decided that my tabbed header dialog needed to be draggable and its content needed to be scrollable (without scrolling the tabs out of view). just in case anyone else has this problem, here is my new css...

#tenant_info { border:0; }
#ui-tab-dialog-close { position:absolute; right:0; top:23px; }
#ui-tab-dialog-close a { float:none; padding:0; }

and my new js...

$j('#tenant_info').tabs();
$j('#tenant').dialog({ 'modal':true,
'width':600, 'height':400,
'minWidth':600, 'minHeight':300,
'draggable':true });
//steal the close button
$j('#ui-tab-dialog-close').append($j('a.ui-dialog-titlebar-close'));
//move the tabs out of the content and make them draggable
$j('.ui-dialog').addClass('ui-tabs')
.prepend($j('#tenant_tabs'))
.draggable('option','handle','#tenant_tabs');
//switch the titlebar class
$j('.ui-dialog-titlebar').remove();
$j('#tenant_tabs').addClass('ui-dialog-titlebar');

seishin4r..

Re: Combining ui Dialog and Tabs

1 year ago

I tried different approach.. In the dialog's open event I put:

var ul = $("<span class='ui-tabs'></span>").insertAfter(d.parent().find('.ui-dialog-title:first'));
d.find('.ui-tabs-nav').removeClass('ui-widget-header').removeClass('ui-corner-all').appendTo(ul);

where d is the div uppon which you call .dialog();
then in css adjust the position:
.ui-dialog-titlebar .ui-tabs {top: 4px; padding: 0px;}

to have all tabs in one line (in case you have many of them) add "white-space: nowrap" or modify dialog window

radbourn3

Re: Combining ui Dialog and Tabs

1 year ago

As a plugin:

$('#tenant').tabbedDialog();

Which looks like...

JavaScript:

$.fn.tabbedDialog = function () {
this.tabs();
this.dialog({'modal':true,'width':800, 'height':600,'minWidth':400, 'minHeight':300,'draggable':true});
this.find('.ui-tab-dialog-close').append($('a.ui-dialog-titlebar-close'));
this.find('.ui-tab-dialog-close').css({'position':'absolute','right':'0', 'top':'23px'});
this.find('.ui-tab-dialog-close > a').css({'float':'none','padding':'0'});
var tabul = this.find('ul:first');
this.parent().addClass('ui-tabs').prepend(tabul).draggable('option','handle',tabul);
this.siblings('.ui-dialog-titlebar').remove();
tabul.addClass('ui-dialog-titlebar');
}

HTML:

<div id="tenant">
<ul>
<li><a href="#tenant_details">My Tenant</a></li>
<li><a href="#tenant_events">Events</a></li>
<li><a href="#tenant_jobs">Jobs</a></li>
<li class="ui-tab-dialog-close"></li>
</ul>
<div>
<div id="tenant_details">
some details
</div>
<div id="tenant_events">
some events
</div>
<div id="tenant_jobs">
some jobs
</div>
</div>
</div>

Any good?

Kevin B

Re: Combining ui Dialog and Tabs

1 year ago

the only complaint i have about that plugin is it is a plugin and not a jquery ui widget which means it would have to be destroyed manually and also to modify either the dialog or the tabs you would have to use their own methods instead of modifying them through the plugin, such as adding or removing tabs, moving the dialog, opening and closing the dialog, destroying the tabs or the dialog, etc.

However, for a quick fix, it will work.

Also, you forgot to return this at the end to preserve chaining.

-- Kevin
(aka tentonaxe)

visualweb..

Re: Combining ui Dialog and Tabs

3 months ago

i know this is considered grave robbing a old thread but thought i would share this here as it is relevant.

this uses the latest development branch of jquery for version 1.9 have not tested this on the current stable release.

Tabbed Dialog without any heavy lifting, or creating any new widgets, ui plugins, or the like.

for the sake of this sample the element id is set to: tabdlg

CSS:

#tabdlg.ui-tabs, #tabdlg.ui-dialog-content, #tabdlg.ui-dialog { padding: 0; }

javascript:

$("#closer").button().click(function(){
            $("#tabdlg").tabs().dialog("close");
        });

        $("#tabdlg").tabs().dialog({
            autoOpen: false,
            width: 600,
            height: 400,
            draggable: false, // disable the dialogs default drag we will be using the tabs titlebar instead
            modal: true,
            buttons: {
                'Close': function() {
                    $(this).dialog('close');
                }
            },
            open: function() {
                $('.ui-dialog-titlebar').hide(); // hide the default dialog titlebar
            },
            close: function() {
                $('.ui-dialog-titlebar').show(); // in case you have other ui-dialogs on the page, show the titlebar
            }
        }).parent().draggable(); // the ui-tabs element (#tabdlg) is the object parent, add these allows the tab to drag the dialog around with it

        $("#tabopener").click(function(){
            $("#tabdlg").tabs().dialog("open");
        });

html:

<button id="tabopener">Open Tabbed Dialog</button>
    <div id="tabdlg">
            <ul>
                <li><a href="#ctabs-1">Tab One</a></li>
                <li><a href="#ctabs-2">Tab Two</a></li>
                <button id="closer" style="float: right;"><span class="ui-icon ui-icon-closethick" style="margin-right: .3em;"></span></button>
            </ul>
            <div id="ctabs-1">
                <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
            </div>
            <div id="ctabs-2">
                <form>
                    <fieldset class="ui-helper-reset">
                        <label for="tab_title">Title</label>
                        <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />
                        <label for="tab_content">Content</label>
                        <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea>
                    </fieldset>
                </form>
            </div>
    </div>

quirks:

1) clicking to drag is done from everywhere in the tabbeddialog. so selecting text will not happen except for form elements and the close button, oh and ofc the dialog resizer works as expected.

otherwise it works great. would be nice to have a proper tabbedDialog ui widget though but this is clean, simple and uses standard jquery calls without modifying the core widgets or having to extend either the tabs or dialog ui's

hubseven

Re: Combining ui Dialog and Tabs

12 days ago

@visualwebeffects

I thought I would post this as I found this on a Google search, used this code and managed to find a workaround for your whole panel draggable quirk...

Change:

.parent().draggable();

To:

.parent().draggable({handle: ".ui-tabs-nav"});

And it works as expected.

For extra usability you could also change the cursor on 'mouseenter' event

Hope this helps somebody.

Top Reply

Response title

Attachments

jQuery Forum

Combining ui Dialog and Tabs

Answered

Replies(6)

Re: Combining ui Dialog and Tabs

Re: Combining ui Dialog and Tabs

Attachments

Re: Combining ui Dialog and Tabs

Re: Combining ui Dialog and Tabs

Re: Combining ui Dialog and Tabs

Re: Combining ui Dialog and Tabs

Re: Combining ui Dialog and Tabs

Re: Combining ui Dialog and Tabs

Statistics

Tags

Actions

Related Posts