wheelizate tabs
DOCUMENTATION
TOC

Package contains

1 Assets for Wheelizate Tabs and required libraries.

2 Themes with customizable less files.

3 Samples and documentation for easily getting started.


   assets/
    ├── dist/
    |   ├── css/
    |   │   └── wheelizate.tab.min.css
    |   └── js/
    |       └── wheelizate.tab.min.js
    └── required/
        └── js/
            ├── jquery-1.11.3.min.js
            ├── raphael.icons.min.js
            ├── raphael.min.js
            └── wheelnav.min.js
    themes/
    ├── themeBasic/
    ├── themeBorder/
    ├── themeColor/
    ├── themeInverse/
    ├── themeSelect/
    ├── themeSolid/
    samples
    ├── tabApart/
    ├── tabCenter/
    ├── tabClassic/
    ├── tabCorner/
    ├── tabSide/
    ├── sampleJavaScript.html
    ├── samplejQuery.html
    └── samplehtml5.html

Customization

You can customize the content (HTML), the behaviour (JavaScript) and the style (CSS) of your tab.

Installation

The Wheelizate Tabs works with JavaScript, jQuery, HTML5 data attributes or WordPress. SVG library is Raphaël.js, wheel navigation by wheelnav.js.

HTML5/JS/jQuery

Head

You should place the assets of above libraries into head section if your project doesn't contain them.

<script src="assets/required/js/raphael.min.js"></script>
<script src="assets/required/js/raphael.icons.min.js"></script>
<script src="assets/required/js/wheelnav.min.js"></script>

The sample files contain all necessary reference, so you can find them there. Here are the references of this plugin:

<!-- Base CSS -->
<link href="assets/dist/css/wheelizate.tab.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="themes/themeColor/Blue/theme.min.css" rel="stylesheet">
<!-- JavaScript -->
<script src="assets/dist/js/wheelizate.tab.min.js"></script>

Body

Put the code-snippets below into your HTML. The only requirement that you should set your own identifier. After that add your own content to tab panes (the four inner divs).

It is possible to add more tab-panes. There may be at least two, at most eight tabs.

<div id="tab">
    <div>
        <div>Tab pane 1</div>
        <div>Tab pane 2</div>
        <div>Tab pane 3</div>
        <div>Tab pane 4</div>
    </div>
</div>
Default sample

WordPress

Installation with zip

  1. Upload: In the admin panel, find Plugins->Add New, click it, click 'Upload Plugin' button.
  2. Install: Click Open File button, find wheelizatetabs-wp.zip in your hard drive, open it and press 'Install Now'.
  3. Activate: You will see: 'Plugin installed successfully.', press 'Activate Plugin'

Installation via FTP

  1. Upload: Unzip wheelizatetabs-wp.zip file, and upload all files to your WordPress folder: /wp-content/plugins/wheelizatetabs-wp
  2. Activate: In the admin panel, find Plugins->Installed Plugins, click it, activate Wheelizate Tabs.

Now you can see a new button in the TinyMCE Editor in post and pages, use this buttons to create Wheelizate Tabs in pages/posts content.

Features

Overview

You can customize the wheelizate tab's behavior with properties in JavaScript mode, an options parameter in jQuery mode, data attributes in HTML5 mode, and shortcodes in WordPress version. The data attributes names start with 'data-wtab-' and then the lowercase name of the property.

The available properties are below. These codes show the same behaviour with different methods.

<body>
    <div id="tab">
        <div>
            <div>Tab pane 1</div>
            <div>Tab pane 2</div>
            <div>Tab pane 3</div>
            <div>Tab pane 4</div>
        </div>
    </div>
    <script>
        window.onload = function () {
            var wheelTab = new wheelizateTab("tab");
            wheelTab.selectedTab = 3;
            wheelTab.tabType = wheelizateTabTypes.Corner;
            wheelTab.tabSubType = wheelizateTabSubTypes.TopLeft;
            wheelTab.tabThemeType= wheelizateTabThemeTypes.Color;
            wheelTab.tabWheelType = wheelizateTabWheelTypes.Pie;
            wheelTab.wheelRadius = 110;
            wheelTab.tabTitles = ["text", iconraphael.smile2, "imgsrc:../wheelizate-tabs-logo.png", "JavaScript"];
            wheelTab.tabTooltips = ["Tooltip 1", "Tooltip 2", "Tooltip 3", "Tooltip 4"];
            wheelTab.titleRotateAngle = -45;
            wheelTab.iconHeight = 40;
            wheelTab.iconWidth = 40;
            wheelTab.clockwise = true;
            wheelTab.marker = true;
            wheelTab.wheelAnimation = "bounce";
            wheelTab.paneAnimation = "bounce";
            wheelTab.tabRounded = true;
            wheelTab.tabShadowed = true;
            wheelTab.minHeight = 300;
            wheelTab.sliderSeconds = 0;
            wheelTab.keyEnabled = true;
            wheelTab.createTab();
        };
    </script>
