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
You can customize the content (HTML), the behaviour (JavaScript) and the style (CSS) of your tab.
The Wheelizate Tabs works with JavaScript, jQuery, HTML5 data attributes or WordPress. SVG library is Raphaël.js, wheel navigation by wheelnav.js.
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>
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
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 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
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
The type of the tab. wheelizateTabTypes helper class contains the possible values.
tabType: "Corner"|"Side"|"Classic"|"Center"|"Apart"
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"
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"
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. wheelizateTabWheelTypes helper class contains the possible values.
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. 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.
tabTitles: ["0", "1", "2", "3"]
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]
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"]
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"]
Sets the angle of titles.
titleRotateAngle: 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
Sets the order of navItems.
clockwise: false
When set to true, a marker is visible beside the selected item.
marker: false
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: false
When set to true, the tab has shadow. The direction of shadow is adaptive based on wheel's position.
tabShadowed: false
Sets the minimum height of tab pane.
minHeight: 100
Sets the seconds of autoplay aka slider mode.
sliderSeconds: 3
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.
#{id of tab div} > .wtab-content { padding: 25px; }
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; }
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; }
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.