[bobster65]

THIS ENHANCEMENT IS FOR Version 1.50

Tabs for Specific User Groups Only (Ver 1.50)

You can wrap a specific TAB <li> tag with a template conditional where the numbers after userinfo are the User Group IDs that you want to display the Tab too.

So for example if you wanted to hide one for Staff Only it would look like this (See the code in RED)

<div id="ajaxTFH" class="TFHmenu2">
	<ul>
		<li class="selected"><a href="tabforumhome.php?tabcat[]=1" rel="ajaxTFHcontentarea">TAB 1 NAME</a></li>
		<li><a href="tabforumhome.php?tabcat[]=1&tabcat[]=2" rel="ajaxTFHcontentarea">TAB 2 NAME</a></li>
		
                <if condition="is_member_of($vbulletin->userinfo, 5,6)">
                     <li><a href="tabforumhome.php?tabcat[]=100" rel="ajaxTFHcontentarea">STAFF</a></li>
                </if>

	</ul>
</div>

THESE ENHANCEMENTS ARE FOR Version 1.01 ONLY

Tabs for Specific User Groups Only

Would you like a Tab to be visible only for a specific User Group(s)? simply wrap the specific tab with this... (use the ID's of the user groups you want to be able to view it)

<if condition="is_member_of($vbulletin->userinfo, 5,6)"> 

</if>

so it would look something like this.. (The code in RED is what you would need to add ...

<!-- Tabbed Forum Home Tabs Layout -->
	<ul id="forumtabs" class="shadetabs"> 
	<li><a href="#" rel="tcontent1" class="selected">Tab 1 Name</a></li> 
	<li><a href="#" rel="tcontent2">Tab 2 Name</a></li> 
	<if condition="is_member_of($vbulletin->userinfo, 5,6)">
           <li><a href="#" rel="tcontent3">BETA FORUM Tab/a></li>
        </if> 
	</ul> 
	<!-- /Tabbed Forum Home Tabs Layout -->

Then you will also want to wrap the tab display data as well ..

<!-- Tabbed Forum Home – START BETA FORUM TAB Content Layout -->

<if condition="is_member_of($vbulletin->userinfo, 5,6)">

<div id="tcontent3" class="tabcontent">

CONTENT REMOVED FOR EXAMPLE ONLY

</div>

</if>

<!-- /Tabbed Forum Home – END BETA FORUM TAB Content Layout-->

Custom Look and Feel

The Look and Feel is all driven by the tabcontent.css file. You can easily customize the look with a few simple edits to the base css. There are also plenty of different "tab" css scripts available at dynamic drive that will work with this.


Using images for the tabs

You can completely customize the look of the tabs, such as changing them to image links. The script treats every link ("A") within the specified tab container as a potential tab link, so as long as your tabs are some form of links, it will work. For example:

<div id="forumtabs">
<a href="#" rel="tcontent1" class="selected"><img src="tab1.gif" /></a>&nbsp;
<a href="#" rel="tcontent2"><img src="tab2.gif" /></a></li>&nbsp;
<a href="#" rel="tcontent3"><img src="tab3.gif" /></a>&nbsp;
<a href="#" rel="tcontent4"><img src="tab4.gif" /></a>
</div>

Changing the location the script looks for a class="selected" declaration

By default, if you wish a tab to be automatically selected when the page loads, you add a class="selected" attribute inside that tab link ("A"). However, sometimes your CSS for the tabs may be structured in a way that would make things a lot easier for you if you can add class="selected" to the parent of the tab link, and still have the "default selected" feature work. An example would be tab links that are each wrapped around a DIV, and styling to the selected tab in your CSS is on the DIV element, not the link:

<div id="forumtabs" class="someclass">
<div class="selected"><a href="#" rel="tcontent1">Tab 1</a></div>
<div><a href="#" rel="tcontent2">Tab 2</a></div>
<div><a href="#" rel="tcontent3">Tab 3</a></div>
<div><a href="#" rel="tcontent4">Tab 4</a></div>

To tell the script to look for class="selected" on each tab link's parent container, you would call setselectedClassTarget() with the string parameter in red:

<script type="text/javascript">

var newcontent=new ddtabcontent("forumtabs")
newcontent.setselectedClassTarget("linkparent") //"link" or "linkparent"
newcontent.init()

</script>

Dynamically selecting a tab anywhere on your page

After your Tab Content is initialized and displayed, you can dynamically select any of its tabs, by calling the method: instance.expandit(tabid_or_position)

The parameter entered should either be a string representing the tab link's ID attribute (you need to first assign one to that tab), or an integer corresponding to that tab's position relative to its peers, to select. For the later, the counting starts at 0 (ie: 0=1st tab). Building on the example above, here are two links that select two tabs within it:

<!--Selects 2nd tab within Tab instance "myflowers" -->
<a href="javascript:myflowers.expandit(1)">Select 2nd Tab</a>

<!--Selects tab with ID="roses" within Tab instance "myflowers" -->
<!--Be sure to first insert ID="roses" inside the target tab's link element.
<a href="javascript:myflowers.expandit('roses')">Select "Roses" tab</a>

Dynamically selecting a tab using a remote link (tabcontent.js v2.2 or above)

Starting in tabcontent.js v2.2, you can define a link on another page that selects a tab on the target page (one containing Tab Content script) when the page is loaded. In other words, depending on the referring page, a different tab can be selected by default. This is done by adding to the original link a URL parameter string specifying the Tab Content's main container ID, plus the index of the tab to select. The syntax is:

<a href="index.php?tabinterfaceid=index">Target Page</a>

where "tabinterfaceid" is the ID of the main tab container, and index is the tab to select based on its position relative to its peers (0=1st tab). For example, given the below initialization code:

<script type="text/javascript">

var myforumtabs=new ddtabcontent("forumtabs") //enter ID of Tab Container
myforumtabs.setpersist(true) //toogle persistence of the tabs' state
myforumtabs.setselectedClassTarget("link") //"link" or "linkparent"
myforumtabs.init()

</script>

The following link (presumably on another page) causes the 2nd tab within the above Tab content instance to be selected by default when "index.php" loads:

<a href="index.php?forumtabs=1">Target Page</a>

If your page contains multiple Tab content instances and you wish to select a tab explicity using the URL method for all of them, you can do that as well:

<a href="index.php?forumtabs=1&subforumtabs=2>Target Page</a>

The URL parameter method of tab selection overrides both the persisted tab states and default selected tab setting using class="selected' within the HTML.