</body>
JavaScript sample
<body>
    <div id="tab">
        <div>
            <div>Tab pane 1</div>
            <div>Tab pane 2</div>
            <div>Tab pane 3</div>
            <div>Tab pane 4</div>
        </div>
    </div>
    <script>
    jQuery(document).ready(function () {
        $('#tab').wheelizateTab({
            selectedTab: 3,
            tabType: wheelizateTabTypes.Corner,
            tabSubType: wheelizateTabSubTypes.TopLeft,
            tabThemeType: wheelizateTabThemeTypes.Color,
            tabWheelType: wheelizateTabWheelTypes.Pie,
            wheelRadius: 110,
            tabTitles: ["text", iconraphael.smile2, "imgsrc:../wheelizate-tabs-logo.png", "jQuery"],
            tabTooltips: ["Tooltip 1", "Tooltip 2", "Tooltip 3", "Tooltip 4"],
            titleRotateAngle: -45,
            iconHeight: 40,
            iconwidth: 40,
            clockwise: true,
            marker: true,
            wheelAnimation: "bounce",
            paneAnimation: "bounce",
            tabRounded: true,
            tabShadowed: true,
            minHeight: 300,
            sliderSeconds: 0,
            keyEnabled: true
        });
    });
    </script>
</body>
jQuery sample
<body>
    <div id="tab"
         data-wtab
         data-wtab-selectedtab="3"
         data-wtab-tabtype="Corner"
         data-wtab-tabsubtype="TopLeft"
         data-wtab-tabthemetype="Color"
         data-wtab-tabwheeltype="Pie"
         data-wtab-wheelradius="110"
         data-wtab-titlerotateangle="-45"
         data-wtab-iconheight="40"
         data-wtab-iconwidth="40"
         data-wtab-clockwise
         data-wtab-marker
         data-wtab-wheelanimation="bounce"
         data-wtab-paneanimation="bounce"
         data-wtab-tabrounded
         data-wtab-tabshadowed
         data-wtab-minheight="300"
         data-wtab-sliderseconds="0"
         data-wtab-keyenabled>
        <div>
            <div data-wtab-tabtitle-text="text" data-wtab-tabtitle-tooltip="Tooltip 1">Tab pane 1</div>
            <div data-wtab-tabtitle-icon="smile2" data-wtab-tabtitle-tooltip="Tooltip 2">Tab pane 2</div>
            <div data-wtab-tabtitle-img="../wheelizate-tabs-logo.png" data-wtab-tabtitle-tooltip="Tooltip 3">Tab pane 3</div>
            <div data-wtab-tabtitle-text="HTML5" data-wtab-tabtitle-tooltip="Tooltip 4">Tab pane 4</div>
        </div>
    </div>
    <script>
        window.onload = function () {
            $('#tab').wheelizateTabHtml();
            // - OR without jQuery- //
            // wheelizateTabHtml("tab");
        }
    </script>
</body>
HTML5 sample
[wtab 
selectedtab="3"
tabtype="Corner" 
tabsubtype="TopLeft" 
tabthemetype="Color" 
tabwheeltype="Pie" 
wheelradius="110" 
themefile="themeColor/Blue/theme.min.css" 
titlerotateangle="-45" 
iconheight="40"
iconwidth="40"
clockwise="true" 
marker="true" 
wheelanimation="bounce" 
paneanimation="bounce" 
tabrounded="true" 
tabshadowed="true" 
minheight="300" 
sliderseconds="0"
keyenabled="true"]
    [wtabtitle text="1" tooltip="Tooltip 1"]Tab pane 1[/wtabtitle]
    [wtabtitle icon="smile2" tooltip="Tooltip 2"]Tab pane 2[/wtabtitle]
    [wtabtitle img="wheelizate-tabs-logo.png" tooltip="Tooltip 3"]Tab pane 3[/wtabtitle]
    [wtabtitle text="WP" tooltip="Tooltip 4"]Tab pane 4[/wtabtitle]
