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.
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
Sets the default selected tab. The tab's index starts from 0.
selectedtab = "1"
The type of the tab.
tabtype = "Corner"|"Side"|"Classic"|"Center"|"Apart"Sample
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
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
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"
The type of the wheel.
tabwheeltype = "Pie"|"Donut"|"Flower"|"Icon"|"Cog"|"Wheel"
The available types:
Sets the radius of the wheel.
wheelradius = "100"
Defines the title by text, icon or image.
Sample[wtabtitle text="0"]Tab pane content[/wtabtitle]
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 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]
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]
Sets the angle of titles.
titlerotateangle = "0"
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"
Sets the order of navItems.
clockwise = "true"
When set to true, a marker is visible beside the selected item.
marker = "true"
Sets the easing of animation on wheel.
wheelanimation = "linear"|"easeInOut"|"easeIn"|"easeOut"|"backIn"|"backOut"|"elastic"|"bounce"
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"
When set to true, the tab has rounded corner. The direction of non-rounded corner is adaptive based on wheel's position.
tabrounded = "true"
When set to true, the tab has shadow. The direction of shadow is adaptive based on wheel's position.
tabshadowed = "true"
Sets the minimum height of tab pane.
minheight = "100"
Sets the seconds of autoplay aka slider mode.
sliderseconds = "3"Sample
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
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.
A content div contains all tab-pane.
#tab > .wtab-content { padding: 25px; }
When a tab pane selected an unique class name applied on it.
#tab > .wtab-selected-N { background-color: #5ba9fc; border-width: 0; }
Without css the pure wheel looks like this:
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
[class|=wheelnav-tab-wheel] { fill: #5aa8fb; stroke: white; }
[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; }
[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; }
.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; }
.wheelnav-tab-wheel-marker { stroke: #5aa8fb; stroke-width: 3px; }
You can use more Wheelizate Tabs in same page, the plugin generate css automatically for each tab.