WELCOME TO
the documentation of CodeTabs

EFFECT OUT-IN

'Out-In' effect devided into 2 parts corresponding to the 2 slides(tabs) when switching. 'Out' effect applies for the current slide, and 'In' effect applies for the next slide.

List of 'Out-In' effects :

Attentions
wave, juggle, flatten, bounce, flash, pulse, rubberBand, swing, tada, wobble, flip, bobUp, bobDown, bobLeft, bobRight, ringLeft, ringRight, ringUp, ringDown, shake, shakeSlow, shakeLittle, shakeHard, shakeHor, shakeVer, shakeRotate, shakeOpacity, shakeCrazy

Basic - Specials
fadeOut, fadeIn, bounceOut, bounceIn, roSlit, newspaperOut, newspaperIn, holeOut, flipXOut, flipYOut, flipXIn, flipYIn, lightSpeedOut, lightSpeedIn, hinge, rollOut, rollIn, magic, swap, twistUpIn, twistDownIn, puffOut, pullIn, swashOut, swashIn, vanishOut, vanishIn, foolishOut, foolishIn, bombLeftOut, bombRightOut

Pull - Glue - Perspective
pullOut, pullIn, pushOut, pushIn, pullBounceOut, pullBounceIn, pushBounceOut, pushBounceIn, pullSoftOut, pullSoftIn, pushSoftOut, pushSoftIn, glueLeftOut, glueRightOut, glueUpOut, glueDownOut, glueLeftIn, glueRightIn, glueUpIn, glueDownIn, perspectiveLeftOut, perspectiveRightOut, perspectiveUpOut, perspectiveDownOut, perspectiveLeftIn, perspectiveRightIn, perspectiveUpIn, perspectiveDownIn

Move - Fan - Scale
moveLeftBehind, moveRightBehind, moveLeftFront, moveRightFront, moveShortLeftBehind, moveShortRightBehind, moveShortLeftFront, moveShortRightFront, fanBehindUp, fanBehindDown, fanFrontUp, fanFrontDown, soEdgeLeftOut, soEdgeRightOut, soEdgeUpOut, soEdgeDownOut, soEdgeLeftIn, soEdgeRightIn, soEdgeUpIn, soEdgeDownIn

Slide
slideLeftOut, slideRightOut, slideUpOut, slideDownOut, slideLeftIn, slideRightIn, slideUpIn, slideDownIn, slideOneLeftOut, slideOneRightOut, slideOneUpOut, slideOneDownOut, slideOneLeftIn, slideOneRightIn, slideOneUpIn, slideOneDownIn, slideShortLeftOut, slideShortRightOut, slideShortUpOut, slideShortDownOut, slideShortLeftIn, slideShortRightIn, slideShortUpIn, slideShortDownIn, slideFadeLeftOut, slideFadeRightOut, slideFadeUpOut, slideFadeDownOut, slideFadeLeftIn, slideFadeRightIn, slideFadeUpIn, slideFadeDownIn, slideBounceLeftOut, slideBounceRightOut, slideBounceUpOut, slideBounceDownOut, slideBounceLeftIn, slideBounceRightIn, slideBounceUpIn, slideBounceDownIn, slideTinLeftOut, slideTinRightOut, slideTinUpOut, slideTinDownOut, slideTinLeftIn, slideTinRightIn, slideTinUpIn, slideTinDownIn, slideShakeLeftOut, slideShakeRightOut, slideShakeUpOut, slideShakeDownOut, slideShakeLeftIn, slideShakeRightIn, slideShakeUpIn, slideShakeDownIn, slideScaleLeftOut, slideScaleRightOut, slideScaleUpOut, slideScaleDownOut, slideScaleLeftIn, slideScaleRightIn, slideScaleUpIn, slideScaleDownIn, slidePullLeftOut, slidePullRightOut, slidePullUpOut, slidePullDownOut, slidePullLeftIn, slidePullRightIn, slidePullUpIn, slidePullDownIn

