Tabs horizontal

From MapbenderWiki

User:Melchior Moos

Contents 1 Description 1.1 english 2 deutsch 3 Element Vars 4 Requirements 5 touched files 6 SQL

Description

english

The module mod_horizTabs.js provides a way to switch between a configurable set of modules with vertical tabs like in a notebook. It can be used in combination with Tabs vertical.

To add horizontal tabs to your GUI create a GUI Element with HTML-Tag div, javascript file mod_horizTab.php and module mod_horizTabs.js. If you want to use the horizontal tabs more than one times you have to dublicate the file mod_horizTab.php and write the second file as javascript file to the second GUI Element.

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.

deutsch

Das Modul mod_horizTabs.js bietet die Möglichkeit zwischen verschiedenen Modulen mit Hilfe von vertikalen Karteireitern wie in einem Notizbuch zu wechseln. Es kann auch in kombination mit vertikalen Tabs genutzt werden.

Um horizontale Tabs zu ihrer GUI hinzuzufügen erstellen Sie ein GUI Element mit dem HTML-Tag div, der javascript Datei mod_horizTab.php und dem Modul mod_horizTabs.js. Um horizontale Tabs mehr als einmal zu nutzen duplizieren Sie die Datei mod_horizTab.php und binden diese als javascript Datei in das 2. GUI Element ein.

Bitte beachten

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

Element Vars

• open_tab (php_var)
• tab_ids(n) (php_var)
• horiztab_style (var javascript)
• horiztab_style_active (var javascript)

Requirements

The module requires jQuery and style.js in the mainframe (Mapbender 2.5 +). For compartibility with Tabs vertical the module has to be updated too.

touched files

• http://trac.osgeo.org/mapbender/browser/trunk/mapbender/http/javascripts/mod_tab.js?format=raw
• http://trac.osgeo.org/mapbender/browser/trunk/mapbender/http/javascripts/mod_tab.php?format=raw
• http://trac.osgeo.org/mapbender/browser/trunk/mapbender/http/javascripts/mod_horizTabs.js?format=raw
• http://trac.osgeo.org/mapbender/browser/trunk/mapbender/http/javascripts/mod_horizTab.php?format=raw
• http://trac.osgeo.org/mapbender/browser/trunk/mapbender/http/javascripts/map.php?format=raw (to put style.js in the mainframe)

SQL

The following SQL will put the two gazetteer Searches of GUI 'gui' into one vertical tab and make them accessible through horizontal tabs: INSERT INTO gui_element (fkey_gui_id, e_id, e_pos, e_public, e_comment, e_title, 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, e_url) VALUES ('gui', 'search_tabs', 1, 1, '', 'Suchen', 'div', '', '', 1, 1, 1, 1, 30, '', '', 'div', 'mod_horizTab.php', 'mod_horizTabs.js', '', '', ''); INSERT INTO gui_element_vars (fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES ('gui', 'search_tabs', 'tab_ids[0]', 'gazetteerWFS', '', 'php_var'); INSERT INTO gui_element_vars (fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES ('gui', 'search_tabs', 'tab_ids[1]', 'gazetteerMetadata', '', 'php_var'); INSERT INTO gui_element_vars (fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES ('gui', 'search_tabs', 'horiztab_style', '-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;-webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;font-size:7pt;border:solid #222222 1px;padding:1px 8px 1px 8px;line-height:22px;background:#aaaaaa;cursor:pointer;white-space:nowrap;', '', 'var'); INSERT INTO gui_element_vars (fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES ('gui', 'search_tabs', 'horiztab_style_active', '-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;-webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;font-size:7pt;border:solid #222222 1px;border-bottom:solid #f8f8f8 1px;padding:2px 10px 1px 10px;line-height:22px;background:#eeeeee;font-weight:bold;cursor:pointer;white-space:nowrap;', '', 'var'); DELETE FROM gui_element_vars WHERE fkey_gui_id = 'gui' AND fkey_e_id = 'tabs' AND var_name = 'tab_ids[6]'; DELETE FROM gui_element_vars WHERE fkey_gui_id = 'gui' AND fkey_e_id = 'tabs' AND var_name = 'tab_frameHeight[6]'; UPDATE gui_element_vars SET var_value = 'search_tabs' WHERE fkey_gui_id = 'gui' AND fkey_e_id = 'tabs' AND var_name = 'tab_ids[3]';