Page 1 of 1

[rz] Tab Menu with Layers *** UPD 2014-Sep-21 ***

Posted: Mon Sep 03, 2012 11:44 am
by [RZ]
[rz] Tab Menu with Layers (Tabbed Layers) v1.1.0.0

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.

DEMO

HTML 4.01 Transitional
W3C compliant


* 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?

1. Design each layer as you usually do.
2. Drag and drop a Tab Menu object.
3. Open the Tab Menu properties dialog.
4. 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
5. Drag and drop this extension and enter the Tab Menu object id.

That's all.
Enjoy!

Re: Tabbed layers (TabMenu w/Layers) *** UPDATED Sep-05-2012

Posted: Wed Sep 05, 2012 2:12 pm
by [RZ]
* NEW in this minor update:
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

Re: Tabbed layers (TabMenu w/Layers) *** UPDATED Sep-05-2012

Posted: Sun Sep 09, 2012 12:30 pm
by FX3D
It seems you can read minds [RZ] this is EXACTLY what I have been looking for :P

I was inspired by your single page site and have created one of my own (not finished) I am going to give it away here on the forum but have some small things to add yet ;)

Thanks again

P.S had to remove all the old extensions from my documents/WYSIWYG/system etc and reinstall them for the new 8.5 beta to work (I might have had older versions residing there tbh ?)

Re: Tabbed layers (TabMenu w/Layers) *** UPDATED Sep-05-2012

Posted: Sun Sep 09, 2012 12:34 pm
by [RZ]
thank you for your feedback fx3d!

Re: Tabbed layers (TabMenu w/Layers) *** UPDATED Sep-05-2012

Posted: Wed Sep 12, 2012 1:21 pm
by [RZ]
which language you need?

Re: Tabbed layers (TabMenu w/Layers) *** UPD 2014-Sep-21 ***

Posted: Sat Sep 20, 2014 10:04 pm
by [RZ]
* 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