Документ взят из кэша поисковой машины. Адрес оригинального документа : http://xray.sai.msu.ru/~mystery/html/layers/index.jsp.html
Дата изменения: Wed May 21 18:43:15 2003
Дата индексирования: Tue Oct 2 14:12:20 2012
Кодировка:

Поисковые слова: п п п п п п п п п п п п п
DHTML Kitchen: Tabs
click to select
Overview Compat Ingredients HTML CSS Images TabParams switchTabs Navigation
Tabs

Tabs

Overview

This document explains how to add a degradable tabbed panel system to your page.

Features

Click tab1 » show content1; Click tab2 » show content2; et c. Tabs are easy and fun to use.

The tabs script has a rich API. API documentation can be found here: (no documentation yet).

Since tabs can be images or spans, there are two demos, one with images, and one without.

Tabs

Compatibility

Compatibility Chart
Browser & Platform Compatibility Contributor
IE6 100% Garrett Smith
IE5 Win 100% Martijn
IE5 Mac 100% Garrett Smith
Mozilla Win 110% Martijn
Konqueror 3.0 Doesn't Work Alberto Sáez Torres
Konqueror 3.1 Works Mark Swanson
Mozilla Linux 110% Alberto Sáez Torres
Mozilla Mac 110% Garrett Smith
Opera 7 Works Martijn
Opera 6 Win 90% -contents change but tab appearance is constant Martijn
Opera 5-6 Mac 90% - Same as Opera 6 Win Garrett Smith
Netscape 4 Degrades
Tabs

Ingredients

Tabs

Setting up the HTML

There is a tabs container div with the className tabs. The individual tabs are inside the tabs container.

For each tab, there is a corresponding content div. Content divs are siblings to the tabs container div.

select text CSS Based Tabs select text Image Based Tabs
select text

Each tab contains the className "tab" and the first tab has the className "tab tabActive".

The id of each tab starts with "tab".

Each content div has a corresponding id to a tab. The id of each content matches the id of it's tab, but replaces "tab" with "content".

Function tabInit() will automatically find a content div that corresponds to a tab. For a tab with the id "tabSomeCategory", you must have a content div with the id of "contentSomeCategory," with matching case and spelling.

Tabs

The CSS

The appearance of an span tab is customized through css. The tabActive class represents a tab that has been selected. This tab will not have a hover. The tabHover class represents an inactive tab that is moused over. It is also possible to use different background-images for .tab .tabActive, and .tabHover, but keep in mind that they will be the same image for each tab.

Cross-browser font-size

  

Use a line-height for the tabs.

The height of an inline-box, such as a span is determined by the line-height. If line-height is not explicitly set, this is taken from the font-size.

Leading is the space above and below the letters and, in a way, acts like a margin for the letters by preventing them from colliding vertically. Half-leading is 1/2 of the leading.

Windows puts the the half-leading on the inside of the line box and reduces the font-size by the half-leading (usu 1px).

Macintosh, on the other hand, puts the half-leading on the outside of the line box. The font-size is not decimated.

To acheive a cross-browser line-height, it is necessary to use an explicit line-height. Doing so will control the height of the line box that the tabs use and will ensure that they do not appear too high or too low in some browsers.

Tabs

Customization with img Tags

If img tags are used, two additional attributes are to be used: activesrc and hoversrc. The activesrc attribute represents the source of the image that is a tab in its active state. The hoversrc is what the tab will look like when it is moused-over.

The activesrc and hoversrc must be unique for each tab, for example:

 
<img id="tab1" class="tab tabActive"
      src="img/tab1.gif"
      hoversrc="img/tab1o.gif"
      activesrc="img/tab1a.gif"
      alt="Products" width="135" height="20" />

<img id="tab2" class="tab"
      src="img/tab2.gif"
      hoversrc="img/tab2o.gif"
      activesrc="img/tab2a.gif"
      alt="Our Guarantee" width="135" height="20" />
 

With img tags, the customization is done in a graphics program such as Adobe Photoshop™. You won't need many of the property-value pairs for the selectors .tab .tabActive, and .tabHover —leaving in some rules (background-color, for example) may cause a problem.

Basic Guidlines for Making Image Tabs

  1. All of the tabs should have the same height.
  2. The images for activesrc and hoversrc should have the same dimensions (height and width) as the default image (the image in the src attribute).

Note on Validity

   The image tags have a hoversrc and an activesrc. This is not in accordance with any of the w3c dtd's, and is not valid. It is still well-formed markup, though. Since IE and Mozilla do not validate against the DTD, there is harm in doing this.

It is possible to make these attributes valid through modules. Try the w3c's modules tutorial.
Tabs

Modified

[11-27-02] TabParams are now in camelCase, not CONSTANT_STYLE.
[12-09-02] tabTagName added. details below.

TabParams

You have to define your own TabParams and put it in your document. TabParams defines the behavior of the tabs.

		
 /** TabParams
 * useClone         - boolean. if true, uses a clone of the tabs beneath the contents.
 * alwaysShowClone  - boolean. if true, the clone will never be hidden.
 * eventType        - string. event to activate a tab. 
 *                  one of: "click" | "mouseover" | "mousedown" | "mouseup".
 * tabTagName       - string. "span" | "img" | "*" use "*" for both span and img tabs.
 */

TabParams = {     
    useClone        : true,
    alwaysShowClone : false,
    eventType       : "click",
    tabTagName      : "span"
};
		

Performance Tips

The following tips will decrease initialization time:

Tabs

Tab Navigation

switchTabs

switchTabs() allows you to simulate a tab click event. switchTabs calls depressTab, which passes activeTab to the resetTab function.

 	
switchTabs(sTabId, event, bReturn)

Parameters: 
    sTabId  ::   String  -an id of a tab
    event   ::   Object  -event (the word event represents this object)
    bReturn ::   boolean -the return value (true | false).

 	

Since this function is likely to cause an Error, a try catch block is used.


<!-- focus to content2 for browsers that don't support tab system -->
<a 
  href="#content2" 
  onclick="return switchTabs('tab2',event,false)">see Tab 2</a>
  	

If switchTabs is called with a tab id that does not exist in the document (e.g. switchTabs("tab9");), an error is produced but it is caught in a catch block. The tab will not switch.

To cancel the href action, call return switchTabs('tab2, event, false); .
To switch to a tab and not cancel the a tag's href, switchTabs('tab2, event, true); (omitted return statement optional).
To switch to a tab and scroll the window to 0,0, switchTabs('tab2, event); .

Tabs

Navigating Directly to a Tab

Using the window.location.hash String

To bring user focus to an element within any tab, use a hash in the location, just like you normally would. The hash value can be a content div's id or the id of an element within any content. The script will figure out where the element is and switch to the correct tab. The hash feature is part of HTML 2.0, so it degrades to non-supporting browsers well.

		
<a href="http://DHTMLkitchen.com/dhtml/ui/tabs/index.jsp#content4"></a>