Layout


 Summary

  • Supports 2 template engines: Bootstrap and jQuery UI
  • Bootstrap makes the tabs look like the rest of the site, if the website uses bootstrap
  • jQuery UI is maintained mostly for backward compatibility
  • Supports tab and accordion layout, optionally displayed inside popups
  • Modules can also be turned into an inner accordion
  • Layout can be adaptive to show accordion on mobile devices and tabs on the rest
  • And of course, it's responsive
With the release of the second Tabs Pro version, besides the well known jQuery UI widget provider, we've added Bootstrap which will integrate nicely with most of the skins, giving to our Tabs Pro module a look that's integrated with the rest of the website.

No matter the options selected, from Accordion widget combined to other available options, like Auto Scroll or Collapsible settings, the layout of the created page will be consistent with your needs and pretty appealing to the eye.

To be more specific on what our Tabs Pro module can look like when we apply these widget providers, you'll find several image examples listed above.

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: