[Mapbender-commits] r2204 - branches/2.5/http/javascripts
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Thu Mar 6 11:33:25 EST 2008
Author: nimix
Date: 2008-03-06 11:33:25 -0500 (Thu, 06 Mar 2008)
New Revision: 2204
Added:
branches/2.5/http/javascripts/mod_horizTab.php
branches/2.5/http/javascripts/mod_horizTabs.js
Modified:
branches/2.5/http/javascripts/mod_tab.js
Log:
add horizontal tab module
Added: branches/2.5/http/javascripts/mod_horizTab.php
===================================================================
--- branches/2.5/http/javascripts/mod_horizTab.php (rev 0)
+++ branches/2.5/http/javascripts/mod_horizTab.php 2008-03-06 16:33:25 UTC (rev 2204)
@@ -0,0 +1,53 @@
+<?php
+# $Id: $
+# http://www.mapbender.org/index.php/mod_horizTab.php
+# Copyright (C) 2002 CCGIS
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 2, or (at your option)
+# any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
+
+/********** Configuration*************************************************/
+$gui_id = $_REQUEST["gui_id"];
+require_once(dirname(__FILE__)."/../classes/class_mb_exception.php");
+
+$tab_ids = array();
+include(dirname(__FILE__)."/../include/dyn_php.php");
+include(dirname(__FILE__)."/../include/dyn_js.php");
+
+//default styles
+echo 'try{if(horiztab_style){}}catch(e){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;";}';
+echo 'try{if(horiztab_style_active){}}catch(e){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;";}';
+
+//load styles
+echo "var styleObj = new StyleTag();";
+echo 'styleObj.addClass("tabButton", horiztab_style);';
+echo 'styleObj.addClass("tabButtonActive", horiztab_style_active);';
+
+//write tab creation javascript function
+echo "open_tab_".$e_id."=".($open_tab?$open_tab:0).";\n";
+echo "function init_".$e_id."(){";
+echo "$(\"#".$e_id."\").tabControl()";
+for ($i=0; $i < count($tab_ids); $i++) {
+ $sql = "SELECT gettext($1, e_title) AS e_title FROM gui_element WHERE fkey_gui_id = $2 AND e_id = $3";
+ $v = array($_SESSION["mb_lang"], $gui_id, $tab_ids[$i]);
+ $t = array("s", "s", "s");
+ $res = db_prep_query($sql, $v, $t);
+ $row = db_fetch_array($res);
+ echo ".addTab({title:\"".$row["e_title"]."\",id:\"".$tab_ids[$i]."\"})";
+}
+echo ".activateTab(open_tab_".$e_id.");}\n";
+
+//register init event for function
+echo "eventInit.register(init_".$e_id.");\n";
+?>
\ No newline at end of file
Added: branches/2.5/http/javascripts/mod_horizTabs.js
===================================================================
--- branches/2.5/http/javascripts/mod_horizTabs.js (rev 0)
+++ branches/2.5/http/javascripts/mod_horizTabs.js 2008-03-06 16:33:25 UTC (rev 2204)
@@ -0,0 +1,90 @@
+/*
+* $Id:$
+* COPYRIGHT: (C) 2001 by ccgis. This program is free software under the GNU General Public
+* License (>=v2). Read the file gpl.txt that comes with Mapbender for details.
+*/
+(function($){
+
+/**
+ * turns a div tag into a tab control
+ * @return jQuery
+ */
+ $.fn.tabControl = function(options){
+ defaults = {tab:true};
+ return this.each(function(){
+ this._tabSettings = $.extend(defaults, options)
+ this.tabs = [];
+ this.activeTab = false;
+ //append div for tab buttons
+ $(this).append("<div />")
+ });
+ };
+
+/**
+ * adds a tab to a tab control
+ * @return jQuery
+ */
+ $.fn.addTab = function(options){
+ return this.each(function(){
+ //ensure function is called on a tabControl
+ if(!this._tabSettings)
+ return;
+
+ //Add tab
+ this.tabs.push(options);
+
+ //add access button for this tab and update height
+ this.tab_height = parseInt($("div",this)
+ .append("<span class=\"tabButton\" id=\"tabButton_"+options.id+"\">"+options.title+"</span> ")
+ .height());
+ //bind click event to activate the tab
+ $("#tabButton_"+options.id,this)
+ .bind("click",{i:this.tabs.length-1},function(event){
+ $(this.parentNode.parentNode).activateTab(event.data.i);
+ });
+
+ //set element to right position
+ $("#"+options.id).css({position:"absolute",
+ left:parseInt(this.style.left),
+ top:parseInt(this.style.top)+this.tab_height,
+ width:$(this).width(),
+ height:$(this).height()-this.tab_height,
+ zIndex:parseInt(this.style.zIndex+1)})
+ //and hide it
+ .hide();
+ });
+ }
+
+/**
+ * activate tab i of the tab control
+ * @param integer i number of tab to activate (0 to number of tabs -1)
+ * @return jQuery
+ */
+ $.fn.activateTab = function(i){
+ return this.each(function(){
+ //ensure function is called on a tabControl
+ if(!this._tabSettings)
+ return;
+
+ //hide old tab
+ if(this.activeTab!==false){
+ $("#"+this.tabs[this.activeTab].id).hide();
+ $("#tabButton_"+this.tabs[this.activeTab].id).removeClass("tabButtonActive").addClass("tabButton");
+ }
+
+ //move tab to right position
+ $("#"+this.tabs[i].id).css({position:"absolute",
+ left:parseInt(this.style.left),
+ top:parseInt(this.style.top)+this.tab_height,width:$(this).width(),
+ height:$(this).height()-this.tab_height,zIndex:parseInt(this.style.zIndex+1)})
+ //and show it
+ .show();
+
+ //update button state
+ $("#tabButton_"+this.tabs[i].id).removeClass("tabButton").addClass("tabButtonActive");
+ this.activeTab=i;
+ });
+ }
+})
+(jQuery);
+
Modified: branches/2.5/http/javascripts/mod_tab.js
===================================================================
--- branches/2.5/http/javascripts/mod_tab.js 2008-03-06 15:59:57 UTC (rev 2203)
+++ branches/2.5/http/javascripts/mod_tab.js 2008-03-06 16:33:25 UTC (rev 2204)
@@ -349,9 +349,15 @@
var hideFrame = function(id) {
var index = getIndexById(id);
if (index !== null) {
- var obj = document.getElementById(id).style;
- obj.visibility = 'hidden';
+ var obj = document.getElementById(id);
+ obj.style.visibility = 'hidden';
+ //try to apply for childs of horizontal tabs
+ try{
+ if(obj.tabs)
+ document.getElementById(obj.tabs[obj.activeTab].id).style.visibility = 'hidden';
}
+ catch(e){}
+ }
};
/**
@@ -363,8 +369,21 @@
var showFrame = function(id) {
var index = getIndexById(id);
if (index !== null) {
- var obj = document.getElementById(id).style;
- var newpos = ((index+1) * tabHeight) + parseInt(tabTopOffset, 10);
+ var obj = document.getElementById(id);
+ var newpos = ((index+1) * tabHeight) + parseInt(tabTopOffset);
+ //try to apply for childs of horizontal tabs
+ try{
+ if(obj.tabs){
+ activeTab = document.getElementById(obj.tabs[obj.activeTab].id).style;
+ activeTab.visibility = 'visible';
+ activeTab.top = ((newpos + 1) + obj.tab_height) + "px";
+ activeTab.left = (tabLeftOffset) + "px";
+ activeTab.width = tabWidth;
+ activeTab.height = (parseInt(that.get(index).height) - 2) - obj.tab_height;
+ }
+ }
+ catch(e){}
+ obj=obj.style;
obj.top = (newpos + 1) + "px";
obj.left = (tabLeftOffset) + "px";
obj.width = tabWidth;
More information about the Mapbender_commits
mailing list