EN Postbit Tabs

This is a simple example how to use tabs in our postbit.
Basically, we need Tabs Title and Tabs Contents.

Textbox for Tabs Title:

• Title: Tabs 2 Title
  
• Key: tc2
  
• Applicable Forums: select forum that we want to apply the tabs
  
• Input Field Type: Textbox
  
• Maximum Text Length: 20
  Modify it as our needs. Max chars for tabs title.
  
• Editable by / Required Field?: Everyone
  
• Blank Replacement Value:
  
  Kod:

  
<if $GLOBALS['threadfields']['tc2c'] then>
<td class="tcat tab" title="Second Contents" style="cursor: pointer; text-align: center;" abbr="tc2">
<strong>Second Contents</strong>
</td>
</if>

  Because this field isn't a required field, and the additional tabs contents isn't a required field as well, so we need to set the default tabs title. This is the default tabs title for contents 2. This default tabs title will be displayed if user didn't fill tabs 2 title, but they filled tabs 2 contents. Modify it as our needs.
  The reason why we put the conditional there is, this tabs shouldn't be displayed if there is no contents for this tabs.
  
• Display Format :
  
  Kod:

  
<if $GLOBALS['threadfields']['tc2c'] then>
<td class="tcat tab" title="{VALUE}" style="cursor: pointer; text-align: center;" abbr="tc2">
<strong>{VALUE}</strong>
</td>
</if>


Multiline Textbox for Tabs Contents:

• Title: Contents 2
  
• Key: tc2c
  
• Applicable Forums: select forum that we want to apply the tabs
  
• Input Field Type: Multiline Textbox
  
• Editable by / Required Field?: Everyone
  
• Display Parsing : Use MyBB Parser (MyCode)
  
• MyBB Parser Options : Check all except Allow HTML.
  
• Display Format :
  
  Kod:

  
<div id="tc2" class="content">{VALUE}</div>


Repeat the two steps above as our needs. Use different key.

In this example, we will use the jQuery tabs. If we have another tabs system, just use it.

There is at least two template we need to edit for this:

1. showthread template or template_prefix_showthread template.
   Add this in the header of the template:
   
   Kod:

   
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$.noConflict();
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.content').slideUp();
var catshow = $(this).attr('abbr');
$('#'+ catshow).slideDown();
});
});
</script>
<style type="text/css">
#tc2, #tc3 {
display: none;
}
.at {
background: #026CB1 url(images/thead_bg.gif) top left repeat-x;
color: #ffffff;
}
</style>

   If we already have jQuery attached to all pages, remove line #1. Or, edit it if we have a different location for our jQuery.
   In this example, we have the jQuery in our jscripts folder. Maybe we can use a newest jQuery version.
   For the ID in line #17, maybe we need to modify it, depends on what ID we use for our tabs contents.
   
2. postbit_first or template_prefix_postbit_first template.
   An example how to apply the tabs title and tabs contents in this template.
   
   Kod:

   
{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}">
<tbody>
<tr>
<td class="tcat" colspan="3">
<div class="float_left smalltext">
{$post['postdate']}, {$post['posttime']} <span id="edited_by_{$post['pid']}">{$post['editedmsg']}</span>
</div>
{$post['posturl']}
</td>
</tr>

<tr>
<td class="trow1 {$unapproved_shade}" colspan="3">
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td class="post_avatar" width="1" style="{$post['avatar_padding']}">
{$post['useravatar']}
</td>
<td class="post_author">
<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
<span class="smalltext">
{$post['usertitle']}<br />
{$post['userstars']}
{$post['groupimage']}
</span>
</td>
<td class="smalltext post_author_info" width="165">
{$post['user_details']}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="tcat at tab" title="Main" style="cursor: pointer; text-align: center; width: 33%;" abbr="tc1">
<strong>Main</strong>
</td>
{$GLOBALS['threadfields']['tc2']}
{$GLOBALS['threadfields']['tc3']}
</tr>
<tr>
<td class="trow2 post_content {$unapproved_shade}" colspan="3">
<span class="smalltext"><strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong></span>
<div id="tc1" class="content">
<div class="post_body" id="pid_{$post['pid']}">
{$post['message']}
</div>
</div>
{$GLOBALS['threadfields']['tc2c']}
{$GLOBALS['threadfields']['tc3c']}
{$post['attachments']}
{$post['signature']}

<div class="post_meta" id="post_meta_{$post['pid']}">
{$post['iplogged']}
</div>
</td>
</tr>

