How to create a multitabbed options 'dialog box'

  • Thread starter Thread starter Bit Byte
  • Start date Start date
B

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?
 
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.
Click to expand...

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

Bit said:
Thats exactly what I mean - is this possible without using javascript
though? (incase client has turned off javascript on their machine)?
Click to expand...

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
 
Laurent said:
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
Click to expand...

Thanks for the clarification
 
On Feb 4 said:
Thats exactly what I mean - is this possible without using javascript
though? (incase client has turned off javascript on their machine)?
Click to expand...

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
 
Thanks for the clarification
Click to expand...

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...
 
Hi,

Mark said:
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
Click to expand...

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
 
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.
Click to expand...

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...?
 
Hi,

Mark said:
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...?
Click to expand...

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
 
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.
Click to expand...

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...
 
Back
Top