Welcome Guest [Log In] [Register]
"She Loves Him", by Chance, Nick, and DaPizzaMan is our latest theme to be moved to the Recommended Gallery.

Click here to check it out!
Timbertina has been voted the favorite theme for May in the Member's Choice poll!

Click here to vote for your choice for June!
Check out our newly recommended themes!

Click here to check it out!
Check out our latest interview featuring .Chance in the latest installment of ZNR's Newsletter!

...Click here!
Time to open that graphic editor and try this "Icon Colouring Tutorial" by Vicks.Louise.

Check it out!
Our spotlight is on the new "Cheshire Emoticon System" by Helena

Check it out!
Welcome to Zathyus Networks Resources. We hope you enjoy your visit.


You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multi On Multi
Tabs BBCode; created tabbed content in posts
Topic Started: May 2 2011, 07:18 PM (1,744 Views)
Quozzo
Member Avatar
Only in death does duty end
Create tabbed content in posts using BBCode

Preview

Place this code Below the Board
Code:
 
<script type='text/javascript'>
//Tabs BBCode by Quozzo
$('.c_post:contains("[/tabs]")').each(function(){
$(this).html($(this).html().replace(/\[tabs(?:=([^'"]+?))?\](.+?)\[\/tabs\]/gi, function(tabs,g1,g2) {
tabrollheader=""
tabcount = 2
tabrollbody = ""
g2.replace(/\[tab=(.+?)\](.+?)\[\/tab\]/gi, function(tab,h1,h2) {
tabrollheader += "<td class='tabtab' name='"+tabcount+"' style='cursor:pointer;'>"+h1+"</td>"
tabrollbody += "<div class='tabdiv' style='display:none;'>"+h2+"</div>";
tabcount++
});
if(g1){tabwidth = " style='width:"+g1+"'";}else{tabwidth = "";};
tabrollhead = "<table"+tabwidth+" class='posttabs'><tr><td style='width:5px;border-top:0;border-left:0;background:none;'></td>"
tabroll = "</tr><tr><td colspan='"+tabcount+"'>"+tabrollbody+"</td></tr></table>"
tabrollheader += "<td style='width:5px;border-top:0;border-right:0;background:none;'></td></tr>"
return tabrollhead+tabrollheader+tabroll
}));
});

$('.posttabs').each(function(){
$(this).find('.tabtab:first').addClass("activetab");
$(this).find('.tabdiv:first').show();
});

$('.tabtab').live('click', function(){
$(this).parent().parent().find('.activetab').removeClass('activetab');
$(this).addClass('activetab');
tabnum = $(this).attr('name')
tabnum=tabnum-2
$(this).parent().parent().find('.tabdiv').hide();
$(this).parent().parent().find('.tabdiv:eq('+tabnum+')').show();
});

$('#c_bbcode button:last').after(" <button type='button' onClick='gettabs(1)'>Tabs</button>")

function gettabs(num){
switch(num){
case 1:
tabroll = "";
gettabs(2)
break;
case 2:
tabtitle = prompt("What is the title of the tab","");
if(tabtitle){gettabs(3)}else{gettabs(6)};
break;
case 3:
tabcontent = prompt("What are the contents of the tab","");
if(tabcontent){gettabs(4)}else{gettabs(5)};
break;
case 4:
tabroll += "[tab="+tabtitle+"]"+tabcontent+"[/tab]";
gettabs(2)
break;
case 5:
conf = confirm("Quit making tabs? You will lose what have done so far.");
if(!conf){gettabs(2)};
break;
case 6:
if(tabroll.length>0){
text = $('textarea[name=post]').val();
$('textarea[name=post]').val(text+"[tabs]"+tabroll+"[/tabs]");
};
};
};
</script>

<style type='text/css'>
.activetab{
font-weight: 900;
}
</style>


Using The BBCode

Use the [tabs] BBCode to start the tabs and end it with the [/tabs] ending tag.

In the [tabs] BBCode, use the [tab] BBCode to give the tabs some content and a header, like so:
[tab=tab1]This is some content for tab1[/tab]

So all together with two tabs it would look like this.

[tabs][tab=tab1]This is tab1 content[/tab][tab=tab2]this is tab2 content[/tab][/tabs]

Its also possible to determine the width of the tabs table by putting the width in the [tabs] BBCode like so:
[tabs=50%] or [tabs=750px]

To style what the active tab looks like you can change the class "activetab" style in the code above, or put it in each of your themes CSS to change the "activetab" style for each theme.
Edited by Quozzo, May 3 2011, 07:26 AM.
Each line in the list must have a comma at the end, except the last.

Your unique, just like everyone else
Offline Profile Quote Post Goto Top
 
TwistedMonkey
No Avatar
Theme attemptist!
GREAT code, I may well use it sometime!
Offline Profile Quote Post Goto Top
 
paradise.engineering
Member Avatar
Lowpoly Workshop Founder
cool idea! but there is no button for it?
Edited by paradise.engineering, May 2 2011, 07:53 PM.
Offline Profile Quote Post Goto Top
 
OraclePT
Member Avatar
Face in the Crowd
Works great Quozzo. However, this clashes with Xero's progress code. http://resources.zetaboards.com/single/?p=8272978&t=5115578 When I include [progress=xx%], it breaks the other tabs. Is there a way to work around this?
Posted Image
Posted Image

Offline Profile Quote Post Goto Top
 
Quozzo
Member Avatar
Only in death does duty end
Try it now in the OP.
Each line in the list must have a comma at the end, except the last.

Your unique, just like everyone else
Offline Profile Quote Post Goto Top
 
OraclePT
Member Avatar
Face in the Crowd
Works great now, thank you a lot Quozzo. :)
Posted Image
Posted Image

Offline Profile Quote Post Goto Top
 
Merus
No Avatar
First Steps
Really nice work, Quozzo!
Offline Profile Quote Post Goto Top
 
Makaze
Member Avatar
Discordian
I love the code, but could you tell me how to do this with HTML as well? I want it to function and look the same as the in post tabs. I don't see an obvious way to make use of this on a WebPage...
Edited by Makaze, May 22 2011, 12:23 PM.
Offline Profile Quote Post Goto Top
 
Quozzo
Member Avatar
Only in death does duty end
I made a small tut here on how to create clickable tabs.
Each line in the list must have a comma at the end, except the last.

Your unique, just like everyone else
Offline Profile Quote Post Goto Top
 
Bad Bieber
Member Avatar
Sir Epic
Great code! Works wonderfully! :)
Edited by Bad Bieber, Jul 19 2011, 09:13 AM.
Posted Image
Posted Image
Offline Profile Quote Post Goto Top
 
DissReq
Member Avatar
Gallery Gazer
I'm not sure if it's conflicting with other code I have, but it's just not showing up in previews! Anything that could fix that?

Board in question: http://s1.zetaboards.com/ShadowsideRPG/ Had to shave a line or two being so close to the character limit.
Offline Profile Quote Post Goto Top
 
Ithens
No Avatar
Community Activist
Handy...and neat :D great code....Exept for 1 thing....It won't work....Here, I'll post all codes in my "Below The Board " section so u can check it out....


Spoiler: click to toggle
Edited by Ithens, Jan 24 2012, 12:24 PM.
Offline Profile Quote Post Goto Top
 
Quozzo
Member Avatar
Only in death does duty end
@Ithens: Can i have the link to your board please?
Each line in the list must have a comma at the end, except the last.

Your unique, just like everyone else
Offline Profile Quote Post Goto Top
 
Ithens
No Avatar
Community Activist
Quozzo
Feb 6 2012, 12:59 PM
@Ithens: Can i have the link to your board please?
http://w11.zetaboards.com/Fire_of_Nildale/index/



Here ya go :)
Quozzo
Feb 6 2012, 12:59 PM
@Ithens: Can i have the link to your board please?
http://w11.zetaboards.com/Fire_of_Nildale/index/



Here ya go :)
Edited by Ithens, Feb 9 2012, 11:05 PM.
Offline Profile Quote Post Goto Top
 
Quozzo
Member Avatar
Only in death does duty end
It doesn't look like you have it on your board.
Each line in the list must have a comma at the end, except the last.

Your unique, just like everyone else
Offline Profile Quote Post Goto Top
 
Ithens
No Avatar
Community Activist
I deleted it cause it won't work... :P Check now ....


Sorry...
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Codes & Modifications · Next Topic »

Powered by ZetaBoards Premium
Find us on Facebook & follow us on Twitter