Rotate
roLeftOut, roRightOut, roUpOut, roDownOut, roLeftIn, roRightIn, roUpIn, roDownIn, roDownLeftOut, roDownRightOut, roUpLeftOut, roUpRightOut, roDownLeftIn, roDownRightIn, roUpLeftIn, roUpRightIn, roSoftLeftOut, roSoftRightOut, roSoftLeftIn, roSoftRightIn, roTwistLeftOut, roTwistRightOut, roTwistUpOut, roTwistDownOut, roTwistLeftIn, roTwistRightIn, roTwistUpIn, roTwistDownIn, roWheelLeftOut, roWheelRightOut, roWheelUpOut, roWheelDownOut, roWheelLeftIn, roWheelRightIn, roWheelUpIn, roWheelDownIn, roFlitLeftOut, roFlitRightOut, roFlitUpOut, roFlitDownOut, roFlitLeftIn, roFlitRightIn, roFlitUpIn, roFlitDownIn, roFoldLeftOut, roFoldRightOut, roFoldUpOut, roFoldDownOut, roFoldLeftIn, roFoldRightIn, roFoldUpIn, roFoldDownIn, roRoomLeftOut, roRoomRightOut, roRoomUpOut, roRoomDownOut, roRoomLeftIn, roRoomRightIn, roRoomUpIn, roRoomDownIn, roEdgeLeftOut, roEdgeRightOut, roEdgeUpOut, roEdgeDownOut, roEdgeLeftIn, roEdgeRightIn, roEdgeUpIn, roEdgeDownIn, roEdgeSoftLeftOut, roEdgeSoftRightOut, roEdgeSoftUpOut, roEdgeSoftDownOut, roShortPushLeftOut, roShortPushRightOut, roShortPushLeftIn, roShortPushRightIn, roShortPullLeftOut, roShortPullRightOut, roShortPullLeftIn, roShortPullRightIn

<div class="ct" data-tabs="fxOut-roSoftRightOut fxIn-pullIn"> ... </div>

$('.ct').codetabs({
    fxOut : 'roSoftRightOut',
    fxIn  : 'pullIn'
    
});

EFFECT ONE

The easiest way to set effects compared to 'Out-In' effects.
'One' effects is combination 2 effects 'Out' and 'In' by css. 'One' effects also support 2 effects when moving next or prev slide.

List of 'One' effects :

glueHor, glueVer, foldHor, foldVer, foldFromHor, foldFromVer, roomHor, roomVer, flitHor, flitVer, hinge, roll, moveHor, moveVer, fade, fadeHor, fadeVer, scaleInHor, scaleInVer, scaleOutHor, scaleOutVer, scalePulse, scaleWave, roEdgeHor, roEdgeVer, newspaper, pushFromHor, pushFromVer, slide, fall, pulseShort, roSoft, roDeal, wheelHor, wheelVer, snakeHor, snakeVer, shuffle, browseLeft, browseRight, slideBehind, vacuumHor, vacuumVer, scaleSoft, snapHor, snapVer, letInHor, letInVer, stickHor, stickVer, growthHor, growthVer, soEdgeHor, soEdgeVer, shake, tinHor, tinVer

<div class="ct" data-tabs="fxOne-stickVer"> ... </div>

$('.ct').codetabs({ fxOne : 'stickVer' });

EFFECT POWERLINE

'Powerline' effect is classic effect, has its own way of operating than 'One' or 'Out-In' effects. It is effect of simple, fast and smooth.

<div class="ct" data-tabs="fx-line"> ... </div>

$('.ct').codetabs({ fx : 'line' });

EFFECT FADE

'fade' effect is classic and simplest effect in codetabs.
In old browser not support CSS3, if setup 'One' or 'Out-In' effect will fallback 'fade' effect.

<div class="ct" data-tabs="fx-fade"> ... </div>

$('.ct').codetabs({ fx : 'fade' });

CHANGE MAIN COLOR

Main default color of tabs is #0cf

Change main default color of tabs :

• Open codetabs.css file in ../code/codetabs.css
• Search and replace #0cf to #yourColor

SKINS

