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 • 3 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(11)

dbroox

Re: Combining ui Dialog and Tabs

3 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

3 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 : 10479
before.png
Size : 22.76 KB Download : 9845

dbroox

Re: Combining ui Dialog and Tabs

3 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

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

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

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

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

1 year 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.

dahousecat

Re: Combining ui Dialog and Tabs

3 months ago

And then this js will stop the actual tabs from being draggable:

$('.ui-tabs-nav li').mousedown(function(e){
e.stopPropagation();
});

cessquill

Re: Combining ui Dialog and Tabs

7 days ago

Sorry to raise this again, but I made a few changes too (in addition to the ones listed above).

In Chrome, the tabs are bordered when opening and selecting (this might also happen in the tabs widget). They therefore have an orange box around them (might depend on the ui theme). To get around this, I added the following to the CSS...

#tabdlg .ui-state-active a, #tabdlg .ui-state-active { outline: none; }

To see what I mean, the following link illustrates it. It also contains the solutions provided by other people - I used a combination of the ones that suited this particular issue. Stack Overflow Explanation

I also tidied the HTML for the button line to look more like the dialog's close button (the top margin may be different on your setup - I also have a version that vertically aligned it, but for the purposes of this demo, it was perhaps overkill)...

<span id="closer" class="ui-icon ui-icon-closethick" style="float: right; margin-right: .3em; margin-top: .35em;"></span>

In my version I put the styles for the close button into the css area, but hey.

Technically I guess you could rewrite the Jquery to implement the style changes itself, and perhaps put the close button in, negating the need for extra markup. Maybe wrap it all into a plugin. For now though, it all looks pretty neat.

To recap from visualwebeffects post to here...

The CSS...

#tabdlg.ui-tabs, #tabdlg.ui-dialog-content, #tabdlg.ui-dialog { padding: 0; }
#tabdlg .ui-state-active a, #tabdlg .ui-state-active { outline: none; }
#closer { float: right; margin-right: .3em; margin-top: .35em; }

The Javascript (also converting the dialog opener button to a jquery ui button - last part of script)...

$(document).ready(function(){
$("#closer").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: {
'OK': function() {
$(this).dialog('close');
},
'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({handle: ".ui-tabs-nav"}); // the ui-tabs element (#tabdlg) is the object parent, add these allows the tab to drag the dialog around with it
// stop the tabs being draggable (optional)
$('.ui-tabs-nav li').mousedown(function(e){
e.stopPropagation();
});
$("#tabopener").button().click(function(){
$("#tabdlg").tabs().dialog("open");
});
});

The HTML...

<p><button id="tabopener">Open Tabbed Dialog</button></p>
<div id="tabdlg">
<ul>
<li><a href="#ctabs-1">Tab One</a></li>
<li><a href="#ctabs-2">Tab Two</a></li>
<span id="closer" class="ui-icon ui-icon-closethick"></span>
</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>

Thanks for some great ideas guys - looks like it's solved this quite elegantly without too many hacks.

cessquill

Re: Combining ui Dialog and Tabs

6 days ago

Apologies for chipping in again, but I had a bit of time last night to pick apart this solution. I think I've rebuilt it in a more efficient and compatible way. I've tried it with other dialogs on the page, but I haven't tried it with other themes.

A few notes...

This does not require any additional CSS markup. JQuery injects it (might not be as efficient, but easier to use)
All additional JQuery resides within the tabbed dialog declaration
Where possible, I've tried to implement existing JQuery ui styles and replicate the same behaviour, rather than using CSS to mimic it - better compatibility across themes
My filtering and traversing in JQuery isn't the best in the world, so maybe some other people can improve on schoolboy errors
The div ID of the tabbed dialog is only referred to once, when the dialog is declared. Therrefore it's easy to reuse. Furthermore, the dialog only refers to itself - doesn't get involved with any other dialogs
As far as I can tell, this performs exactly as tabs and dialogs in JQuery UI

Right, code...

The HTML. This is the same as before, but without the close button. The JQuery clones the existing button when creating the dialog...

<p><button id="tabopener">Open Tabbed Dialog</button></p>
<div id="tabdlg" title="temp dialog">
<ul>
<li><a href="#ctabs-1">Tab One</a></li>
<li><a href="#ctabs-2">Tab Two</a></li>
</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">
<p><label for="tab_title">Title</label><br>
<input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" /></p>
<p><label for="tab_content">Content</label><br>
<textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea></p>
</fieldset>
</form>
</div>
</div>

The JQuery. I'll put some notes after it how it differs from the previous example...

$(document).ready(function(){
// tab dialog
$("#tabdlg").tabs().dialog({
autoOpen: false, modal: true,
width: 600, height: 400,
draggable: false, // disable the dialog's drag we're using the tabs titlebar instead
buttons: {
'OK': function() {
$(this).dialog('close');
},
'Close': function() {
$(this).dialog('close');
}
},
create: function() { // turn tabs into dialogs
// define the elements we're dealing with
$tabs = $(this).find('.ui-tabs-nav'); $dlg = $(this).parent();
// clone close button from dialog title and put it in the tabs area
$dlg.find('.ui-dialog-titlebar-close').appendTo($tabs);
// make the tabs draggable, give it a class that gracefully adds the move cursor and remove the dialog's original titlebar completely
$dlg.draggable({handle: ".ui-tabs-nav"})
.addClass('ui-draggable')
.find('.ui-dialog-titlebar').remove();
// give dialog styles to the tabs (would like to do this without adding CSS, but couldn't)
$dlg.find('.ui-tabs').css('padding', '0px');
// turn off the highlighting of tabs in chrome, add titlebar style to tabs to give close button correct styling
$tabs.addClass('ui-dialog-titlebar')
.find('li, a').css('outline', 'none').mousedown(function(e){ e.stopPropagation(); });
}
})
// quick button to open the dialog
$("#tabopener").button().click(function(){ $("#tabdlg").dialog("open"); });
});

A few notes on the changes from the previous example...

All scripts concerning the tabs are now run within the "create" event of the dialog. They only refer to that dialog, so you can have multiples on the same page
We don't need open and close functions any more as all scripting is self contained for each dialog
The close button is cloned from the original dialog's title bar and added to the tab bar. The tab bar then has extra styles added to ensure that the close button looks and behaves the same way as the dialog (hover color, etc.)
The title are has a draggable style added to give it the same behaviour of the dialog
Rather than hiding the dialog's title bar, it's removed completely (after the close button is cloned, and before the tab bar has the same style added). I'd personally like to see an upgrade to the JQuery UI dialog to have an optional titlebar, since there are lots on sites without them. You'd have to consider the close button though
The code might look a bit odd and jumpy, but that's because I've been playing around trying to get it down to as few lines as possible. I'm still playing around with it trying to chain as much together, but there's a limit before it just looks a mess

Hope this helps some people - and please feel free to rip apart, since I'm still learning. I appreciate that I'm delving into the HTML behind the UI, so it won't hold up if the structure changes in future.

Edit: Sorry this is getting a lot of updating - I'm having trouble getting the HTML editor to save what I'm typing.

Top Reply

Response title

Attachments

jQuery Forum

Combining ui Dialog and Tabs

Answered

Replies(11)

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

Re: Combining ui Dialog and Tabs

Re: Combining ui Dialog and Tabs

Re: Combining ui Dialog and Tabs

Statistics

Tags

Actions

Related Posts