DMXzone Tabs

You want to organize your content in the best possible way? Now, you can do that with DMXzone Tabs, the extension that gives you the opportunity to divide and style your content into as many sections as needed directly and visually in Dreamweaver! The DMXzone Tabs is for everyone that wants to add any content from simple text to images, videos and even whole pages, all of this rendered live in Dreamweaver design view, so you can switch from tab to tab and edit it right in place.

With the style picker you can choose between the 24 different predefined designs included in this Dreamweaver extension or style it through the CSS to match your website layout. 

Fully customizable, the extension offers amazing effects for a better user experience to stun them right away. The extension is also controllable by behaviors if you want to navigate to a specific tab or start an event within it, and even bind it with other DMXzone extensions.

Overview

Features Highlights:

• 24 lightweight CSS Designs included - We have chosen to use CSS3 effects like rounded corners and shadows in our CSS designs to make them really pure CSS and very light.
  
• Easy to choose style picker - We've included a style picker where you can see a preview of the chosen design
• Organize your content into multiple tabs - Break your web content into multiple tabs that you can easily navigate between and save space
• Display any content - You can add rich content into the tabs, such as text, images, videos and even whole pages
• All tabs are live rendered in Dreamweaver and can be fully navigated in design view! So you can easily visual switch from tab to tab and edit it right in place! Note that this feature requires Dreamweaver CS3+
• Fully controllable by behaviors - If you want to navigate to a specific tab or start an event within it - it can be easily done with the Control DMXzone Tabs behavior

* For complete Features overview press the Features in Detail 

DMXzone Tabs Demo

In this demo website you can see how easy it is to put all of your content on one page with the help of DMXzone Tabs, where you can divide it in categories, add images, tables and more.

 

Features

DMXzone Tabs Designs

• 24 lightweight CSS Designs included - We have chosen to use CSS3 effects like rounded corners and shadows in our CSS designs to make them really pure CSS and very light - so no extra images for many weird CSS hacks are loaded. Also you can edit them to fit your website perfectly

• Easy to choose style picker - We've included a style picker where you can see a preview of the chosen design
  

• Organize your content into multiple tabs - Break your web content into multiple tabs that you can easily navigate between and save space

• Display any content - You can add rich content into the tabs, such as text, images, videos and even whole pages

• Fully customizable styles - Our tabs are all CSS based so you can easily make your own adjustments in the CSS from within Dreamweaver's CSS editor

Revolutional Dreamweaver integration

• All tabs are live rendered in Dreamweaver and can be fully navigated in design view! So you can easily visual switch from tab to tab and edit it right in place! Note that this feature requires Dreamweaver CS3+

• Add, remove or rearrange tabs - You can add, remove and rearrange tabs from the Inline property inspector

• Fully resizable - The height of the tabs expands depending on the content but the width can be set manually

• Toggle sections onClick or on mouse over - You can set your tabs to be switched onClick or on hover in order to create a more intuitive navigation

• Collapsible tabs - You can make the sections collapsible so that when clicked the selected tab will toggle its content closed/open

• Cool effects - You can customize the animation effect that appears while switching between tabs by toggling its Height and Opacity and adjusting the Speed. These options allow you to add a sliding effect and hide the content during the transitions
  

• Auto Rotate - If you need to switch your tabs automatically when the page is loaded, simply choose the Auto Rotate option. Select Continuous to prevent your users from navigating between the tabs manually

• Inline property inspector - You can easily change all the visual options later on

• Fully controllable by behaviors - If you want to navigate to a specific tab or start an event within it - it can be easily done with the Control DMXzone Tabs behavior

• Full support for the DMXzone Behavior Connector - You can easily bind other DMXzone extensions like DMXzone Lightbox, and Advanced HTML Editor 3 to your tabs

• Search Engine Friendly - As the DMXzone Tabs is pure HTML and CSS code it can be nicely indexed by all search engines and web spiders.

Showcases

DMXzone Tabs Demo

In this demo website you can see how easy it is to put all of your content on one page with the help of DMXzone Tabs, where you can divide it in categories, add images, tables and more.

 

• 

  Online Cookbook Showcase

  For this online cookbook showcase, we divided the content into DMXzone Tabs to separate the different types of recipes. Also, the beautiful, fully responsive design for different devices is executed ...

• 

  Surfing Club Showcase

  For this showcase we used the DMXzone Bootstrap extension in order to create a responsive grid layout so that our page looks awesome on mobile devices, tablets and desktop browsers. Also we used the ...

• 

  Green Business Page Showcase

  For this showcase we used the DMXzone Bootstrap extension to create a fully responsive design layout suitable for mobile devices, tablets and desktop browsers. We also included the DMXzone Nivo ...

• 

  Watches Shop with Different Options Showcase

  In this showcase we used Universal CSS Navigation Menu for the website navigation, DMXzone Tabs for the additional information and the Sliding PayPal Shopping Cart for the purchase process. The ...

• 

  Metro Design Showcase

  For this showcase we used 4 awesome Dreamweaver extension in order to create a Metro design. It contains DMXzone Tabs with animated content (Advanced CSS Animator), which are customized with the ...

• 

  HTML5 3D Flipping Gallery Store Showcase

  For this showcase page we used HTML5 3D Flipping Gallery in order to create a flipping image for the selected product. The trigger is on click and the flip direction is set to right. On the back we ...

• 

  Watches Shop Showcase

  Here, you can see how we combined DMXzone Tabs and Universal CSS Navigation Menu in a website showcase. Both the tabs and the menu are customized through the CSS to match the website design and in ...

• 

  Wine Shop Sales Page for Facebook

  Building easy Fan Gates is one of the most efficient ways to increase your online presence across the social networking platforms. If you want to make your space within Facebook more attractive ...

• 

  Harley Website Showcase

  In this showcase we used HTML5 Slideshow as a header to present different pictures and DMXzone Tabs in order to separate the content into categories for better preview.

• 

  DMXzone Tabs Showcase

  In this showcase website you can see how easy it is to put all of your content on one page with the help of DMXzone Tabs, where you can divide it in categories, add images, tables and more.

Videos

Requirements

The DMXzone Tabs runs on Dreamweaver 8 but we do not support it officially.

History

Version 1.1.1

• Included updated jQuery UI to 1.10.1 for more speed, power and greater user experience
• Included updated jQuery to 1.8.3 that includes the unbelievable 13 versions
• Updated jQuery UI Themes
• Improved support for new addition styling themes, like the DMXzone Metro UI Theme Pack
• Improved style picker dialog to pick up automatically new available styles
• Removed rotation options due to deprecation
  
• Added new transition options
  
• New height handling option supporting Fill, Content and Auto
  
• Removed enable and disable events due to deprecation

Version 1.0.1

• Improved Style chooser for DW CS6 on Mac OSX
• Included the latest jQuery UI 1.8.23
• Improved file compression for even smaller file sizes
• Improved Dreamweaver integration
• Improved installer for DW CS 5.5+ and Mac DW CS6