The current codetabs is provided with 5 skins.
Add 'class-name' to head markup to change the skins of tabs.

skin '.ct-flatbox'

<div class="ct ct-flatbox"> ... </div>

View example

skin '.ct-flat'

<div class="ct ct-flat"> ... </div>

View example

skin '.ct-classic'

<div class="ct ct-classic"> ... </div>

View example

skin '.ct-pill'

<div class="ct ct-pill"> ... </div>

View example

skin '.ct-underline'

<div class="ct ct-underline"> ... </div>

View example

SIZES

The current codetabs is provided 5 sizes of tablists.
Includes: mini - small - default - large -xlarge
Similar skins, add 'class-name' to head markup to change the sizes of tablists.

<!-- Size Mini -->
<div class="ct ct-flat ct-size-mini"> ... </div>

<!-- Size Small -->
<div class="ct ct-flat ct-size-small"> ... </div>

<!-- Size Default - no add class -->
<div class="ct ct-flat"> ... </div>

<!-- Size Large -->
<div class="ct ct-flat ct-size-large"> ... </div>

<!-- Size xLarge -->
<div class="ct ct-flat ct-size-xlarge"> ... </div>

DIRECTIONS

There are 2 directions in Codetabs: horizontal and vertical, corresponding 2 keywords 'hor' and 'ver'.

Horizontal is default direction, needless to setup.

<!-- Direction HORIZONTAL setup -->
<div class="ct" data-tabs="pag-{ dirs: hor }"> ... </div>

<!-- Direction VERTICAL setup -->
<div class="ct" data-tabs="pag-{ dirs: ver }"> ... </div>

// Direction HORIZONTAL setup
$('.ct').codeslider({ pag: { dirs: 'hor' } });

// Direction VERTICAL setup
$('.ct').codeslider({ pag: { dirs: 'ver' } });

POSITION

Each horizontal and vertical directions are included 2 position options: 'top' and 'bottom'.

<!-- Position TOP setup -->
<div class="ct" data-tabs="pag-{ pos: top }"> ... </div>

<!-- Position BOTTOM setup -->
<div class="ct" data-tabs="pag-{ pos: bottom }"> ... </div>

// Position TOP setup
$('.ct').codeslider({ pag: { pos: 'top' } });

// Position BOTTOM setup
$('.ct').codeslider({ pag: { pos: 'bottom' } });

ALIGN

In each position options, cluster tablists than codetabs have 4 align options: 'begin', 'center', 'end' and 'justified'.
Vertical directions options not supported 'justified' align options.
If the length clusters tablists larger body tabs, codetabs automatically switch on 'begin' align options.

<!-- Align BEGIN setup -->
<div class="ct" data-tabs="pag-{ align: begin }"> ... </div>

<!-- Align CENTER setup -->
<div class="ct" data-tabs="pag-{ align: center }"> ... </div>

<!-- Align END setup -->
<div class="ct" data-tabs="pag-{ align: end }"> ... </div>

<!-- Align JUSTIFIED setup -->
<div class="ct" data-tabs="pag-{ align: justified }"> ... </div>

// Align BEGIN setup
$('.ct').codeslider({ pag: { align: 'begin' } });

// Align CENTER setup
$('.ct').codeslider({ pag: { align: 'center' } });

// Align END setup
$('.ct').codeslider({ pag: { align: 'end' } });

// Align JUSTIFIED setup
$('.ct').codeslider({ pag: { align: 'justified' } });

IMAGE LAZYLOAD

Supported image-lazyload within the content of each slide.
+ Replace image tag by link tag & add .ct-img class.

<a class="ct-img" href="image/iamge1.jpg">image 1</a>

BASIC SETUP

• Turn on slideshow by setup options 'isSlideshow : true'. Default options is 'isSlideshow : false'.
• The time to switch between slides are setted with 'delay' options in 'slideshow' object options. Unit is milliseconds(ms).
• Add style for timer by 'class-name' to head markup codetabs → i.e. '.ct-arcline'

<!-- Combine add style for timer and turn on slideshow -->
<div class="ct ct-arcline" data-tabs="isSlideshow-true slideshow-{ delay: 5000 }"> ... </div>