<tr>
<td class="trow1 post_buttons {$unapproved_shade}" colspan="3">
<div class="author_buttons float_left">
{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}
</div>
<div class="post_management_buttons float_right">{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
</div>
</td>
</tr>
</tbody>
</table>


In the example above, we add two tabs title and tabs contents.

Screenshots:
Tabs 1 (Main Tab) - Tabs 2 - Tabs 3


Live Demo:
http://www.14.mynie.co.cc/forumdisplay.p...bit%20Tabs

Try it yourself:
http://www.14.mynie.co.cc/newthread.php?fid=33

This is a simple example how to use tabs in our postbit.
Basically, we need Tabs Title and Tabs Contents.

Textbox for Tabs Title:

• Title: Tabs 2 Title
  
• Key: tc2
  
• Applicable Forums: select forum that we want to apply the tabs
  
• Input Field Type: Textbox
  
• Maximum Text Length: 20
  Modify it as our needs. Max chars for tabs title.
  
• Editable by / Required Field?: Everyone
  
• Blank Replacement Value:
  
  Kod:

  
<if $GLOBALS['threadfields']['tc2c'] then>
<td class="tcat tab" title="Second Contents" style="cursor: pointer; text-align: center;" abbr="tc2">
<strong>Second Contents</strong>
</td>
</if>

  Because this field isn't a required field, and the additional tabs contents isn't a required field as well, so we need to set the default tabs title. This is the default tabs title for contents 2. This default tabs title will be displayed if user didn't fill tabs 2 title, but they filled tabs 2 contents. Modify it as our needs.
  The reason why we put the conditional there is, this tabs shouldn't be displayed if there is no contents for this tabs.
  
• Display Format :
  
  Kod:

  
<if $GLOBALS['threadfields']['tc2c'] then>
<td class="tcat tab" title="{VALUE}" style="cursor: pointer; text-align: center;" abbr="tc2">
<strong>{VALUE}</strong>
</td>
</if>


Multiline Textbox for Tabs Contents:

• Title: Contents 2
  
• Key: tc2c
  
• Applicable Forums: select forum that we want to apply the tabs
  
• Input Field Type: Multiline Textbox
  
• Editable by / Required Field?: Everyone
  
• Display Parsing : Use MyBB Parser (MyCode)
  
• MyBB Parser Options : Check all except Allow HTML.
  
• Display Format :
  
  Kod:

  
<div id="tc2" class="content">{VALUE}</div>


Repeat the two steps above as our needs. Use different key.

In this example, we will use the jQuery tabs. If we have another tabs system, just use it.

There is at least two template we need to edit for this:

1. showthread template or template_prefix_showthread template.
   Add this in the header of the template:
   
   Kod:

   
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$.noConflict();
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.content').slideUp();
var catshow = $(this).attr('abbr');
$('#'+ catshow).slideDown();
});
});
</script>
<style type="text/css">
#tc2, #tc3 {
display: none;
}
.at {
background: #026CB1 url(images/thead_bg.gif) top left repeat-x;
color: #ffffff;
}
</style>

   If we already have jQuery attached to all pages, remove line #1. Or, edit it if we have a different location for our jQuery.
   In this example, we have the jQuery in our jscripts folder. Maybe we can use a newest jQuery version.
   For the ID in line #17, maybe we need to modify it, depends on what ID we use for our tabs contents.
   
2. postbit_first or template_prefix_postbit_first template.
   An example how to apply the tabs title and tabs contents in this template.
   
   Kod:

   
{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}">
<tbody>
<tr>
<td class="tcat" colspan="3">
<div class="float_left smalltext">
{$post['postdate']}, {$post['posttime']} <span id="edited_by_{$post['pid']}">{$post['editedmsg']}</span>
</div>
{$post['posturl']}
</td>
</tr>

<tr>
<td class="trow1 {$unapproved_shade}" colspan="3">
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td class="post_avatar" width="1" style="{$post['avatar_padding']}">
{$post['useravatar']}
</td>
<td class="post_author">
<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
<span class="smalltext">
{$post['usertitle']}<br />
{$post['userstars']}
{$post['groupimage']}
</span>
</td>
<td class="smalltext post_author_info" width="165">
{$post['user_details']}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="tcat at tab" title="Main" style="cursor: pointer; text-align: center; width: 33%;" abbr="tc1">
<strong>Main</strong>
</td>
{$GLOBALS['threadfields']['tc2']}
{$GLOBALS['threadfields']['tc3']}
</tr>
<tr>
<td class="trow2 post_content {$unapproved_shade}" colspan="3">
<span class="smalltext"><strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong></span>
<div id="tc1" class="content">
<div class="post_body" id="pid_{$post['pid']}">
{$post['message']}
</div>
</div>
{$GLOBALS['threadfields']['tc2c']}
{$GLOBALS['threadfields']['tc3c']}
{$post['attachments']}
{$post['signature']}

<div class="post_meta" id="post_meta_{$post['pid']}">
{$post['iplogged']}
</div>
</td>
</tr>

<tr>
<td class="trow1 post_buttons {$unapproved_shade}" colspan="3">
<div class="author_buttons float_left">
{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}
</div>
<div class="post_management_buttons float_right">{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
</div>
</td>
</tr>
</tbody>
</table>


In the example above, we add two tabs title and tabs contents.

Screenshots:
Tabs 1 (Main Tab) - Tabs 2 - Tabs 3


Live Demo:
http://www.14.mynie.co.cc/forumdisplay.p...bit%20Tabs

Try it yourself:
http://www.14.mynie.co.cc/newthread.php?fid=33