[/wtab]
WordPress sample

Properties

Selected tab - [Number] - default: 0

Sets the default selected tab. The tab's index starts from 0.

Deep linking is available with following parameter in querystring: {id of tab div}Selected. Example: documentation.html?tabSampleSelected=1#tabSample

selectedTab: 1

Tab's type - [String] - default: 'Corner'

The type of the tab. wheelizateTabTypes helper class contains the possible values.

tabType: "Corner"|"Side"|"Classic"|"Center"|"Apart"

Tab's subtype - [String] - default: 'TopLeft'

The type of the tab position. wheelizateTabSubTypes helper class contains the possible values.

The valid combinations are below.

//Corner, Side, Classic
tabSubType: "TopLeft"|"TopRight"|"BottomRight"|"BottomLeft"
//Apart, Center
tabSubType: "Left"|"Top"|"Right"|"Bottom"

Theme's type - [String] - default: 'Color'

The type of the theme. wheelizateTabThemeTypes helper class contains the possible values.

You have to set this in case of the Border type because its treatment is different.

tabThemeType: "Basic"|"Solid"|"Select"|"Color"|"Inverse"|"Border"

Theme's file - only in WordPress version

When you want to use custom theme file with your WordPress plugin, you must upload it to /wp-content/plugins/wheelizatetabs-wp/assets/themes/themeCustom/ folder.

After that you can use themefile parameter to set your Wheelizate Tab to custom theme.

themefile="themeCustom/yourtheme.min.css"

Wheel's type - [String] - default: 'Pie'

The type of the wheel. wheelizateTabWheelTypes helper class contains the possible values.

tabWheelType: "Pie"|"Donut"|"Flower"|"Icon"|"Cog"|"Wheel"

The available types:

Pie
Donut
Flower
Icon
Cog
Wheel

Wheel's radius - [Number] - default: 100

Sets the radius of the wheel.

wheelRadius: 100
30
40

Wheel's title - [Array(String)] - default: The number of corresponding tab pane.

Defines the title by text, icon or image. The number of the elements has to be equal to the number of the tab-panes. The name of the data attribute is 'data-wtab-tabtitle' and must be placed on the div of a tab pane.

Text
tabTitles: ["0", "1", "2", "3"]
Icon

Title can be an icon, wich is a SVG path. The package comes with Raphael's icons, check available icons here.

tabTitles: [iconraphael.volume0, iconraphael.volume1, iconraphael.volume2, iconraphael.volume3]
Image

When a title starts with 'imgsrc:' it parsed as an image. Image can be an URL or a data URI scheme.

tabTitles: ["imgsrc:assets/demo/images/intro.gif", "imgsrc:wheelizate-tabs-logo.png", "imgsrc:wheelizate-tabs-logo.png", "imgsrc:wheelizate-tabs-logo.png"]

Wheel's tooltip - [Array(String)] - default: null

Sets a toolip on the wheel's slices. The number of the elements has to be equal to the number of the tab-panes. The name of the data attribute is 'data-wtab-tabtitle-tooltip' and must be placed on the div of a tab pane.

tabTooltips: ["Tooltip 1", "Tooltip 2", "Tooltip 3", "Tooltip 4"]
tooltips

Title rotation - [Number] - default: null

Sets the angle of titles.

titleRotateAngle: null
null
0
90
180
270

Title's size - [Number] default: null

Sets the size of the title. It is available via css for text and there are an iconHeight and iconWidth properties for SVG and image icons.

When iconHeight and iconWidth remains null then svg icons appear as its size and images appear in default size: 32*32.

iconHeight: 20
iconWidth: 20
null
20

Clockwise - [Boolean] - default: false

Sets the order of navItems.

clockwise: false
true
false

Marker - [Boolean] - default: false

When set to true, a marker is visible beside the selected item.

marker: false
rotated wheel
Corner and Apart
fixed wheel
Side, Classic and Center

Wheel's animation - [String] - default: 'linear'

