// The global array of objects that have been instanciated if (!Bs_Objects) {var Bs_Objects = [];}; /** * A TabSet Component. * * Features: * - IE6 and NS(Mozilla7) compliant. * * How to use: * 1. Have a look at the example (see example link below) * 2. Create a function in the HTML-header called init(). Place the javascript code * that instanciates and inits this component into init(). * 3. Place an 'onLoad' in your body-tag: e.g. * 4. In the HTML body: Place a div- or span-tag with an unique ID where you want the component to be. * * How it works: * - [After instanciating and initializing the object]. Call the draw() method. * This will search the HTML code for a tag with the given id and insert HTML- and JS- code * dynamically (using DOM) to display the component and handle it. * * @example example1.html * * @author andrej-at-blueshoes-dot-org * @package javascript_components * @subpackage tabset * @copyright blueshoes.org */ function Bs_TabSet(outerElmId) { // To support the old interface call with 2 arguments. (First argument used to be the object name). var a = arguments; this._outerElmId = (a.length>1) ? a[1] : a[0]; /** * ID is initialized in the constuctor. Represents the possition of 'this' in the global array 'Bs_Objects' * Use: This is the only way we can reference ourselfs in an evaluation string * E.g. str = "var me = Bs_Objects["+this._id+"];"; * str += "me.foo();" * eval(str); * * @access private * @var integer */ this._id; /** * Unique Object ID is initialized in the constuctor. * Bassed on this._id. Can be used in genarate JS-code as ID. Is set together * from the classname + this._id (see constructor code at the bottom). * * @access private * @var string */ this._objectId; /** * */ this.tabs = new Array; /** * default tab index, 0-n. * @access public * @var integer defaultTab */ this.defaultTab = 0; /** * Currently active Tab index * @access private * @var integer _activeTabIdx */ this._activeTabIdx = 0; /** * The event to call if set and tab is changed by click or by a clall to switchTo(). * @access private * @var integer _onTabSelectEvent */ this._onTabSelectEvent /** * how the tabs should be drawn. * * 'css' => using css only. default. see examples 1 and 2. * 'img' => using border images. more work, more fun. check example 3. * * @access public * @var string drawStyle * @since bs-4.6 */ this.drawStyle = 'css'; /** * image path, used if drawStyle = 'img'. * @access public * @var string imgPath */ this.imgPath; /** * image border size in pixels, used if drawStyle = 'img'. * @access public * @var string imgBorderSize */ this.imgBorderSize; /** * the pseudo constructor. * @access private * @return void */ this._constructor = function() { // Put this instance into the global object instance list this._id = Bs_Objects.length; Bs_Objects[this._id] = this; this._objectId = "Bs_TabSet_"+this._id; } /** * @access public * @param string caption * @param element container * @param mixed onTabSelect (callback like in this.onTabSelect() but only for this tab.) * @return void */ this.addTab = function(caption, container, onTabSelect) { if (typeof(caption) == 'object') { var o = caption; } else { var o = new Object; o.caption = caption; if ((typeof(container) != 'undefined') && (container != null) && (container)) { if (typeof(container) == 'string') { o.container = document.getElementById(container); o.id = container; } else { o.container = container; o.id = container.id } } if (typeof(onTabSelect) != 'undefined') { o.onTabSelect = onTabSelect; } } o.tabIdx = this.tabs.length; this.tabs[o.tabIdx] = o; } /** * @access public (don't think you need that) * @return string * @see this.draw() */ this.render = function() { var ret = new Array; //ret[ret.length] = '
'; ret[ret.length] = '
'; if (this.drawStyle == 'img') { var contentDiv = document.getElementById(this._outerElmId + '_content'); if (contentDiv) { var preHtml = ''; preHtml += ''; preHtml += ''; preHtml += ''; preHtml += ''; postHtml += ''; postHtml += ''; postHtml += ''; postHtml += ''; postHtml += ''; postHtml += ''; postHtml += ''; postHtml += '
'; var postHtml = ''; postHtml += '
'; contentDiv.innerHTML = preHtml + contentDiv.innerHTML + postHtml; //have to re-set the elements: for (var i=0; i'; ret[ret.length] = ''; ret[ret.length] = ''; for (var i=0; i'; ret[ret.length] = ''; if (i == (this.tabs.length -1)) { //last one: ret[ret.length] = ''; } else { ret[ret.length] = ''; } ret[ret.length] = ''; ret[ret.length] = ''; ret[ret.length] = ''; ret[ret.length] = '
'; ret[ret.length] = '' + this.tabs[i].caption + ''; ret[ret.length] = '
'; ret[ret.length] = ''; ret[ret.length] = ''; ret[ret.length] = ''; ret[ret.length] = ''; ret[ret.length] = ''; ret[ret.length] = ''; ret[ret.length] = ''; } ret[ret.length] = ''; ret[ret.length] = ''; ret[ret.length] = ''; } else { // 'css' ret[ret.length] = '
'; for (var i=0; i' + this.tabs[i].caption + '
'; } } ret[ret.length] = '
'; //ret[ret.length] = ''; return ret.join(''); } /** * @access public * @return void */ this.draw = function() { var elem = document.getElementById(this._outerElmId + '_tabs'); if (elem) elem.innerHTML = this.render(); //after render stuff: if (this.drawStyle == 'img') { var tdLine = document.getElementById(this._objectId + '_tdLineBottom'); var outerTable = document.getElementById(this._objectId + '_outerTable'); var tds = outerTable.firstChild.firstChild.childNodes; var allTdWidth = 0; for (var i=0; i