magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Tab Menu with Layers (Tabbed Layers)


This lightweight extension allows you to manage layers with the standard Tab Menu object (also compatible with: Navigation Bar, Slide Menu, CSS Menu and Text Menu).
Of course, you can do the "same" with the jQuery Tabs or with the same standard Tab Menu objects.

jQuery Tabs: You can't have different themes. Unless you put each one in individual subpages and embed them in an InlineFrame...
Tab Menu: You can't manage layers, only pages. You can simulate this using embedded subpages in InlineFrames...

Now, you:
can have the light and powerful Tab Menu object managing layers instead of pages,
don't need subpages - and implement tricks to prevent to be opened as standalone ones,
can have as many Tab Menus as you need in the same page and with different schemes!

Sample project file included.


HTML 4.01 Transitional
W3C compliant


DEMO


* New in version 1.1.0.0:

  Optimized code for wb9+
  New format for advanced functions added in v1.0.2 (replaced the underscore with dot).
  Improved code for objects detection (manual selection not needed anymore).
  Deprecated properties were removed.

  functions added in v1.0.2 (new format):

   
myObjectID.open (tabnumber);

    programmatically open a specific tab (layer), i.e. by an event
    replace myObjectID with the actual object id

   
myObjectID.close();

    programmatically close all the opened tabs (layers), i.e. by an event
    replace myObjectID with the actual object id
 
* New in version 1.0.2.0:

  Fixed a minor issue with Slide Menu object, the layer id doesn't need to have a # anymore.
  Slide Menu support for wb7 and later.
  Functions added to programmatically open and close layers (
further info was updated and
  removed from this section as it is obsolete
).

* New in version v1.0.1.0:

  Also works with: Navigation Bar (+), Slide Menu, CSS Menu and Text Menu.

  (+) Box on focus and hover style on current page are not supported for this object.


How to use?

Design each layer as you usually do.
Drag and drop a Tab Menu object.
Open the Tab Menu properties dialog.
For each item, add its layer id. Yes, instead of link to another page, simply type in the layer id!

  - link to -> website
  - Page -> MyFirstLayer / MySecondLayer / etc


Drag and drop this extension and enter the Tab Menu object id.
That's all.

Enjoy!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut orci urna, nec hendrerit velit. Praesent porta tempor enim, ac rhoncus libero fringilla sed. Duis sem nunc, aliquam sit amet euismod ut, auctor non sem. Nullam fringilla fringilla sagittis. Nulla facilisi. Mauris at leo eget sapien consequat euismod. Ut rutrum facilisis blandit. Duis metus sapien, vestibulum ac pulvinar sit amet, elementum a mauris. Nullam tincidunt vehicula iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla quis sem in massa rutrum hendrerit.

w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with