zptabs-core.js

zapatec suite 最新版 20070204,非常棒的ajax widgets 工具包

 */
Zapatec.Tab.prototype.setPaneContent = function(content, type) {
	var self = this;

	var paneContent = null;
	var paneContentType = null;

	if (content) {
		paneContent = content;
		paneContentType = type;
	}
	else if (this.config.url && 0 < this.config.url.length) {
		paneContent = this.config.url;
		paneContentType = 'html/url';
	}
	else {
		paneContent = this.config.content;
		paneContentType = this.config.contentType;
	}

	if (paneContent) {

		this.config.content = content;
		this.config.contentType = type;

		// If provided content is an URL
		if (paneContentType == "html/url") {
			this.config.url = paneContent;
			this.lastUrlSet = paneContent;
		}

		this.container.setPaneContent(paneContent, paneContentType);
	}
}

/**
 * Shows/hides a tab
 *
 * @param {boolean} isVisible HTML fragment.
 * @private
 */
Zapatec.Tab.prototype.setVisible = function(isVisible) {
	this.config.visible = isVisible;

	if (isVisible) {
		this.linkNode.style.display = 'block';
	}
	else {
		this.linkNode.style.display = 'none';
	}
}

/**
 * Removes a specified tab from some tabs object
 *
 * @private
 * @param {number} tabsId id of the tabs object 
 * @param {string} id tab id
 */
Zapatec.Tab.CloseTab = function(tabsId, id) {

	// Get tabs object by id
	var objTabs = Zapatec.Widget.getWidgetById(tabsId);

	var objTab = objTabs.getTab(id);
	if (objTab.config.closeAction == 'close') {
		// Remove tab
		objTabs.removeTab(id);
	}
	else if (objTab.config.closeAction == 'hide') {
		// Determine if we are removing the currently active tab
		var isRemovingCurrent = objTab.index == objTabs.currentIndex;

		// if we are removing the currently active tab
		if (isRemovingCurrent) {
			// Get previous visible tab
			var previousTab = objTabs.getPreviousTab(true, objTabs.currentIndex);
			if (previousTab) {
				objTabs.changeTab(previousTab.id);
			}
			else {
				// Get next visible tab
				var nextTab = objTabs.getNextTab(true, objTabs.currentIndex);
				if (nextTab) {
					objTabs.changeTab(nextTab.id);
				}
			}
		}

		objTab.setVisible(false);
	}

	objTabs.fireEvent('tabOnClose', id);
}




/**
 * Zapatec.Tabs constructor. Creates a new tabs object with given
 * parameters.
 *
 * @constructor
 * @extends Zapatec.Widget
 * @param {object} objArgs Tab configuration
 *
 * Constructor recognizes the following properties of the config object
 * \code
 *	property name			| description
 *-------------------------------------------------------------------------------------------------
 *	tabBar		| [object or string] Element or id of element that will hold
 *            | the tab bar.
 *	tabs			| [object or string] Element or id of element that will hold the
 *            | all content panes. This element can also hold tabs content.
 *	tabType	  | [string] "div" or "iframe" depending on what kind of pane is
 *            | needed for the tabs
 *  overflow | [string] Tab content overflow html attribute. Default: null
 *	onInit		| [function] Called when tabs are created. Users can perform
 *            | problem-specific initializations at this stage. No arguments.
 *	onTabChange		| [function] Called after the tab was changed. Receives
 *            |  following object:
 *            |  {
 *            |  oldTabId: [string] id of the old tab,
 *            |  newTabId: [string] id of the new tab
 *            |  }
 *	onBeforeTabChange		| [function] Called when the tab is about to be changed,
 *            | just before. Receives following object:
 *            | {
 *            |  oldTabId: [string] id of the old tab,
 *            |  newTabId: [string] id of the new tab
 *            | }
 *            | Should return boolean. If returns other than "true", tab will
 *            | not be changed.
 *	ignoreUrl		| [boolean] If true, "#tabsId=tabId" part of URL is ignored and
 *            | always the first tab is opened after page load.
 *  changeUrl | [boolean] Specifies if browser location hash is to be changed
 *          | on every tab change to reflect the currently active tab.
 *	tab2tab		| [boolean] If true, pressing Tab key on the keyboard will navigate
 *            | to next tab. If false, Tab key will also navigate through
 *            | anchors and form fields inside tab. Default: false.
 *	scrollMultiple | [boolean] If true, scrolls the tabs one 'page' at a time.
 *            | Otherwise, scrolls singly.
 *	iframeContent | [boolean] Marks the pane content as being an <iframe>.
 *            | Deprecated. Use tabType instead.
 *	windowOnLoad | [function] If set, this is run on window load.
 *	showEffect | [string or array] What effects to apply to tab content when a
 *            | tab is about to be visible.
 *	showEffectSpeed | [number] Tab show animation speed. From 1(low speed) to
 *            | 100(high speed)
 *  mouseOverChangesTab | [boolean] specifies if tabs are to be changed by
 *            | merely hoveing over them with the mouse. Default is false.
 *  refreshOnTabChange | [boolean] When this option is set to true tab url
 *           | is re-fetched on every tab change. Default is false.
 *  shouldLoadOnInit | [boolean] When this option is set to true this tab url
 *          | will be loaded as soon as tab is created. Default is false.
 */
