EASY SETUP CODETABS WITH 3 STEPS

VIDEO TUTORIAL

click here
[icon]
1

CODETABS FILES :

  • Upload 'code' folder to your host.
  • Add main script, css of codetabs into page :
<!-- Main style codetabs, included default skin -->
<link rel="stylesheet" href="code/codetabs.css">

<!-- Effect animation core in tabs -->
<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 js codetabs -->
<script src="code/codetabs.js"></script>
TABS
2

MARKUP HTML : add the HTML tabs into page

  • Class .ct → core css of codetabs.
  • Class .ct-flatbox → style flatbox for codetabs.
<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>
SLIDER
2

MARKUP HTML : add the HTML slider into page

  • Class .ct → core css of codetabs.
<div class="ct">

    <!-- Each image is a slide -->
    <img src="imgs/img1.jpg" alt="image1">
    <img src="imgs/img2.jpg" alt="image2">
    <img src="imgs/img3.jpg" alt="image3">
    ...
</div>
HTML5 DATA
3

SETTING OPTIONS :

  • Setting options directly on the markup by HTML5 data
  • isAutoRun-on option: codetabs automatic initialized after markup ready
<div class="ct ct-flatbox" data-codtabs="
    isAutoRun-on
    fxOne-stickVer speed-1200 pag-{ align: center } ">
    ...
</div>
JAVASCRIPT
3

SETTING OPTIONS :

  • Setting options by javascript like other jQuery plugins
  • isAutoRun-on option: codetabs automatic initialized after markup ready
<script>
    jQuery(document).ready(function($) {

        $('.ct').codetabs({
            fxOne : 'stickVer',
            speed : 1200,
            pag   : { align : 'center' }
        });
    });
</script>