wheelizate tabs
DOCUMENTATION FOR WORDPRESS
TOC

Table of contents

Installation

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 shortcodes in WordPress.

The available shortcodes are below.

[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 image="wheelizate-tabs-logo.png" tooltip="Tooltip 3"]Tab pane 3[/wtabtitle]
    [wtabtitle text="WP" tooltip="Tooltip 4"]Tab pane 4[/wtabtitle]
[/wtab]
Show this sample

Properties

Selected tab - [Number] - default: 0

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

selectedtab = "1"

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

The type of the tab.

tabtype = "Corner"|"Side"|"Classic"|"Center"|"Apart"
Sample

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

The type of the tab position.

The valid combinations are below.

//Corner, Side, Classic
tabsubtype = "TopLeft"|"TopRight"|"BottomRight"|"BottomLeft"
//Apart, Center
tabsubtype = "Left"|"Top"|"Right"|"Bottom"
Sample

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

The type of the theme.

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

tabthemetype = "Basic"|"Solid"|"Select"|"Color"|"Inverse"|"Border"
Sample

Theme's file

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.

tabwheeltype = "Pie"|"Donut"|"Flower"|"Icon"|"Cog"|"Wheel"

The available types:

Pie
Donut
Flower
Icon
Cog
Wheel
Sample

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

Sets the radius of the wheel.

wheelradius = "100"
30
40
Sample

Wheel's title

Defines the title by text, icon or image.

Sample
Text
[wtabtitle text="0"]Tab pane content[/wtabtitle]
Icon

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

[wtabtitle icon="volume0"]Tab pane content[/wtabtitle]
Image

Image can be an URL of a png, jpg, gif, svg file or a data URI scheme.

[wtabtitle image="wheelizate-tabs-logo.png"]Tab pane content[/wtabtitle]

Wheel's tooltip

Sets a toolip on the wheel's slices. The name of attribute is 'tooltip' and must be placed on the wtabtitle shortcode.

[wtabtitle text="1" tooltip="Tooltip 1"]Tab pane content[/wtabtitle]
tooltips
Sample

Title rotation - [Number] - default: null

Sets the angle of titles.

titlerotateangle = "0"
null
0
90
180
270
Sample

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
Sample

Clockwise - [Boolean] - default: false

Sets the order of navItems.

clockwise = "true"
true
false
Sample

Marker - [Boolean] - default: false

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

marker = "true"
rotated wheel
Corner and Apart
fixed wheel
Side, Classic and Center
Sample

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
Sample

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
Sample

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 = "true"
false
true
Sample

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 = "true"
false
true
Sample

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

Sets the minimum height of tab pane.

minheight = "100"
null
100
Sample

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

Sets the seconds of autoplay aka slider mode.

sliderseconds = "3"
Sample

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
Sample

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.

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

Tab's pane

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

#tab > .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

You can use more Wheelizate Tabs in same page, the plugin generate css automatically for each tab.






   v1.1 - © 2016-2021  softwaretailoring.net