Zapatec.Tabs = function(objArgs) {
	if (arguments.length == 0) {
		objArgs = {};
	}

	Zapatec.Tabs.SUPERconstructor.call(this, objArgs);
};

/**
 * Unique static id of the widget class. Gives ability for Zapatec#inherit to
 * determine and store path to this file correctly when it is included using
 * Zapatec#include. When this file is included using Zapatec#include or path
 * to this file is gotten using Zapatec#getPath, this value must be specified
 * as script id.
 * @private
 */
Zapatec.Tabs.id = 'Zapatec.Tabs';

// Inherit Widget
Zapatec.inherit(Zapatec.Tabs, Zapatec.Widget);

/**
 * Initializes object.
 *
 * @param {object} objArgs User configuration
 */
Zapatec.Tabs.prototype.init = function(objArgs) {

	// Call init method of superclass
	Zapatec.Tabs.SUPERclass.init.call(this, objArgs);

	this.createTabs();

	this.initTabBar();
};

/**
 * Creates tabs DOM elements
 * @private
 */
Zapatec.Tabs.prototype.createTabs = function() {
	// To maintain by id
	this.createProperty(this, 'tabs', {});
	// To maintain by index
	this.createProperty(this, 'tabsArray', []);

	if (null == this.tabsThemeSuffix) {
		this.tabsThemeSuffix = 'Content';
	}

	// Apply theme
	Zapatec.Utils.addClass(this.config.tabs, this.getClassName({
		prefix: 'zpTabs',
		suffix: this.tabsThemeSuffix
	}));

	// Call parent method to load data from the specified source
	this.loadData();

	// Index of the current tab
	this.currentIndex = -1;
	// onInit
	if (typeof this.config.onInit == 'function') {
		this.config.onInit();
	}

	// Decide which tab to activate initially
	if (this.tabsArray.length) {
		var strId = this.getInitialActiveTabId();
		if (-1 != strId) {
			this.changeTab(strId);
		}
	}

	// If windowOnLoad is set, run it
	if (this.config.windowOnLoad != null)
	{
		this.config.windowOnLoad();
	}

	// If tab bar is not disabled
	if (true != this.noTabBar) {
		// Make tabs visible
		this.addEventListener('loadThemeEnd', function() {
			this.config.tabBar.style.display = 'block';
		});
	}
}

/**
 * Configures the widget. Gets called from init and reconfigure methods of
 * superclass.
 *
 * @private
 * @param {object} objArgs User configuration
 */
Zapatec.Tabs.prototype.configure = function(objArgs) {
	// Define config options
	this.defineConfigOption('tabBar', null);
	this.defineConfigOption('tabs', null);
	this.defineConfigOption('onInit', null);
	this.defineConfigOption('onTabChange', null);
	this.defineConfigOption('onBeforeTabChange', null);

	// If location hash is to be parsed on page initialization
	this.defineConfigOption('ignoreUrl', false);
	// If browser url needs to be changed on every tab change
	this.defineConfigOption('changeUrl', true);

	this.defineConfigOption('tab2tab', false);
	this.defineConfigOption('scrollMultiple', null);

	//should we show content in IFRAME Pane or just simple div Pane
	this.defineConfigOption('iframeContent', null);
	this.defineConfigOption('tabType', 'div');

	this.defineConfigOption('windowOnLoad', null);

	this.defineConfigOption('scrolls', false);
	this.defineConfigOption('noMoreTabsLeft', false);
	this.defineConfigOption('lastIndexLeft', 0);
	this.defineConfigOption('noMoreTabsRight', true);
	this.defineConfigOption('lastIndexRight', null);

	this.defineConfigOption('showEffect', null);
	this.defineConfigOption('showEffectSpeed', null);

	// Determine if tabs are to be changed on mouse over
	this.defineConfigOption('mouseOverChangesTab', false);

	// Determine if tabs are to be re-fetched every time they are activated
	this.defineConfigOption('refreshOnTabChange', false);

	// Determine tab content overflow style attribute that is default for every tab
	this.defineConfigOption('overflow', null);

	// Determine if tab content is to be fetched on tab creation
	this.defineConfigOption('shouldLoadOnInit', false);

	// Specifies if tab can be closed using an x button that is visible
	this.defineConfigOption('closable', false);
	// Specifies what happens then the x button is clicked
	this.defineConfigOption('closeAction', 'close');

	// Determine tab to activate upon initialization
	this.defineConfigOption('activeTabId', null);

	this.defineConfigOption('langId', Zapatec.Tabs.id);
	this.defineConfigOption('lang', "eng");

	// Determine scroll type
	if (this.config.scroll == null)
	{
		this.config.scrollMultiple = false;
	}
	else if (this.config.scrollMultiple != true && this.config.scrollMultiple != false)
	{
		this.config.scrollMultiple = false;
	}

	// Call parent method
	Zapatec.Tabs.SUPERclass.configure.call(this, objArgs);

	// If tab bar is not disabled
	if (true != this.noTabBar) {
		this.config.tabBar = Zapatec.Widget.getElementById(this.config.tabBar);
		if (!this.config.tabBar) {
			this.initLang();
			Zapatec.Log({description: this.getMessage("unknownTabBarError")});
			return;
		}
	}

	if ("string" == typeof this.config.tabs) {
		this.config.tabs = Zapatec.Widget.getElementById(this.config.tabs);
	}

	if (!this.config.tabs) {
		this.initLang();
		Zapatec.Log({description: this.getMessage("unknownTabsError")});
		return;
	}

	// Check tabType
	if (typeof this.config.tabType == "string") {
		this.config.tabType = this.config.tabType.toLowerCase();
	}
	if (this.config.tabType != "div" && objArgs.tabType != "iframe")
	{
		this.config.tabType = "div";
	}

	if (true == this.config.iframeContent) {
		this.config.tabType = "iframe";
	}
};

