- Beschreibung
- show intro to
tabmanager
- i
Beschreibung
The tabManager is nothing but a
JavaScript-class. Its use is fairly
simple and for standard tabbed-panels
doesn't even require programming
knowledge. Turning some DIV-elements
into tabbed-panels is no big deal;
include the javascript-file, set some
css-directives and initialize the
tabManager. Although being such simple
in implementation tabManager comes
with some useful functionality.
Contrary to existing similar tools,
you don't need to define a link-list
of any sort to get your tabbed-panels.
Adding Panels is enough to get it
working. Easy, isn't it?
Unobtrusive JavaScript
seems to be the new buzzword used in
any other application. Unobtrusive
JavaScripts are built to enhance
websites if the browser accepts
javascript and does not mess
up the page entirely, if the browser
declines javascript. It also stands
for a clean cut between markup, style
and functionality. In my opinion
unobtrusive javascript should even go
a step further; get encapsulation of
the different tools right, so they
don't mess up each others
functionality.
- Anleitung
- the power of
tabManager
- p
Anleitung
For the
simplest of all possibilities you can
place another <div>-element
around your
<div>-elements. Assign an ID to
the outer <div>-element and
import tabManager. All (first-level)
<div>-elements will be importet
an automatically added to the
tab-navigation.
dynamic import
It's possible to add an remove new
tabs on runtime. This makes it very
easy to extend your tabbed-panels as
you wish. Objects already registered
in DOM-tree will be set as child of
tabManager.
move tabs
To get to an even higher level of
versatility, tabs can be moved to
other positions within a tabbed-panel.
This way you can get your tabs into
your favoured order.
events
To make tabManager usable for
interactive interfaces, I added
events. You can have the user confirm
the switch to another tab, or initiate
a HTTP-request, for example.
disable tabs
There are quite a few reasons to
disable and enable a tab during
runtime. If a tab is disabled, it is
not possible to switch to this tab
what so ever.
navigation links
Specify a link pointing to an
anchor, let's say #tmNext and
tabManager will make the link to
switch to the next tab.
anchors
If an anchor is set to jump to,
tabManager will display the
corresponding tab on page load
automatically.
accesskeys
You can define accesskeys for each
tab. Especially Interfaces which will
be used frequently will benefit from
this.
- Bilder
- need multiple
tabbed-panels?
- m
multiple tabbed-panels
You can create multiple autonomous
tabbed-panels on the same page.
tabManager doesn't use any global
functions or variables, so it is
perfectly fine to use multiple
instances.
nested tabbed-panels
Yes! you can even nest one
tabManager inside the other. There is
no limit to the depth of nested
tabbed-panels.
- sonstiges
- colors an things
like that
- s
tabManager's style
tabManager doesn't care about
good-looking websites. Controlling
style is reduced to setting
css-classes. If no css is specified,
the whole thing will look like the
html presets.
Since using css you can have
tabManager look like mostly anything
you can think of. The example comes
with the sliding-doors technique
implemented, changing colors is
trivial.
The dynamically generated tabBar can
either be set to be displayed above or
below the tabPanels. It's a stylesheet
thing to have your tabs look nice
above or below the tabPanels, or even
move the tabs to the left or right of
the tabPanels.
For some reasons apple's Safari
needs some extra care to display
tabPanels with the correct width.
Because of this tabManager sets the
width of the tabPanels to the width of
the previously active tabPanel. In
spite of this adjustment your
stylesheets should work out correctly.