<!-- Setup style for timer -->
<div class="ct ct-arcline"> ... </div>

// Setup option for slideshow
$('.ct').codetabs({
    isSlideshow : true,
    slideshow   : { delay : 5000 }
});

TIMER ARC

'arc' timer is defalut timer in codetabs, simple and flat design.

<!-- Setup style and type for timer -->
<div class="ct ct-arcline" data-tabs="slideshow-{ timer: arc }"> ... </div>

<!-- Setup style for timer -->
<div class="ct ct-arcline"> ... </div>

// Setup type for timer
$('.ct').codetabs({
    slideshow : { timer : 'arc' }
});

Note:

• Class '.ct-arcline' : customized size, position of timer and play/pause button.
• 'timer : arc' options in 'slideshow' object : type of timer.

Customization of the 'arc' object

The options in 'arc' object used to customize color, thickness, size of circle timer.
Arc timer included 'Inner' circle and 'Outer' circle. Each circle are 4 options in 'arc' object.
'Inner' circle used to display the time loop in slideshow.
'Outer' circle used to decorate or background.

Code sample cho customize timer arc

<div class="ct ct-arcline" data-tabs="
    arc-{ stroke: #0cf, radius: 14, oStroke: #e5e5e5, oRadius: 14, oWeight: 2 }
    "> ... </div>

$('.ct').codetabs({
    arc : { 
            stroke  : '#0cf',
            radius  : 14,
            oStroke : '#e5e5e5',
            oRadius : 14,
            oWeight : 2
          }
});

OTHER TIMERS

Including 'bar' timer and 'number' timer, fully customizable by CSS.

<!-- Setup style va options cho timer BAR -->
<div class="ct ct-barless" data-tabs="slideshow-{ timer: bar }"> ... </div>

<!-- Setup style va options cho timer NUMBER -->
<div class="ct ct-numless" data-tabs="slideshow-{ timer: number }"> ... </div>

<!-- Setup style for timer -->
<div class="ct ct-arcline"> ... </div>

// Setup optons cho timer BAR
$('.ct').codetabs({ slideshow : { timer: 'bar' } });

// Setup optons cho timer NUMBER
$('.ct').codetabs({ slideshow : { timer: 'number' } });

OTHER OPTIONS

List of other options in 'slideshow' object

Markup render

Structured markup after rendering in the page → support set css in codetabs.

Markup and class in codetabs before render

<div class="ct" data-tabs="isAutoRun-on fxOne-stickVer">
    
    <!-- Slide 1 of tabs -->
    <div>
        <div class="ct-pagitem"> Title slide 1 ... </div>
        <div> Content of slide 1 - any HTML ... </div>
    </div>

    <!-- Slide 2,3 same slide 1 -->
    ...
<div>

Markup and class in codetabs after render
Include pagination, navigation and caption elements

<div class="ct ct-ready ct-dot ct-height-auto ct-pag-hor ct-pag-top"> <!-- markup: codetabs -->

    <!-- MAIN SLIDES -->
    <div class="ct-viewport"> <!-- markup: viewport --> 
        <div class="ct-canvas"> <!-- markup: canvas -->
            
            <div class="ct-slide ct-ready"> ... </div> <!-- markup: slide -->
            <div class="ct-slide ct-ready ct-cur"> ... </div>
            <div class="ct-slide ct-ready"> ... </div>
            ...
        </div>
    </div>


    <!-- PAGINATION -->
    <div class="ct-pag ct-tab ct-pag-hor ct-pag-top"> <!-- markup: pag-head -->
        <div class="ct-paginner"> <!-- markup: pag-inner -->
            
            <div class="ct-pagitem"> ... </div> <!-- markup: pag-item -->
            <div class="ct-pagitem ct-cur"> ... </div>
            <div class="ct-pagitem"> ... </div>
            ...
        </div>
    </div>


    <!-- NAVIGATION -->
    <div class="ct-nav"> <!-- markup: nav-head -->
        <div class="ct-prev">prev</div>
        <div class="ct-next">next</div>
    </div>


    <!-- CAPTION -->
    <div class="ct-cap"> <!-- markup: cap-head -->
        <div class="ct-capinner"> <!-- markup: cap-inner -->
            <div class="ct-cap-cur"> ... </div>
            <div class="ct-cap-last"> ... </div>
        </div>
    </div>


    <!-- MEDIA -->
    <div class="ct-media"> <!-- markup: media -->
        <div class="ct-playpause ct-actived">play/pause</div> <!-- markup: playpause -->
        <div class="ct-timer ct-timer-bar"> <!-- markup: timer-head -->
            <div class="ct-timeritem"></div>
        </div>
    </div>

</div>

Detailed description of the class is added:

@ Markup codetabs

• class .ct-ready: will be added when first slide of codetabs complete loaded, and codetabs began to appear in browser.
• class .ct-dot : type effect of codetabs. Effect 'one', 'out-in' and 'fade' are 'dot' type, also 'powerline' effect is 'line' type.
• class .ct-height-auto : type height of codetabs, include 2 option - 'height-auto' and 'height-fixed'.
• class .ct-pag-hor : will be added when pagination turn on. Direction of pagination, include 2 options: 'pag-hor' for horizontal direction, 'pag-ver' for vertical direction.
• class .ct-pag-top : will be added when pagination turn on. Position of pagination, include 2 options: 'pag-top' and 'pag-bottom'

@ Markup viewport
Container all slide, often used to css of slide area

@ Markup canvas
This markup only used for codetabs system, don't css on this markup.

@ Markup slide

• class .ct-ready: will be added when all images on slide are complete loaded
• class .ct-cur: will be added when this markup is current slide to appear codetabs

@ Markup pag-head

• class .ct-tab: type of pagination, include 'tab' - 'bullet' - 'thumb'
• class .ct-pag-hor   .ct-pag-top: similar class on @ markup codetabs, direction and position of pagination. 2 classes are added to ensure css pagination outside the codetabs

@ Markup pag-inner
This markup only used for codetabs system, don't css on this markup.

@ Markup pag-item

• class .ct-cur: will be added when this markup is current pagination-item selected.

@ Markup cap-inner
This markup only used for codetabs system, don't css on this markup.

@ Markup playpause
Button play/pause in slideshow

• class .ct-actived: will be added when users switch to stop state

@ Markup timer-head

• class .ct-timer-bar: type of timer, include 'timer-arc' - 'timer-bar' - 'timer-number'

@ Markup timer-item
This markup described the current time taking place in the slideshow.
Depending on type of timer, tagName timer-item change as well:

• 'canvas' tagName for timer-arc
• 'div' tagname for timer-bar
• 'span' tagName for timer-number

Outside Markup

The components: navigation, title tabs(pagination), timer... can set up markup in any location on site.
Support freedom of layout, adding 'class-name' on the components.

Setup of outside markup:

• First, naming codetabs with any name(no space) via name option.
• Second, named similarly to components with markup outside.

<!-- Main markup of tabs1 - with name 'tabs1' -->
<div class="ct" data-tabs="name-tabs1"> ... </div>

...

<!-- Setup markup title of tabs1 -->
<div class="ct-pag" data-tabs="name-tabs1"> ... </div>

<!-- Setup markup navigation of tabs1 -->
<div class="ct-nav" data-tabs="name-tabs1"> ... </div>

<!-- Setup markup timer of tabs1 -->
<div class="ct-timer" data-tabs="name-tabs1"> ... </div>

Deep linking

Deep linking will append new hash #codeID_slideID on URL when switch slide. It easy linking or bookmark specific slide.
Deep linking also support multi-linking in the same page.

List options in 'deeplinking' object:

// prefix deep-linking only setup in JAVASCRIPT
<div class="ct" data-tabs="isDeeplinking-on">
    ...
</div>

$('.ct').codetabs({
    isDeeplinking : true,
    deeplinking   : { prefix: ['gallery', 'tab'] },
    ... 
});

Deep linking ID

Deeplinking auto convert ID of slide to #hash corresponds on URL

<div class="ct" data-tabs="isAutoRun-on isDeeplinking-on">
    
    <!-- Slides -->
    <div id="swipe-gestures">...</div>
    <div id="huge-effect">...</div>
    <div id="flat-design">...</div>
    <div id="true-tabs">...</div>
</div>

Cookie

Storage and recovery of the last slide in cookie.

• Cookie features don't work in file offline.
• Avoid conflict with other tabs on different pages, make a unique name for tabs via 'name' option.

List options in 'cookie' object:

<div class="ct" data-tabs="isCookie-on cookie-{ name: tabsCookie1 } ...">
    ...
</div>

$('.ct').codetabs({
    isCookie : true,
    cookie   : { name: 'tabsCookie1' },
    ... 
});

APIs

Public methods

/* All public medthods can be called
$('.ct').codetabs('next');
$('.ct').codetabs('goTo', 3);

/* You can be create instance codetabs data and many call quickly */
var code = $('.ct').data('codetabs');

code.next();                        // Next slide
code.prev();                        // Previous slide
code.first();                       // Goto first slide
code.last();                        // Goto last slide
code.goTo(id);                      // Goto slide id number, begin 0

code.prop(opts [, isNoRefresh]);    // Auto update options and refresh tabs
                                    // Example: code.prop({ speed: 1200, fx: 'fade' });
code.refresh();                     // Refresh tabs
code.destroy([isDelete]);           // Removes all events and clears all data on tabs

code.play();                        // Play slideshow
code.pause();                       // Pause slideshow
code.stop();                        // Stop slideshow

code.addSlide(obj [, index]);       // Add new slide. If 'index' is empty, the new slide will auto add at the end
code.removeSlide([index]);          // Remove the slide at 'index' position.

code.swipeEvent(objName);           // Register or remove swipe event on object
                                    // 'onBody'  : register swipe event on body tabs
                                    // 'offBody' : remove swipe event on body tabs
                                    // 'onPag'   : register swipe event on pagination
                                    // 'offPag'  : remove swipe event on pagination

Public properties

code.width();                       // Return width tabs
code.height();                      // Return height tabs
code.curId();                       // Return slide current id
code.slideLenght();                 // Return lenght of slides
code.slideCur();                    // Return object jQuery of slide current
code.opts();                        // Return object all options
code.varible();                     // Return object all varible in tabs
code.isMobile();                    // Return boolean value, the device is mobile?
code.browser();                     // Return name of browser used
code.ev;                            // Return object events in tabs

Callback events

code.ev.on('start', function() { ... });            // Trigger slide begin of tabs fire
code.ev.on('end', function() { ... });              // Trigger slide end of tabs fire
code.ev.on('before', function() { ... });           // Trigger before transition move to slide
code.ev.on('after', function() { ... });            // Trigger after transition move to slide
code.ev.on('loadBegin', function(e, $slide, ID) { ... });   // Trigger slide begin loadding, return current slide object and ID
code.ev.on('loadEnd', function(e, $slide, ID) { ... });     // Trigger slide loaded, return current slide object and ID
code.ev.on('loadSlide.id', function() { ... });     // Trigger if slide id loaded
code.ev.on('loadAll', function() { ... });          // Trigger if all image in tabs loaded
code.ev.on('resize', function() { ... });           // Trigger when window resize
code.ev.on('init', function() { ... });             // Trigger when codetabs initialized
code.ev.on('selectID', function(e, ID) { ... });    // Trigger when switch to new slide and return ID selected
code.ev.on('deselectID', function(e, ID) { ... });  // Trigger when switch to new slide and return ID deselected
code.ev.on('swipeBegin', function() { ... });       // Trigger when begin swipe gestures
code.ev.on('swipeEnd', function() { ... });         // Trigger when end swipe gestures
code.ev.on('fxBegin', function() { ... });          // Trigger fx switch slide begin running
code.ev.on('fxEnd', function() { ... });            // Trigger fx switch slide end running

Changelogs