/**
 * Initializes the tab bar based on tabBar config property.
 */
Zapatec.Tabs.prototype.initTabBar = function() {
	// If tab bar is disabled
	if (true == this.noTabBar) {
		return;
	}

	// Apply theme
	Zapatec.Utils.addClass(this.config.tabBar, this.getClassName({
		prefix: 'zpTabs'
	}));

	// Determine width of content of tab bar
	var _tabBarContentWidth = 0;
	var items = this.config.tabBar.childNodes;
	var tmp = '';

	for (var i = 0; i < items.length; i++) {
		if (items[i].nodeType != 1) {
			continue;
		}

		// Must "cast" this to an absolutely positioned element for IE to get the correct width
		tmp = items[i].style.position;
		items[i].style.position = 'absolute';

		// Store real width in element for future use
		// Opera reports the widths of elements outside the content tab to have width of -1.
		// For this reason, hide elements you've recorded to allow other elements to come into viewport
		// Get the display type for all tabs, default to 'inline'
		items[i].originalDisplayType = items[i].style.display != '' ? items[i].style.display : 'block';
		_tabBarContentWidth += items[i].offsetWidth;
		items[i].realWidth = items[i].offsetWidth;
		items[i].style.display = 'none';

		// "Cast" back to original positioning
		items[i].style.position = tmp;

		// Capture tabs index in the tab bar
		items[i].arrayPosition = i;
	}

	// Restore display to all tabs
	for (var i = 0; i < items.length; i++)
	{
		if (items[i].nodeType != 1) {
			continue;
		}

		items[i].style.display = items[i].originalDisplayType;
	}

	// If the content width of the tab bar exceeds the current width of the tab bar...
	var _tabBarWidth = this.config.tabBar.offsetWidth;
	if (_tabBarContentWidth > _tabBarWidth)
	{
		this.config.scrolls = true;

		// Find the first child node within the tab bar, which extends beyond tab bar's border
		var tmp = 0;
		var i = 0;
		while (tmp < _tabBarWidth) tmp += items[i++].realWidth;

		// Scroll page at a time
		//if(this.config.scrollMultiple)
		//{
		i--;
		//}

		// Hide all elements of tab bar, which extend beyond tab bar's border
		for (i; i < items.length; i++)
		{
			items[i].style.display = 'none';
		}

		// Display scrollies for tabs
		var _leftScrolly = Zapatec.Utils.createElement('div');
		_leftScrolly.innerHTML = '&lt;';
		var _rightScrolly = Zapatec.Utils.createElement('div');
		_rightScrolly.innerHTML = '&gt;';

		// Attach scrolling functions
		var self = this;
		_rightScrolly.onclick = (this.config.scrollMultiple) ? function () {
			self.scrollTabsLeft(true)
		} : function () {
			self.scrollOneTabLeft(true)
		};
		_leftScrolly.onclick = (this.config.scrollMultiple) ? function () {
			self.scrollTabsRight(true)
		} : function () {
			self.scrollOneTabRight(true)
		};

		// Make mouseover effects for the scrolly buttons
		var mouseoverFunc = function ()
		{
			this.style.color = 'black';
		}
		_leftScrolly.onmouseover = mouseoverFunc;
		_rightScrolly.onmouseover = mouseoverFunc;

		var mouseoutFunc = function ()
		{
			this.style.color = '#aaa';
		}
		_leftScrolly.onmouseout = mouseoutFunc;
		_rightScrolly.onmouseout = mouseoutFunc;

		var _scrollyContainer = Zapatec.Utils.createElement('div');
		_scrollyContainer.className = 'zpTabsScrolly';
		_scrollyContainer.appendChild(_leftScrolly);
		_scrollyContainer.appendChild(_rightScrolly);

		if (this.config.scrollMultiple)
		{
			this.config.tabBar.parentNode.insertBefore(_scrollyContainer,
							this.config.tabBar.nextSibling);
		}
	}

}

/**
 * Adds a tab link to the tab bar
 *
 * @param {object} objTab object tab.
 */
Zapatec.Tabs.prototype.addToTabBar = function(objTab) {