Sets the easing of animation on wheel.

wheelAnimation: "linear"|"easeInOut"|"easeIn"|"easeOut"|"backIn"|"backOut"|"elastic"|"bounce"
linear
easeInOut
easeIn
easeOut
backIn
backOut
elastic
bounce

Tab pane's animation - [String] - default: 'fade'

Sets the easing of animation on tab pane. The direction of easing method is adaptive based on tab's type (except 'fade').

paneAnimation: "fade"|"slide"|"bounce"|"rotate"
fade
slide
bounce
rotate

Tab pane's rounded corner - [Boolean] - default: false

When set to true, the tab has rounded corner. The direction of non-rounded corner is adaptive based on wheel's position.

tabRounded: false
false
true

Tab pane's shadow - [Boolean] - default: false

When set to true, the tab has shadow. The direction of shadow is adaptive based on wheel's position.

tabShadowed: false
false
true

Tab pane's height - [Number] - default: null

Sets the minimum height of tab pane.

minHeight: 100
null
100

Slider's seconds - [Number] - default: 0

Sets the seconds of autoplay aka slider mode.

sliderSeconds: 3

Keyboard - [Boolean] - default: false

Enable keyboard to switch tab pane. You can customize keys via keyNext and keyPrev properties (or alternative keys via keyNext2 and keyPrev2 properties.) The default keys are the arrow keys.

The keypress event captured by window in default mode, you can override it with keyOnFocus property.

keyEnabled: true,
keyOnFocus: true,
keyPrev: 65, // A
keyPrev2: 83, // S
keyNext: 68, // D
keyNext2: 87, // W
keyEnabled
keyOnFocus
keyboard: W,A,S,D

CSS

The themes folder contains predefined styles with less files. You can customize it based on following rules.

Every item has its own ordered classname from 0 to N.

Tab's content

A content div contains all tab-pane.

#{id of tab div} > .wtab-content {
    padding: 25px;
}

Tab's pane

When a tab pane selected an unique class name applied on it.

#{id of tab div} > .wtab-selected-N {
    background-color: #5ba9fc;
    border-width: 0;
}

Wheel

Without css the pure wheel looks like this:

pure

Class names

The available class names consist of these parts:

wheelnav-{id of wheelnav div}-{name of navitem}-{state of navitem}-{order of navitem}

id of wheelnav div: {id of tab div}-wheel

name of navitem: available items: slice, title, line

state of navitem: available states: basic, hover, selected

order of navitem: from 0 to N

Simple way

[class|=wheelnav-tab-wheel] {
    fill: #5aa8fb;
    stroke: white;
}
simple

Navitems

[class|=wheelnav-tab-wheel-slice] {
    fill: #5aa8fb;
}
[class|=wheelnav-tab-wheel-line] {
    stroke-width: 6px;
}
[class|=wheelnav-tab-wheel-title] > tspan {
    font-family: 'Bookman Old Style', Bookman, 'URW Bookman L', 'Palatino Linotype', serif;
    font-size: 23px;
}
[class|=wheelnav-tab-wheel-title] {
    fill: white;
}
navitems

Use of states

[class|=wheelnav-tab-wheel-slice-basic] {
    fill: #5aa8fb;
}
[class|=wheelnav-tab-wheel-slice-hover] {
    fill: #5aa8fb;
    fill-opacity: 0.7;
    cursor: pointer;
}
[class|=wheelnav-tab-wheel-slice-selected] {
    fill: #2e66fb;
}
states

Individually styles

.wheelnav-tab-wheel-slice-basic-1 {
    fill: #5aa8fb;
}
.wheelnav-tab-wheel-slice-hover-1 {
    fill: #5aa8fb;
    fill-opacity: 0.7;
    cursor: pointer;
}
.wheelnav-tab-wheel-slice-selected-1 {
    fill: #2e66fb;
}
individually

Marker style

.wheelnav-tab-wheel-marker {
  stroke: #5aa8fb;
  stroke-width: 3px;
}
marker

Multiple tab

When you use more Wheelizate Tabs in same page, you must create a new theme for it. In new theme simple replace '-tab-wheel-' with '-{id of tab div}-wheel-' and '#tab' with '#{id of tab div}'. The WordPress version makes these changes automatically.






   v2.2 - © 2015-2021  softwaretailoring.net