[Top][All Lists]
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[Phpgroupware-cvs] phpgwapi/js/tabs tabs.js
From: |
Dave Hall |
Subject: |
[Phpgroupware-cvs] phpgwapi/js/tabs tabs.js |
Date: |
Sun, 03 Sep 2006 03:39:07 +0000 |
CVSROOT: /cvsroot/phpgwapi
Module name: phpgwapi
Changes by: Dave Hall <skwashd> 06/09/03 03:39:07
Modified files:
js/tabs : tabs.js
Log message:
this cleaned up version of the class should have been committted a long
time ago
CVSWeb URLs:
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/tabs/tabs.js?cvsroot=phpgwapi&r1=1.2&r2=1.3
Patches:
Index: tabs.js
===================================================================
RCS file: /cvsroot/phpgwapi/phpgwapi/js/tabs/tabs.js,v
retrieving revision 1.2
retrieving revision 1.3
diff -u -b -r1.2 -r1.3
--- tabs.js 30 Dec 2004 06:47:33 -0000 1.2
+++ tabs.js 3 Sep 2006 03:39:07 -0000 1.3
@@ -14,7 +14,7 @@
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public
- * License along with this library; if not, write to the Free Software
+ * License along with self.library; if not, write to the Free Software
* Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
*
* Contact information:
@@ -38,16 +38,23 @@
* @argument inactiveCSSclass CSS class name for inactive tabs (display:none)
* @argument HTMLtabID HTML ID name prefix that would be used with the tab
number as tab name.
* @argument HTMLtabcontentID HTML ID prefix for the tab content used with the
tab number
+ * @argument HTMLtabselectorID HTML ID prefix for a selectbox used to switch
between the tabs
+ * @argument HTMLtabradioID HTML ID prefix for radio button input fields used
to switch between the tabs
* @argument tabPageKey URL parameter name to use for setting/getting the
actual tab
+ * @argument callBack a callback function when the tab is changed - function
must take 1 arg, the id of the new tab
*/
-function
Tabs(nrTabs,activeCSSclass,inactiveCSSclass,HTMLtabID,HTMLtabcontentID,tabPageKey)
- {
+function
Tabs(nrTabs,activeCSSclass,inactiveCSSclass,HTMLtabID,HTMLtabcontentID,HTMLtabselectorID,HTMLtabradioID,tabPageKey,
callBack)
+{
this.nrTabs = nrTabs;
this.activeCSSclass = activeCSSclass;
this.inactiveCSSclass = inactiveCSSclass;
this.HTMLtabID = HTMLtabID;
this.HTMLtabcontentID = HTMLtabcontentID;
+ this.HTMLtabselectorID = HTMLtabselectorID;
+ this.HTMLtabradioID = HTMLtabradioID;
this.tabPageKey = tabPageKey;
+ this.callBack = callBack;
+ var self = this;
if (typeof(_tabs_prototype_called) == 'undefined')
{
@@ -59,10 +66,11 @@
Tabs.prototype.disableAll = disableAll;
Tabs.prototype.display = display;
Tabs.prototype.changeToActive = changeToActive;
+ Tabs.prototype.clicked = clicked
Tabs.prototype.init = init;
+ Tabs.prototype._replaceClass = _replaceClass;
}
-
/**
* Set tab as active
*
@@ -70,14 +78,20 @@
*/
function setActive(tabnr)
{
- if ((tabnr > 0) && (tabnr <= this.nrTabs))
+ if ((tabnr > 0) && (tabnr <= self.nrTabs))
+ {
+ self._replaceClass( self.HTMLtabID + tabnr,
self.inactiveCSSclass, self.activeCSSclass);
+ self._replaceClass( self.HTMLtabcontentID + tabnr,
self.inactiveCSSclass, self.activeCSSclass);
+ if ( self.HTMLtabselectorID != null &&
self.HTMLtabselectorID != '' )
+ {
+
document.getElementById(self.HTMLtabselectorID).selectedIndex = tabnr-1;
+ }
+ if ( self.HTMLtabradioID != null &&
self.HTMLtabradioID != '' )
{
- document.getElementById(HTMLtabID + tabnr).className =
this.activeCSSclass;
- document.getElementById(HTMLtabcontentID + tabnr).className =
this.activeCSSclass;
+ document.getElementById(self.HTMLtabradioID +
tabnr).checked = true;
+ }
}
}
-
-
/**
* Set tab as inactive
@@ -86,14 +100,13 @@
*/
function setInactive(tabnr)
{
- if ((tabnr > 0) && (tabnr <= this.nrTabs))
+ if ((tabnr > 0) && (tabnr <= self.nrTabs))
{
- document.getElementById(HTMLtabID + tabnr).className =
this.inactiveCSSclass;
- document.getElementById(HTMLtabcontentID + tabnr).className =
this.inactiveCSSclass;
+ self._replaceClass( self.HTMLtabID + tabnr,
self.activeCSSclass, self.inactiveCSSclass);
+ self._replaceClass( self.HTMLtabcontentID + tabnr,
self.activeCSSclass, self.inactiveCSSclass);
}
}
-
/**
* Test if tab is active
*
@@ -102,10 +115,9 @@
*/
function isActive(tabnr)
{
- return(document.getElementById(HTMLtabID + tabnr).className ==
this.activeCSSclass);
+ return(document.getElementById(self.HTMLtabID +
tabnr).className.search(/self.activeCSSclass/) != -1);
}
-
/**
* Get the active tab number
*
@@ -113,29 +125,27 @@
*/
function getActive()
{
- for (i = 1; i <= this.nrTabs; ++i)
+ for (var i = 1; i <= self.nrTabs; ++i)
{
- if (this.isActive(i))
+ if (self.isActive(i))
{
- return(i);
+ return i;
}
}
- return(0);
+ return 0;
}
-
/**
* Disable all tabs
*/
function disableAll()
{
- for (i = 1; i <= this.nrTabs; ++i)
+ for (var i = 1; i <= self.nrTabs; ++i)
{
- this.setInactive(i);
+ self.setInactive(i);
}
}
-
/**
* Disable all tabs and then display the tab number given
*
@@ -143,11 +153,10 @@
*/
function display(tabnr)
{
- this.disableAll(this.nrTabs);
- this.setActive(tabnr);
+ self.disableAll(self.nrTabs);
+ self.setActive(tabnr);
}
-
/**
* Loop over all tabs - switch off currently active tabs and display the new
tab
*
@@ -155,38 +164,94 @@
*/
function changeToActive(tabnr)
{
- for (i = 1; i <= this.nrTabs; ++i)
+ for (var i = 1; i <= self.nrTabs; ++i)
{
if (i == tabnr)
{
- if (!this.isActive(i))
+ if (!self.isActive(i))
{
- this.setActive(i);
+ self.setActive(i);
}
}
else
{
- if (this.isActive(i))
+ if (self.isActive(i))
+ {
+ self.setInactive(i);
+ }
+ }
+ }
+ }
+
+ /**
+ * Handle click event
+ *
+ * @argument e click event
+ */
+ function clicked(e)
+ {
+ if ( !e ) //Fix Broken IE
{
- this.setInactive(i);
+ var e = window.event;
}
+
+ if ( e.target )
+ {
+ var oTarget = e.target;
+ }
+ else if ( e.srcElement )
+ {
+ var oTarget = e.srcElement;
}
+
+ if ( oTarget.id && oTarget.id.indexOf(self.HTMLtabID) == 0 )
+ {
+
self.display(oTarget.id.substring(self.HTMLtabID.length));
+
+ if ( window.event ) //Crappy IE
+ {
+ e.cancelBubble = true;
}
+ else //W3C :)
+ {
+ e.stopPropagation();
}
+ if ( self.callBack != null && self.callBack != '' )
+ {
+ self.callBack(oTarget);
+ }
+ }
+ }
/**
* Get url parameter for first tab and display it.
*/
function init()
{
+ for ( i = 1; i <= self.nrTabs; ++i )
+ {
+ if ( document.getElementById )
+ {
+ var oTab =
document.getElementById(self.HTMLtabID + i);
+ if( oTab.addEventListener )
+ {
+ oTab.addEventListener('click',
self.clicked, true);
+ }
+ else if( oTab.attachEvent )
+ {
+ oTab.attachEvent('onclick',
self.clicked);
+ }
+ }
+ }
+
var tab = 0;
var url = document.URL;
var pos = url.indexOf("?");
if (pos > -1)
{
var urlparams = url.substr(pos + 1,url.length - (pos + 1));
- var regexp = new RegExp('(^|&)' + this.tabPageKey + '=[0-9]{1,2}');
+ var regexp = new RegExp('(^|&)' + self.tabPageKey +
'=[0-9]{1,2}');
var urlparamstart = urlparams.search(regexp);
if (urlparamstart > -1)
{
@@ -213,11 +278,41 @@
{
tab = 1;
}
- if ((tab <= 0) || (tab > this.nrTabs))
+ if ((tab <= 0) || (tab > self.nrTabs))
{
tab = 1;
}
- this.display(tab);
- }
+ self.display(tab);
}
+ /**
+ * Replace a CSS class with another
+ *
+ * @param string strID document element ID to replace class on
+ * @param string strOldClass the old CSS class name to remove from ID
+ * @param string strNewClass the new CSS class name to add to ID
+ */
+ function _replaceClass(strID, strOldClass, strNewClass)
+ {
+ //document.getElementsByTagName('body').item(0).appendChild(
document.createTextNode('_replaceClass(' + strID + ', ' + strOldClass + ', ' +
strNewClass + ') called') );
+ var oElm = document.getElementById(strID);
+ if( oElm.className != '')
+ {
+ var arClasses = oElm.className.split(' ');
+ var iCnt = arClasses.length;
+ for(i = 0; i < iCnt; ++i)
+ {
+ if ( arClasses[i] == strOldClass )
+ {
+ arClasses[i] = strNewClass;
+ break;
+ }
+ }
+ oElm.className = arClasses.join(' ');
+ }
+ else
+ {
+ oElm.className = strNewClass;
+ }
+ }
+}
[Prev in Thread] |
Current Thread |
[Next in Thread] |
- [Phpgroupware-cvs] phpgwapi/js/tabs tabs.js,
Dave Hall <=