What’s new in Zozo Tabs 6.0? (flat ui tabs)

New Features in Zozo Tabs 6.0 (December 2013)

ZOZO TABS 6.0 – jQuery Tabs Plugin comes with some awesome new features to the table including Flat Theme Pack Extension (flat ui tabs), enhanced core css and themes, more intelligent responsive feature. Upgrading is highly recommended, however as there are also many API and structural CSS changes, its recommend to read the upgrade note below.

  •  Added: Flat Theme Pack Extension (flat ui tabs) which includes 20 flat themes in dark and light and in 3 styles (contained, clean, pills)
  •  Added: plenty of more templates/examples
  •  Added: option disabled (data-disabled can be added to tab to disable it on page load)
  •  Added: public methods (disable and enable tabs)
  •  Added: load event to adjust content heigh/width when tabs contains image/video
  •  Improved: 25% lighter CSS and cleaner (well-organized and well-structured code)
  •  Improved: IE10 (Windows 8) touch compatibility
  •  Improved: Responsive stacking feature (more intelligent)
  •  Improved: Documentation
  •  Support for Font Awesome Icons
  •  Fixed: conflict between zozo accordion and and tabs
  •  Tested and compatible with all major desktop browsers including IE7, IE8, IE9, IE10, Chrome, Firefox, Safari, Opera) and mobile browsers. We have tested it on iPad, iPhone (IOS), Samsung Galaxy S3, Samsung Note 2 (Android). Opera Mini and Chrome Mobile.

Important Upgrade Notes

For those upgrading from a previous version of Zozo Tabs, there are some changes to the plugin to be aware of if you made any customization. If you have further question, please do not hesitate to contact us via our support email.

General Upgrade

Re-download the latest plugin zip file, go to your Downloads on CodeCanyon. This will always give you the latest version of the plugin. After downloading replace all files in your project/app.

Customization

As the tabs structural CSS has been modified, customizations may no longer appear as desired and may require modification. All customizations should be done in a separate css file.

  1. Backup your old files, to be safe.
  2. Add the new js, css and img files Zozo Tabs to your project  (depending on which module you select in your project,  read the readme file in source folder for advanced customization)
  3. Add your custom css file to your project and modify it if necessary
  4. It is recommended to test on Zozo Tabs 6.0 in a test environment and not on a live production site.

Customization from previous versions:

Changes in the css structure which will affect any theming customization for previous versions. We have moved the all theming style from tab li tag to the a tag. That means all customization is done on li tag which should be moved to a tag. Below an example:

Customization changes on new version (6.0):

looking a the customization code from previous and new version is not that much different. But is more cleaner and simpler now with shorter selectors and its done only a tag. That is it. If you have any questions, feel free to contact us via support email.

Leave A Comment?