Enej Bajgorić

ctlt-dev

oltdev

To add tabs to you post or pages just add this shortcode:
<pre><code>[tabs]
[tab title="title1"] tab content 
tab content 
[/tab]
[tab title="title2"] 
another content tab 
[/tab]
[/tabs]
</code></pre>
Here are the some attributes that the shortcode also excepts 
// default attributes 
 [tabs collapsible=true selected=’0′ event=’click’ position=’top’ ] 
 [tab title=”title1″] 
 tab content 
 [/tab] 
 [tab title=”title2″] 
 another content tab 
 [/tab] 
 [/tabs]
<ul>
<li>collapsible = true or false – weather the tabs should be allowed to be collapsed – this doesn’t work with twitter bootstrap </li>
<li>selected = integer for example – what tab should be selected. 0 means the first tab. 1 means the second tab etc. </li>
<li>event = ‘click’ or ‘mouseover’ – does do you user need to click on the tab or just mouse over to get to the content. Tip: Don’t use mouseover if you are concerned with mobile. </li>
<li>position = ‘top’ , ‘bottom’ , ‘left’, ‘right’ on what side do you want the tabs to appear. See screenshots for an example. </li>
<li>vertical_tabs = true or false – depreciated is the same as position = left</li>
</ul>
<h3>Sample CSS</h3>
Want to style the tabs a different way.
Here is some sample css to get you started. 
Another place to look for it would be the http://jqueryui.com/themeroller/, 
The shortcode used the jQuery UI to generate the tabs unless you are using the twitter bootstrap framework. 
See the FAQ on how to deal with that case.
<pre><code>/* =tabs
-------------------------------------------------------------- */
.tabs-shortcode.ui-tabs {
 padding:.2em;
 zoom:1;
 clear:both;
 background:#FFF;
 padding:0;
 margin:0;
}

.tabs-shortcode.ui-tabs-nav {
 list-style:none!important;
 padding:.2em 0 0!important;
 margin: 0!important;
}
.tabs-shortcode .ui-tabs-nav:after{
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}
* html .tabs-shortcode .ui-tabs-nav { zoom: 1; } /* IE6 */
*:first-child+html .tabs-shortcode .ui-tabs-nav { zoom: 1; } /* IE7 */

.tabs-shortcode .ui-tabs-nav li {
 position:relative;
 float:left;
 border:1px solid #CCC;
 background:#EEE;
 list-style:none!important;
 z-index: 100;
 padding:0;
}

.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
 background:#FFF;
 color:#111;
}

.tabs-shortcode .ui-tabs-nav li:before {
 content:"";
}

.tabs-shortcode .ui-tabs-nav li a {
 float:left;
 text-decoration:none;
 padding:2px 1em;
 color:#333;
 border:none!important;
}

.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-state-processing a {
 cursor: default;
}

.tabs-shortcode .ui-tabs-nav li a,
.tabs-shortcode.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a,
.tabs-shortcode.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
 cursor:pointer;
}

.tabs-shortcode .ui-tabs-panel {
 display:block;
 border-width:0;
 background:none;
}

.tabs-shortcode .ui-tabs-hide {
 display:none!important;
}

.tabs-shortcode.ui-tabs-panel {
 clear:both;
}
/* Position Top and Bottom */
.tabs-shortcode-top .ui-tabs-nav,
.tabs-shortcode-bottom .ui-tabs-nav{
 margin-left:0!important;
}
.tabs-shortcode-top .ui-tabs-nav li,
.tabs-shortcode-bottom .ui-tabs-nav li{
 position:relative;
 float:left;
 position:relative;
 float:left;
}

/* Position Top */
.tabs-shortcode-top .ui-tabs-nav{
 border-bottom: 1px solid #CCC;
}
.tabs-shortcode-top .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-top .ui-tabs-nav li.ui-tabs-selected {
 padding-bottom:1px!important;
 border-bottom:0;
 margin:1px .3em -1px 0!important;
}
.tabs-shortcode-top .ui-tabs-nav li {
 border-bottom-width:0!important;
 margin:1px .3em 0 0!important;
}

/* Position Bottom */
.tabs-shortcode-bottom .ui-tabs-nav{
 border-top: 1px solid #CCC;
}
.tabs-shortcode-bottom .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-bottom .ui-tabs-nav li.ui-tabs-selected {
 padding-top:1px!important;
 border-top:0;
 margin:-1px .3em 1px 0!important;
}

.tabs-shortcode-bottom .ui-tabs-nav li {
 border-top-width:0!important;
 margin:0 .3em 1px 0!important; 
}


/* Position Left and Right */
.tabs-shortcode-left .ui-tabs-nav,
.tabs-shortcode-right .ui-tabs-nav{
 width: 150px;
 margin: 0!important;
}

.tabs-shortcode-left .ui-tabs-nav li,
.tabs-shortcode-left,
.tabs-shortcode-right .ui-tabs-nav li,
.tabs-shortcode-right{
 position: relative;
 overflow: hidden;
}
.tabs-shortcode-left .ui-tabs-nav li,
.tabs-shortcode-right .ui-tabs-nav li{
 margin:0 0 0.3em 0;
 width: 100%;
}
.tabs-shortcode-left .ui-tabs-nav li a,
.tabs-shortcode-right .ui-tabs-nav li a{
 width: 100%;
}
.tabs-shortcode-left .ui-tabs-panel,
.tabs-shortcode-right .ui-tabs-panel{
 margin-left: 165px;
}

/* Position Left */
.tabs-shortcode-left .ui-tabs-nav{
 border-right: 1px solid #CCC;
 padding: 0 1px 10px 0!important;
}
.tabs-shortcode-left .ui-tabs-nav,
.tabs-shortcode-left .ui-tabs-nav li{
 float: left;
}
.tabs-shortcode-left .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-left .ui-tabs-nav li.ui-tabs-selected {
 padding-right:1px;
 border-right:0;
 margin:0 1px 0.3em 0;
}

/* Position Right */
.tabs-shortcode-right .ui-tabs-nav{
 border-left: 1px solid #CCC;
 padding: 0 0 10px 1px!important;
}
.tabs-shortcode-right .ui-tabs-nav,
.tabs-shortcode-right .ui-tabs-nav li{
 float: right;
}
.tabs-shortcode-right .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-right .ui-tabs-nav li.ui-tabs-selected {
 padding-left:1px;
 border-left:0;
 margin:0 0 0.3em 1px;
}
</code></pre>

Tabs Shortcode

Lets you add tabs to your post and pages using a shortcode.

Sabaoh

This plugin define two shortcodes to generate graphical tab panels in posts and pages. You don’t have to edit your theme’s style.css, and any templates.
To browse it’s tab panels, NOT IE browser (Chrome, FireFox, Opera, Safari were tested) or IE8 or above required. With IE7 or below, it will generate standard <ul> list and recommend to use other browser or update.
Please visit my sample at http://sabaoh.sakura.ne.jp/wordpress/?page_id=106
“right” attribute sample at http://sabaoh.sakura.ne.jp/wordpress/?page_id=116
“scroll” attribute sample at http://sabaoh.sakura.ne.jp/wordpress/?page_id=122
<h4>Usage:</h4>
<pre>
[rollover-tabs name="id" norollover="true" border="true" margin="-2px" height="1.5in" left="1px" right="1px" scroll="true" font="small"][rollover-tab name="tab1" label="sample1"]
content of tab1...
...
[/rollover-tab][rollover-tab name="tab2" label="sample2" font="large"]
content of tab2...
...
[/rollover-tab][/rollover-tabs]
</pre>
<h4>Attribute:</h4>
name: 
internal name (id). [rollover-tabs name=”id”] is optional (default value is “rollover”). [rollover-tab name=”tab1″] is required.
norollover: 
optional boolean. As default tab panels will switch when your mouse is on the tab (click is not necessary). If norollover is set “true”, panels will switch when you click the tab.
border: 
optional boolean. As default panel has no border. If border is set “true”, border will display.
margin: 
optional. As default margin-top was defined in css/rollover-tab.css (Now vlaue has changed to 0 for all themes). If your panels’ top border didn’t match the tab graphic, you could adjust the position of the top border by either edit css/rollover-tab.css or set margin attribute in each rollover-tabs tag.
height: 
optional. As default panels’ height will adjust automatic. You can assign fixed height to your panels.
left: 
optional. As default left defined in css/rollover-tab.css (Value is “1px”). If you wanted to make space in left of tabs, you could set greater value to this attribute. “0” or “0px” is NOT recommended due to avoid lack of border.
right: 
optional. Default value is false. If you wanted to make tabs align right, you could set “1px” or greater value to this attribute. If “left” attribute was setted, this attribute would be ignored. “0” or “0px” is NOT recommended due to avoid lack of border.
scroll: 
optional boolean. As default panel has no scroll bar. If scroll attribute was set “true”, panel will have scroll bar.
font: 
optional. You can assign font-size in tabs, for example “10pt” or “small”. If it was used with [rollover-tab …], size would be assigned for just ONE tab. With [rollover-tabs …], size would be applied all of tabs, except [rollover-tab …] with font attribute assigned.
label: 
caption of tabs, required.
NOTICE: Since 1.2.0, margin attribute’s default value changed from “-26px” to “0”. So if you’ve assigned margin value, You had to change your assignment in order to maintain good display.
NOTICE: with rich text editor, you must NOT insert any line breaks between [rollover-tabs] and next [rollover-tab], between [/rollover-tab] and next [rollover-tab], between [/rollover-tab] and [/rollover-tabs]. Due to wordpress automatic insertion.
<h4>Features:</h4>
<ul>
<li>You can create a panel which contain tabs, with [rollover-tabs] shortcode.</li>
<li>In between [rollover-tabs] and [/rollober-tabs], you can define panels with [rollover-tab name=”…” label=”…”]…[/rollover-tab] shortcode.</li>
<li>Tabs with label will display in rich graphical background.</li>
<li>As default, tabs will switch when your mouse is on the tab. Optional, you can choose click-needed-switching.</li>
<li>You can choose the border on or off.</li>
<li>You can adjust position of top border without editing stylesheet.</li>
<li>You can assign height of panels, without editing stylesheet of course.</li>
<li>Stylesheet was improved and top border will match with graphics, theme proof positioning was innovated since 1.2.0.</li>
<li>You can use some other shortcodes between [rollover-tab…] and [/rollover-tab], since 1.2.0.</li>
<li>You can assign position of tabs left or right, since 1.2.0.</li>
<li>You can choose the scroll bar on or off. Since 1.2.0.</li>
<li>You can assign font size for tabs. Since 1.2.1.</li>
</ul>
<h3>For more information</h3>
Please visit http://sabaoh.sakura.ne.jp/wordpress/ . In Japanese only. 
If you need information in English, please contact to age.yamada@kxa.biglobe.ne.jp .

Rollover Tab

This is shortcode plugin which make graphical tab panels available.

Tabs Shortcode vs Rollover Tab