Widget Provider

The most important feature is the Widget provider - when adding a new Tabs Pro module, Bootstrap will be set by default and, as told above, we've kept the jQuery UI option, so if you want to get back to jQuery UI, you have this possibility by changing the provider from Bootstrap - in this way, when you get back on front end, you'll have the old jQuery UI display.

Let's get started with Bootstrap !

Our newly implemented template provider, Bootstrap, promises to integrate nicely with our Tabs Pro module and it automatically adapts the page to various screen sizes, either on desktop or on mobile browsers (beware though of the Internet Explorer versions) - for responsive and non-responsive web pages (more on this can be found on Responsiveness section).

On our Tab Pro module, the setup of the Tabs Layout and the Behavior have the same options as the ones available for jQuery, the only difference between jQuery and Bootstrap providers is made on the display level - we have one default display for the pages where Tabs Pro module is set with Bootstrap provider.

A sample of a page with collapsible content panels displayed in accordion:

Next on the list, jQuery UI !

This widget and interaction library can be used to build highly interactive web applications and with our Tabs Pro module you can choose the components that you want in order to get a custom version of the module for your project.

How to customize the Tabs

Step 1 You have the possibility to display the tabs at the top, at the bottom, or you can go for a vertical layout - either on the right or on the left side of the page, and last but not least, there's this accordion layout option which can be very useful for when you have more that 4 modules in one tab. These options can be found on the Settings page on the Tabs Layout drop down list:

Step 2

Select a theme or roll your own custom theme - on the jQuery UI Theme Location drop down list you have the options to choose from a number of pre-designed themes from the local server or from Google CDN location and there's this other option, Custom Url location.

You can either choose from the various themes we provide, or you can design your own custom theme using ThemeRoller (more details on themes can be found on Templates section).

Step 3

Customizing jQuery UI to your needs implies also the Behavior section where you can choose from collapsible content panels, which has the purpose of limiting the amount of space, to open on mouse-over and/or "on click" option, and the auto scroll option.

And here's a sample of a newly created front-end product with a single content area with multiple panels, each associated with a header in a list, and with "click" as value for open on action event:

results matching ""

    No results matching ""