Thread Rating:

***RateU*** · 10-16-2010 07:42 AM

Requirement: XThreads
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:
HTML Code
<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 :

HTML Code

<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 :
HTML Code
<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:

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

HTML Code

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

postbit_first or template_prefix_postbit_first template.
An example how to apply the tabs title and tabs contents in this template.

HTML Code

{$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...http://www.14.mynie.co.cc/forumdisplay.php?fid=33&filtertf_prefix=Post

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

Threaded Mode \| Linear Mode Standard Tools
Forum Jump: View a Printable Version Send this Thread to a Friend Subscribe to this thread