Tabs vertical

From MapbenderWiki

User:Christoph Baudson (module maintainer)

Contents 1 Description 1.1 english 1.2 DE 2 Element Vars 3 Files 4 SQL

Description

english

The module mod_tab.js provides a space saving and elegant method to switch between IFRAMES. Clicking on the title will move the tabs vertically always making best use of the available space.

Configuration is done inside the JavaScript file. The array tab_ids lists the IDs of the modules to be contained. In the array tab_titles every tab can be given a name. Array tab_frameHeight defines the height which is reserved for the tabs.

Positioning and height of the tabs is specified in the administration interface as for all other modules. The value specified in the field height is used for all tabs. Further layout can be set in tab_styles.

To use the module in different GUI with different settings duplicate and modify the JavaScript file.

Notice

This modul works with element_vars. Klick on the element link out of the administration gui. Then you have the possibility to edit and add element vars.

Important: Please notice that editing the frame height of a tabulator is only possible in steps of 10 pixels (e.g. 120px, 230px, 540px). With other values strange behavior (tremor) of the tab occurs.

---

DE

Das Modul mod_tab.js bietet die Möglichkeit, IFRAMES abwechselnd anzeigen zu lassen. Dabei verschieben sich die Karteireiter vertikal und schaffen den Platz zur Anzeige der jeweiligen Module.

Die Konfiguration des Moduls erfolgt in der JavaScript-Datei. In dem Array tab_ids werden die IDs der Module aufgelistet, die berücksichtigt werden sollen. Das Array tab_titles bietet die Möglichkeit, jedem Karteireiter eine Beschriftung zuzuweisen. Das Array tab_frameHeight bestimmt die Höhe, die dem iFrame zur Verfügung steht.

Die Positionierung und Höhe der Karteireiter wird bei der Integration des Moduls (Edit Gui-Elements) in den üblichen Formularfelder vorgenommen (left,top,width,height). Die Höhe (height) wird auf jeden einzelnen Karteireiter angewendet. Das weitere Layout kann in dem Parameter tab_styles angepasst werden.

Soll das Modul in verschiedenen GUIs mit unterschiedlicher Konfiguration zum Einsatz kommen, duplizieren Sie die JavaScript-Datei und ändern Sie die Einstellungen.

Bitte beachten

Dieses Modul verfügt über Element vars. Diese werden bei Klick auf das Element in der Administrationsoberfläche angezeigt und können angepaßt und erweitert werden.

Wichtig: Beim Anpassen der Höhe eines geöffneten Tabulators (tab_frameHeight) können nur 10er Schritte eingegeben werden, bei krummen Werten fängt der geöffnete Tabulator an zu zucken.

Element Vars

• open_tab
• tab_frameHeight(n)
• tab_ids(n)
• tab_prefix
• tab_style
• tab_titles(n) - !!! element_var is deprecated from Version 2.5 on. Title is generated from e_title of every element, which is integrated in a tab

Files

For this module the following files are required / Für dieses Modul werden die folgenden Dateien benötigt:

• http://trac.osgeo.org/mapbender/browser/trunk/mapbender/http/javascripts/mod_tab.js?format=raw

SQL

Use this sql statement to insert this module in the corresponding gui / Mit diesem SQL kann das Modul in die entsprechende GUI eingefügen werden:

INSERT INTO gui_element(fkey_gui_id, e_id, e_pos, e_public, e_comment, e_element, e_src, e_attributes, e_left, e_top, e_width, e_height, e_z_index, e_more_styles, e_content, e_closeTag, e_js_file, e_mb_mod, e_target, e_requires) VALUES('gui1', 'tabs', '0002', '1', 'vertical tabs to handle iframes', 'div', '', '', '10', '170', '220', '20', '', 'font-weight:bold;font-family:Arial,Helvetica;', '', 'div', 'mod_tab.js', '', '', ''); INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('gui', 'tabs', 'tab_frameHeight[0]', '200', '' ,'var'); INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('gui', 'tabs', 'tab_frameHeight[1]', '260', '' ,'var'); INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('gui', 'tabs', 'tab_frameHeight[2]', '200', '' ,'var'); INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('gui', 'tabs', 'tab_ids[0]', 'treeGDE', '' ,'var'); INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('gui', 'tabs', 'tab_ids[1]', 'legend', '' ,'var'); INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('gui', 'tabs', 'tab_ids[2]', 'printPDF', '' ,'var'); INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('gui', 'tabs', 'tab_prefix', ' ', '' ,'var'); INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('gui', 'tabs', 'tab_style', 'position:absolute;visibility:visible;border: 1px solid white;font-size:12;color:#343434;background-color:#CFD2D4;cursor:pointer;', '' ,'var');