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
Date created: 27.06.2014
Date last updated: 25.11.2014
Author: thystudio
follow me on: codecanyon
Quick guide to set up most basic for active codetabs. The other section will provide detailed options.
1. HOSTING : upload code folder to your hosting, this folder includes main script, css and other parts of codetabs.
Other folders include :
2. CODETABS FILES : insert main script, css of codetabs on site :
<!-- Main css cua codetabs, including styles, skins --> <link rel="stylesheet" href="code/codetabs.css"> <!-- Effects ONE and OUT-IN in codetabs --> <link rel="stylesheet" href="code/code.animate.css"> <!-- jQuery 1.7+ required - hosted from Google --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Main script of codetabs --> <script src="code/codetabs.js"></script>
3. MARKUP HTML : insert codetabs html on site :
<div class="ct ct-flatbox"> <!-- TAB 1 --> <div> <!-- Tab title --> <div class="ct-pagitem">Tabs title</div> <!-- Tab content --> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </div> <!-- TAB others same TAB 1 --> <div>...</div> </div>
4. SETTING OPTIONS : initialize the codetabs
<div class="ct ct-flatbox" data-codtabs=" isAutoRun-on fxOne-stickVer speed-1200 pag-{ align: center } "> ... </div>
Setting options by javascript like other jQuery plugins
<script> jQuery(document).ready(function($) { $('.ct').codetabs({ fxOne : 'stickVer', speed : 1200, pag : { align : 'center' } }); }); </script>
Variable | Default value | Description |
---|---|---|
fxOne | null | Set the name of effect 'One' |
fxOut | null | Set the name effects 'OUT' of effects 'Out/In' |
fxIn | null | Set the name effects 'IN' of effects 'Out/In' |
fx | null | Set other effects, including effect 'line' (powerline) and effect 'fade' classic. |
fxEasing | null | Easing of effects in effect 'One' and 'Out/In'. |
speed | begin400 | Duration of the effect. Unit millisecond. |
margin | 0 | Distance between slides. Unit is px and supports distances left and right. Example:
|
idBegin | begin | Set the slide will appear as codetabs initialization, ID of slides started with 0. List of value option:
|
preload | 1 | The number of slides(tabs) preloaded before the codetabs appears. |
loadAmount | 2 | The number next slides(tabs) will load after codetabs appears, the slides will load in parallel. |
show | all | Set codetabs initialized only on the specified device. Options include 'desktop', 'mobile' and 'all'. |
showFrom | 0 | Set codetabs will appear in range width of the site. Range-width have 2 values 'min-width' and 'max-width'(optional). |
isAutoRun | false | Option exclusively for HTML5 data. Codetabs is automatically initialized after markup have loaded. |
isSlideshow | false | Turn on/off slideshow. |
isNav | true | Turn on/off navigation tabs. |
isPag | false | Turn on/off pagination(tablist) tabs. |
isSwipe | true | Turn on/off features swipe on codetabs. |
isKeyboard | false | Turn on/off keyboard navigation, left/right arrow to go prev/next slide. |
isDeeplink | false | Turn on/off deeplink-linking features. |
isCookie | false | Turn on/off cookie features. |
name | null | The proper name for each codetabs in the site. Used to link components markup outside with main markup of codetabs. |
ns | ct- | Prefix string attached to the class element generated by the codetabs. |
canvasName | canvas | Set the name-class of the component 'canvas'. |
viewportName | viewport | Set the name-class of the component 'viewport'. |
slideName | slide | Set the name-class of the components 'slides'. |
lazyName | src | Name to be replaced in 'data-src' on <img> tag using image lazyload function. |
Variable | Default value | Description |
---|---|---|
type | tab | Type of pagination(tablist), options include 'tab' and 'bullet'. |
width | null | Set fixed width for pagItem. By default, the pagItem will get largest width in the pagItems. |
height | null | Set fixed height for pagItem. By default, the pagItem will get largest height in the pagItems. |
dirs | hor | Set the direction of pagination, options include 'hor'(horizontal) and 'ver'(vertical). |
pos | top | Set the position of pagination compared to the content tabs. Options include 'top' and 'bottom'. |
align | begin | Align of pagItems compared to pagination. Options include 'begin', 'center', 'end' and 'justified'. |
speed | 300 | Time to transition of pagItem current automatically move to the center position. |
ease | easeOutCubic | Easing transition of pagItem current automatically move to the center position. |
sizeAuto | null | Set width(direction hor) / height(direction ver) of pagination compared to width/height of codetabs.
By default 'null': size of pagination depends on css. Option 'self': size pagination is equal to size all pagItems combined. Option 'full': size pagination is equal to size content of codetabs. |
moreClass | null | Adding class in pagination markup. |
wMinToHor | 0 | Setting exclusive for vertical direction. Minimum width of codetabs to switch to horizontal direction. |
isActivedCenter | true | Turn on/off the current pagItem automatically moves into the center position of pagination. |
Variable | Default value | Description |
---|---|---|
delay | 8000 | Set wait time to move next slide of codetabs in slideshow. Unit is millisecond. |
timer | arc | Set timer of slideshow. Options include 'arc', 'bar' and 'number'. |
isAutoRun | true | Turn on/off auto-running slideshow after initialization codetabs. |
isPlayPause | true | Turn on/off 'playpause' component in slideshow. |
isTimer | true | Turn on/off 'timer' component in slideshow. |
isHoverPause | false | Turn on/off features mouse over on codetabs, slideshow automatically pause. |
isRunInto | true | Turn on/off features only slideshow when codetabs displayed on areas visible of browser. |
isRandom | false | Turn on/off auto switch to random slide in slideshow. |
Variable | Default value | Description |
---|---|---|
isMobile | true | Turn on/off swipe gestures on mobile devices. |
isBody | false | Turn on/off swipe gestures in body content of tabs. |
isBodyOnMobile | false | Turn on/off swipe gestures in body content of tabs but on mobile devices. |
Variable | Default value | Description |
---|---|---|
fxOne | null | Set the name of effect 'One' |
fxOut | null | Set the name effects 'OUT' of effects 'Out/In' |
fxIn | null | Set the name effects 'IN' of effects 'Out/In' |
fx | null | Set other effects, including effect 'line ' (powerline) and effect 'fade' classic. |
speed | 400 | Duration of the effect. Unit millisecond. |
delay | null | Set wait time to move next slide of codetabs in slideshow. Unit is millisecond. |
classAdd | "" | Append more classes to codetabs when switch slide |
Notes
'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' });
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' });
'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' });
'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' });
Main default color of tabs is #0cf
Change main default color of tabs :
The current codetabs is provided with 5 skins.
Add 'class-name' to head markup to change the skins of tabs.
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>View example
With a combination of 3 options: 'dirs', 'pos', 'align' → to create 14 different positions of tablists.
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' } });
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' } });
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' } });
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>View example
Download the slides content by ajax method (same domain).
+ Setup URL content to be loaded to 'ajax' property into 'media' object.
<div class="ct" data-tabs="isAutoRun-on"> <!-- Slide 1 --> <div data-slide="media-{ ajax: url-content }"> <!-- Pagination item of slide 1 --> <div class="ct-pagitem">Title slide 1 ...</div> </div> ... </div>View example
<!-- 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 } });
'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:
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.
Variable | Default value | Description |
---|---|---|
width | null | Width of timer |
height | null | Height of timer |
fps | 30 | The number of updates 'inner' circle in 1 second. |
rotate | 0 | Initial angle of rotation of 'inner' circle. |
radius | 14 | The radius of 'inner' circle. |
weight | 2 | Thickness border of 'inner' circle. |
stroke | #fff | Color border of 'inner' circle, format same css. |
fill | transparent | Color background of 'inner' circle, format same css. |
oRadius | 14 | The radius of 'outer' circle. |
oWeight | 2 | Thickness border of 'outer' circle. |
oStroke | hsla(0,0%,0%,0.2) | Color border of 'outer' circle, format same css. |
oFill | transparent | Color background of 'outer' circle, format same css. |
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 } });
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' } });
List of other options in 'slideshow' object
Variable | Default value | Description |
---|---|---|
isAutoRun | true | Automatically run slideshow when codetabs initialize. |
isPlayPause | true | Turn on/off button 'playpause' |
isTimer | true | Turn on/off timer |
isRandom | false | Features run random next slide in slideshow. |
isHoverPause | false | Features mouse-hover on tabs to automatically pause slideshow. |
isRunInto | true | Features only run slideshow when tabs display in view-screen, outside view-screen automatically pause slideshow. |
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
@ 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
@ Markup pag-head
@ Markup pag-inner
This markup only used for codetabs system, don't css on this markup.
@ Markup pag-item
@ Markup cap-inner
This markup only used for codetabs system, don't css on this markup.
@ Markup playpause
Button play/pause in slideshow
@ Markup timer-head
@ 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:
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:
<!-- 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 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:
Variable | Default value | Description |
---|---|---|
prefixDefault | ['code', 'slide'] | Only setup by JAVASCRIPT object.
Prefix 0 is name of codetabs, support multi-liking on the same page. Prefix 1 is name of slide on that codetabs. |
prefix | null | Prefix of #hash combine with order of slide, begin by 0. |
isIDConvert | true | Deeplinking auto convert ID of slide to #hash corresponds on URL |
// prefix deep-linking only setup in JAVASCRIPT <div class="ct" data-tabs="isDeeplinking-on"> ... </div>
$('.ct').codetabs({ isDeeplinking : true, deeplinking : { prefix: ['gallery', 'tab'] }, ... });
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>View example
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
+ Added: new 5 templates: tabs in fancybox, deeplinking ID, media load ajax, media image lazyload, api add ajax.
+ Added: api 'destroy'
+ Added: api 'swipeEvent'
+ Added: load ajax and image lazyload
+ Added: fx 'none'
+ Added: new 'begin', 'center', 'centerRight', end propteries into 'idBegin' option
+ Added: description of main color in documentation
+ Improved: deeplinking auto detect ID and convert to #hash on url
+ Improved: resize event
+ Added: new 6 templates: highlight, fullcolor, show by device, show from, deeplinking, cookie
+ Added: deeplinking, cookie, classAdd options
+ Added: animate effect on caption when switch slide
+ Added: detail description in 'markup > render' in documentation
+ Improved: fade effect fallback in old browser(<=IE9)
+ Improved: remove unnecessary effects on mobile
+ Changed: unlock codetabs when js no enable, more SEO friendly
+ Changed: name 'arc.update' 'acr.fps' options
+ Changed: prefixed in 'code.animate.css' file
+ Fixed: 'overflow: hidden' in Android browser
+ Fixed: auto run pagitem when codetabs only have 2 slide
+ Fixed: many slide at the same time 'selected'
+ Fixed: render font in safari 5.1 windows
+ Fixed: position swipe gestures in opera 12
+ Fixed: stop drag-text when swipe gestures in IE7-8
+ Improved: swipe gestures on mobile device
+ Changed: default options 'markup-{ timerInto: none}' to 'markup-{ timerInto: media }'
+ Changed: move timer into 'media' object
+ Added: new 'isMobile' option in 'swipe' ojbect
+ Updated + Added: APIs and callback events
+ Updated: documentation
+ Improved: auto-height of the tabs.
+ Improved: reduce size js file.
+ Changed: rename effects powerline 'fx-LINE' to 'fx-line'
+ Added: support bootstrap framework 3.x
Initial version