Postbit Tabs

[RateU]

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:

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

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

   {$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

[Imran]

Very nice

[ZiNgA BuRgA]

That's a pretty slick trick there.

[leefish]

That is very cool RateU - I spammed your test site a bit ....

[1master1]

What is the use of this? Who is gonna make tabbed posts as people feel sick of reading the front appearing post itself?

But good try and good tutorial

[ZiNgA BuRgA]

(10-16-2010 07:55 PM)1master1 Wrote:  as people of sick of reading the front appearing post itself?

If that's the case with your forum, I'm surprised anyone reads threads then >_>

[leefish]

(10-16-2010 07:55 PM)1master1 Wrote:  What is the use of this? Who is gonna make tabbed posts as people of sick of reading the front appearing post itself?

But good try and good tutorial

Well, say you had a site where you had post with tutorials - step1, step 2 etc. By using the tabs you could split up the post so each tab is a step

OR

You had a site offering downloads with pictures, installation instructions etc. Each tab could contain the appropriate info.

With Xthreads the limit is your imagination and creativity. The fact that you can't see what to do with this does not make it useless.

[x-Treme]

I'm thinking of using this as an "Introductory" thread.
Tab 1-> Basic info (age,home town,etc)
Tab 2->Short Bio
Tab 3-> Favorites (music, movie, etc)

Thanks again for another innovative use of the famous xthreads.

[1master1]

Sorry ZingaBurga, its a typo in my post. I usually dont check the post after typing it at 100km/s

Well, leefish, i got realized after reading your post. Thanks for it. RateU, please add the leefish tutorial for your first post, so that everyone will come to know the use of this tutorial. After seeing the attachment images i failed to understand the use. I'm suck a noob

[Jumper]

good work! i like it

question: what must i change to display the tabs correct in "classic postbit"-view?

normal postbit (horizontal) is working perfect,
but in classic-view it looks like chaos with the example code