WebDialog - how to make tabs?
-
Hy, I'm trying to add tabs in a webdialog and in each tab I want different content, but I'm not sure yet that different content will be a different file, or same file, but different div.
I managed to make some tabs in css, but I have no idea how to implement this in webdialog because wd are a little more trickier than ordinary html pages.
If JS is a better choice to make tabs, I'll stick on that, if you guys will teach me how to do it.I've attached here the files...
-
did you tried http://www.barelyfitz.com/projects/tabber/ ? from description looks easy to setup - didn't try it yet.
-
@dialog.set_file("D:/Tabs/tabs.html")
Most plugin people keep the supporting folder (Tabs in this case) as a ../Plugins subdirectory. This means the zip can be extracted in one go.
Also, as its best to keep the same file names, different versions or backups can be kept as uniquely named zip files and can be extracted to overwrite the current set (which of course should be zipped before being overwritten).
-
I'm not sure you can do it without using javascript. But, it's really not difficult to do.
For a single page design, you could have a div for each tab. Then use javascript to switch the css class of the divs on click. You might have a css "visible" class and a "hidden" class.
document.getElementById("divId").className = "hidden";
-
@jim said:
I'm not sure you can do it without using javascript. But, it's really not difficult to do.
For a single page design, you could have a div for each tab. Then use javascript to switch the css class of the divs on click. You might have a css "visible" class and a "hidden" class.
document.getElementById("divId").className = "hidden";
And for a multipage design, could this be implemented?
-
This example page shows everything on a single page, and is better written than I could do for a quick demo. View the source.
http://toshine.net/tabs/index.html
Save the source and try it - it is a drop-in replacement for your tabs.html file.
-
I found a page. That has some very interesting things in html.
http://www.dhtmlgoodies.com/index.html?page=dhtml-suite
greetings
Advertisement