📄 tabpane.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Tab Pane (WebFX)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="local/webfxlayout.js"></script>
<script type="text/javascript" src="local/webfxapi.js"></script>
<script type="text/javascript" src="js/tabpane.js"></script>
<link type="text/css" rel="StyleSheet" href="css/tab.webfx.css" />
<style type="text/css">
.dynamic-tab-pane-control .tab-page {
height: 500px;
width: 558px;
overflow: auto;
}
.dynamic-tab-pane-control .tab-page .dynamic-tab-pane-control .tab-page {
height: 100px;
}
form {
margin: 0;
padding: 0;
}
/* over ride styles from webfxlayout */
.dynamic-tab-pane-control.tab-pane {
margin: 10px;
width: 580px;
}
.dynamic-tab-pane-control h2 {
text-align: center;
width: auto;
}
.dynamic-tab-pane-control h2 a {
display: inline;
width: auto;
}
.dynamic-tab-pane-control a:hover {
background: transparent;
}
.dynamic-tab-pane-control .tab-page h2 {
text-align: left;
}
</style>
<script type="text/javascript">
//<![CDATA[
var tabPane;
function showArticleTab( sName ) {
if (typeof tabPane != "undefined" ) {
switch ( sName ) {
case "main":
tabPane.setSelectedIndex( 0 );
break;
case "usage":
tabPane.setSelectedIndex( 1 );
break;
case "api":
tabPane.setSelectedIndex( 2 );
break;
case "implementation":
tabPane.setSelectedIndex( 3 );
break;
case "looknfeel":
tabPane.setSelectedIndex( 4 );
break;
}
}
}
// help tips
htDom = "Document Object Model 1 is a standard developed by the W3C.<br />" +
"<a href=\"http://www.w3.org/DOM/\" target=\"_blank\">http://www.w3.org/DOM/</a>";
//]]>
</script>
</head>
<body>
<!-- WebFX Layout Include -->
<script type="text/javascript">
var articleMenu= new WebFXMenu;
articleMenu.left = 384;
articleMenu.top = 86;
articleMenu.width = 140;
articleMenu.add(new WebFXMenuItem("Tab Pane", "javascript:showArticleTab( \"main\" )"));
articleMenu.add(new WebFXMenuItem("Usage", "javascript:showArticleTab( \"usage\" )"));
articleMenu.add(new WebFXMenuItem("API", "javascript:showArticleTab( \"api\" )"));
articleMenu.add(new WebFXMenuItem("Implementation", "javascript:showArticleTab( \"implementation\" )"));
articleMenu.add(new WebFXMenuItem("Look & Feel", "javascript:showArticleTab( \"looknfeel\" )"));
articleMenu.add(new WebFXMenuItem("Demo", "demo.html"));
articleMenu.add(new WebFXMenuSeparator);
articleMenu.add(new WebFXMenuItem("Download", "http://webfx.eae.net/download/tabpane102.zip"));
webfxMenuBar.add(new WebFXMenuButton("Article Menu", null, null, articleMenu));
webfxLayout.writeTitle("Tab Pane");
webfxLayout.writeMenu();
webfxLayout.writeDesignedByEdger();
</script>
<div class="webfx-main-body">
<!-- end WebFX Layout Includes -->
<p>
<span class="date">2002-02-17</span>: Original version posted.<br />
<span class="date">2003-03-03</span>: 1.02 - Fixes IE memory leakage.<br/>
<span class="date">2006-05-26</span>: Changed license to Apache Software License 2.0.<br />
</p>
<!-- begin tab pane -->
<div class="tab-pane" id="article-tab">
<script type="text/javascript">
tabPane = new WebFXTabPane( document.getElementById( "article-tab" ), true );
</script>
<!-- begin intro page -->
<div class="tab-page" id="intro-page">
<h2 class="tab">Introduction</h2>
<script type="text/javascript">
tabPane.addTabPage( document.getElementById( "intro-page" ) );
</script>
<p>You might remember that we used to have a pretty good tab strip control
here at WebFX a long time ago. This control was removed when we redesigned
the site with the argument that we should fix it to work in Mozilla. Now,
more than three years later we finally got down and created a tab pane
control that we think is a worthy replacement.</p>
<p>This Tab Pane control is fairly similar to the tab system Tim Scarfe
created for <a href="http://www.developer-x.com">developer-x.com</a> and
the basic idea is the same. That idea is to be able to use a normal XHTML
document structure and if the browser supports
<a class="helpLink" href="?" onclick="showHelpTip(event, htDom); return false">DOM level 1</a>
then the structure of the elements is slightly adjusted and a the
<code>className</code> is changed for the tab pane container so that the
css rules specially defined for the tab are applied.</p>
<p>The Tab Pane has support for persistence using cookies so that you can
navigate between pages without having to reselect the selected tab for
all your tab panes in your document. The look and feel is entirely
decided by CSS so it is fairly easy to create the look and feel you need
for your web application. As of this writing there are three different
styles available; Luna, Windows Classic and the WebFX look and feel that
this pane is currently using. See the <a href="demo.html">demo</a> page
for the look and feel of the other two.</p>
</div>
<!-- end intro page -->
<!-- begin usage page -->
<div class="tab-page" id="usage-page">
<h2 class="tab">Usage</h2>
<script type="text/javascript">
tabPane.addTabPage( document.getElementById( "usage-page" ) );
</script>
<h3>Include the Files</h3>
<p>To use the tab pane you should include two files. One JavaScript file
and on css file.</p>
<pre>
<script type="text/javascript" src="<a href="js/tabpane.js">js/tabpane.js</a>"></script>
<link type="text/css" rel="StyleSheet" href="<a href="css/tab.webfx.css">css/tab.webfx.css</a>" />
</pre>
<h3>The XHTML Structure</h3>
<p>The basic structure for the tab pane consists of an element with the class name
<code>tab-pane</code> that in turn contains elements with the class names
<code>tab-page</code>. The tab page element should contain <strong>one</strong>
element with the class name <code>tab</code>. This last one should preferably be
a header of some kind in case the browser does not support DOM1 and therefore will
leave the structure intact. The other two elements can be almost anything but a
<code>div</code> element is good because it usually does not change the rendering.</p>
<p>Below is the code for a simple tab pane with the tab pages.</p>
<pre>
<div class="tab-pane" id="tab-pane-1">
<div class="tab-page">
<h2 class="tab">General</h2>
This is text of tab 1. This is text of tab 1.
This is text of tab 1. This is text of tab 1.
</div>
<div class="tab-page">
<h2 class="tab">Privacy</h2>
This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2.
</div>
</div>
</pre>
<p>Notice that the <code>id</code> is not needed unless two or more tab panes
are present in the same document and you are using the persistence feature.
</p>
<h3>Initialization</h3>
<p>The code above is a complete working tab pane. You do not have to add any more
js code but there are a few good reasons why you would want to do this. If no
js code is added all the tab panes in the document are initialized when the
document is loaded. If you have lots of text and/or images this will take quite
some time and the layout of the page will feel <em>jerky</em>. A better way is
to call the function <code>setupAllTabs</code> after all your XHTML has been defined.
This works much better but if you have a lot of text this is not optional
either because the browser might render some of the text before the entire tab
structure is available.</p>
<pre>
...
</div>
</div>
<!-- tab pane closed -->
<script type="text/javascript">
setupAllTabs();
</script>
</pre>
<p>The best way to go is to create as much as possible as soon as possible.
This involves adding calls to js after the tab pane is opened and as soon
as every page is opened.</p>
<pre>
<div class="tab-pane" id="tab-pane-1">
<script type="text/javascript">
var tabPane1 = new WebFXTabPane( document.getElementById( "tab-pane-1" ) );
</script>
<div class="tab-page" id="tab-page-1">
<h2 class="tab">General</h2>
<script type="text/javascript">
tabPane1.addTabPage( document.getElementById( "tab-page-1" ) );
</script>
This is text of tab 1. This is text of tab 1.
This is text of tab 1. This is text of tab 1.
</div>
<div class="tab-page" id="tab-page-2">
<h2 class="tab">Privacy</h2>
<script type="text/javascript">
tabPane1.addTabPage( document.getElementById( "tab-page-2" ) );
</script>
This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2.
</div>
</div>
</pre>
<p>The code for this is, as you can see, not half as nice and you should
decide from time to time if you really need this. In most web applications
(especially intranet apps) this is not needed because the amount of data inside
each tab page is limited (or added later).</p>
<p>One thing to note about this last method is that some browser have trouble
changing the content model during the page load (noticeably Konqueror).</p>
</div>
<!-- end usage tab -->
<!-- begin api tab -->
<div class="tab-page" id="api-page">
<h2 class="tab">API</h2>
<script type="text/javascript">
tabPane.addTabPage( document.getElementById( "api-page" ) );
</script>
<!--
Generated using api.xsl version 20020217
-->
<!-- Start main output -->
<h2>WebFXTabPane</h2>
<p>
This is the class representing a tab pane.
</p>
<h3>Syntax</h3>
<p><code>
new WebFXTabPane(<span class="methodArgument">oElement</span> [, <span class="methodArgument">bUseCookie</span>])</code></p>
<h3>Parameters</h3>
<table>
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Descripton</td>
</tr>
</thead>
<tbody>
<tr>
<td><code>oElement</code></td>
<td><code>HTMLElement</code></td>
<td>The html element that represents the tab pane</td>
</tr>
<tr>
<td><code>bUseCookie</code></td>
<td><code>Boolean</code></td>
<td>
<span class="optional">Optional.</span>
If this is set to true then the selected tab is persisted.
<span class="defaultSentence">
The default value is <code>true</code>.
</span>
</td>
</tr>
</tbody>
</table>
<h3>Static Methods</h3>
<table>
<thead>
<tr>
<td>Name</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">setCookie</a><div class="methodContainer">
<div class="methodInfo">
<h4>Syntax</h4>
<p><code><span class="object">object</span>.setCookie(<span class="methodArgument">sName</span>, <span class="methodArgument">sValue</span> [, <span class="methodArgument">nDays</span>])</code></p>
<h4>Arguments</h4>
<table>
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Descripton</td>
</tr>
</thead>
<tbody>
<tr>
<td><code>sName</code></td>
<td><code>String</code></td>
<td>The name of the cookie</td>
</tr>
<tr>
<td><code>sValue</code></td>
<td><code>String</code></td>
<td>The value of the cookie</td>
</tr>
<tr>
<td><code>nDays</code></td>
<td><code>Number</code></td>
<td>
<span class="optional">Optional.</span>
The number of days to store the cookie
</td>
</tr>
</tbody>
</table>
<h4>Return Type</h4>
<p><code>void</code></p>
</div></div>
</td>
<td>Sets a cookie</td>
</tr>
<tr>
<td>
<a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">getCookie</a><div class="methodContainer">
<div class="methodInfo">
<h4>Syntax</h4>
<p><code><span class="object">object</span>.getCookie(<span class="methodArgument">sName</span>)</code></p>
<h4>Arguments</h4>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -