How to create a multitabbed options 'dialog box'

[Bit Byte]

I am trying to create a multi-tabbed 'dialog' box (similar to the one
displayed when Tools->Options is selected in most MS Office apps).
Ofcourse, this is for a website, so I'm not sure if i can call it a
'dialog box' (what is the correct name?). This 'dialog box' will be the
visual interface to an object.

Can anyone point me to an example (online or otherwise) that shows how I
may do this?

 

[Mark Rae]

I am trying to create a multi-tabbed 'dialog' box (similar to the one
displayed when Tools->Options is selected in most MS Office apps).
Ofcourse, this is for a website, so I'm not sure if i can call it a 'dialog
box' (what is the correct name?). This 'dialog box' will be the visual
interface to an object.

Do you mean something like this...?
http://www.barelyfitz.com/projects/tabber/

 

[Bit Byte]

Do you mean something like this...?
http://www.barelyfitz.com/projects/tabber/

Thats exactly what I mean - is this possible without using javascript
though? (incase client has turned off javascript on their machine)?

 

[Laurent Bugnion [MVP]]

Hi,

Thats exactly what I mean - is this possible without using javascript
though? (incase client has turned off javascript on their machine)?

Yes, but then you must postback to the server on every click on a tab.
The advantage of the client-side solution is that the whole page content
is loaded on the client already, so switching tabs is very dynamic. If
you have to post back every time, you get a slower, less responsive
application.

HTH,
Laurent

 

[Bit Byte]

Hi,




Yes, but then you must postback to the server on every click on a tab.
The advantage of the client-side solution is that the whole page content
is loaded on the client already, so switching tabs is very dynamic. If
you have to post back every time, you get a slower, less responsive
application.

HTH,
Laurent

Thanks for the clarification

 

[Thomas Hansen]

Thats exactly what I mean - is this possible without using javascript
though? (incase client has turned off javascript on their machine)?

No, but it's possible without YOU WRITING any JavaScript...

Check out:
http://ajaxwidgets.com/AllControlsSamples/TabControl.aspx

(Try to click the button on the SECOND tab...

Note that it's very easy to also embed this "tab control" within a
Gaia Window and thereby get the whole "tab control" inside a modal
window (or non-modal too if you wish)

The sample above contains NO CLIENT JavaScript whatsoever...!
And if you wanted the same design as the previous solution that would
easily be managed through manipulating the properties in design view
of your controls...!!
100% WYSIWYG off course...!!

..t

 

[Mark Rae]

Thanks for the clarification

As Laurent says, the above control is entirely client-side. This has two
main advantages:

1) switching between tabs doesn't cause a round-trip to the server and back,
thereby minimising network traffic and reducing the load on your webserver

2) the contents of *all* of the tabs are loaded all of the time, thereby
allowing client-side comparison validation between controls on different
tabs

The main disadvantage is that the control will not work if the user has
disabled JavaScript. Whether that is important or not is, of course, another
argument - and one which has been discussed several times in this
newsgroup...

If you're interested in using the above tab control, please contact me
privately - it is absolutely full of bugs, and doesn't work at all with
ASP.NET v2, especially MasterPages, so I have made a whole slew of
modifications and enhancements to it, including the ability to remember the
current tab without needing to use a cookie (I'm not kidding - that's how it
originally did it!!!), the ability to enable / disable tabs rather than just
hide them, full ASP.NET v2 support etc...

Alternatively, if you want a solution which will work without JavaScript,
there are several commercial products available or, if you're using ASP.NET
v2, you could roll your own with a combination of a couple of the new v2
webcontrols: http://www.codeproject.com/aspnet/TabControl.asp. This will, of
course, force a postback every time you switch tabs, and only the contents
of the *current* tab will be downloaded to the client at any given time, but
it *will* work with JavaScript disabled...

 

[Laurent Bugnion [MVP]]

Hi,

As Laurent says, the above control is entirely client-side. This has two
main advantages:

1) switching between tabs doesn't cause a round-trip to the server and back,
thereby minimising network traffic and reducing the load on your webserver

2) the contents of *all* of the tabs are loaded all of the time, thereby
allowing client-side comparison validation between controls on different
tabs

Note that depending on the scenarios, the fact that the whole content is
loaded on the page may also come as a disadvantage. Loading the page
will be slower, especially if a lot of tabs are added to the control.
And there is a risk that some loaded content will never be displayed, in
case the user doesn't click on the tab. So there is a risk of loading
unneeded code.

<snip>

Laurent

 

[Laurent Bugnion [MVP]]

Hi,

No, but it's possible without YOU WRITING any JavaScript...

Now, where's the fun in that? ;-)

Laurent

 

[Mark Rae]

Note that depending on the scenarios, the fact that the whole content is
loaded on the page may also come as a disadvantage. Loading the page will
be slower, especially if a lot of tabs are added to the control. And there
is a risk that some loaded content will never be displayed, in case the
user doesn't click on the tab. So there is a risk of loading unneeded
code.

I guess it depends on your perspective...

For a page with e.g. three tabs, would one slightly slower round-trip to the
server to grab all the controls when the page is first loaded be better than
any number of (slightly faster) round-trips to the server as the user
switches (any number of times) from tab to tab...?

 

[Laurent Bugnion [MVP]]

Hi,

I guess it depends on your perspective...

For a page with e.g. three tabs, would one slightly slower round-trip to the
server to grab all the controls when the page is first loaded be better than
any number of (slightly faster) round-trips to the server as the user
switches (any number of times) from tab to tab...?

No, it wouldn't. But with 10 tabs, most of them being infrequently used,
and containing big tables (for example), then maybe it would make a
difference. As I said, it depends on the scenarios.

Also, there are alternatives to postbacks when clicking on the tabs.
Loading the content using some kind of AJAX could be interesting.

Greetings,
Laurent

 

[Mark Rae]

No, it wouldn't. But with 10 tabs, most of them being infrequently used,
and containing big tables (for example), then maybe it would make a
difference. As I said, it depends on the scenarios.
Indeed.

Also, there are alternatives to postbacks when clicking on the tabs.
Loading the content using some kind of AJAX could be interesting.

Yes but, although a callback isn't a postback, it's *still* a round-trip to
the server and back...

For me, the ability to do client-side comparison validation of controls in
different tabs far outweighs the (very) slight performance hit of
downloading all the controls once-only...