📄 tabbedpane.jsp
字号:
<%@ taglib uri="/WEB-INF/tabbedpanetag.tld" prefix="tabs" %>
<html>
<head>
<link rel="stylesheet" href="/prizetagsdemo/stylesheet.css" type="text/css">
<title>Tabbed Pane Tag</title>
</head>
<body>
<style type="text/css">
.activeTab {
Font-Family: Arial;
Font-Size : 12px;
Font-Weight: Bold;
Background-Color: #FFFFFF;
Border-Top: 1px solid #000000;
Border-Left: 1px solid #000000;
Border-Right: 1px solid #000000;
}
.inactiveTab {
Font-Family: Arial;
Font-Size : 12px;
Font-Weight: Boldx;
Background-Color: #EEEEEE;
Border : 1px solid #000000;
}
.tabContent {
Font-Family: Arial;
Font-Size : 12px;
Font-Weight: Boldx;
Background-Color: #FFFFFF;
Border-Left: 1px solid #000000;
Border-Right: 1px solid #000000;
Border-Bottom: 1px solid #000000;
}
a {
Text-Decoration: None;
}
</style>
<h2>Tabbed Pane Demo</h2>
<br/>
Any part of the HTML can be customized. It is written in between the Tabbed Pane Tags, so
it is easy to change. You can change the colors and text of the tabs, and you can use images
for the titles if you want.
<br/><br/>
<br/><br/>
<!--the outer table for the demo. Not used to generate tabs. Only to organize demo page.-->
<table>
<tr><td valign="top">
<tabs:tabbedPane defaultTab="1" >
<table cellspacing="0" cellpadding="5">
<tr>
<td class="<tabs:tab tabId="1" active="activeTab" inactive="inactiveTab"/>"><a href="tabbedPane.jsp?tab=1">Tab l</a></td>
<td class="<tabs:tab tabId="2" active="activeTab" inactive="inactiveTab"/>"><a href="tabbedPane.jsp?tab=2">Tab 2</a></td>
<td class="<tabs:tab tabId="3" active="activeTab" inactive="inactiveTab"/>"><a href="tabbedPane.jsp?tab=3">Tab 3</a></td>
<td class="<tabs:tab tabId="4" active="activeTab" inactive="inactiveTab"/>"><a href="tabbedPane.jsp?tab=4">Tab 4</a></td>
<td class="<tabs:tab tabId="5" active="activeTab" inactive="inactiveTab"/>"><a href="tabbedPane.jsp?tab=5">Tab 5</a></td>
</tr>
<tr><td colspan="7" class="tabContent"><br/><br/>
<tabs:tabContent tabId="1">Tab 1 Content</tabs:tabContent>
<tabs:tabContent tabId="2">Tab 2 Content</tabs:tabContent>
<tabs:tabContent tabId="3">Tab 3 Content</tabs:tabContent>
<tabs:tabContent tabId="4">Tab 4 Content</tabs:tabContent>
<tabs:tabContent tabId="5">Tab 5 Content</tabs:tabContent>
</td></tr>
</table>
</tabs:tabbedPane><br/>
Tabbed Pane using CSS style class to differ <br/>the looks of active and inactive tabs.<br/><br/>
</td>
<td width="50"> </td>
<td valign="top">
<tabs:tabbedPane tabParam="tab2" defaultTab="3" sessionKey="tab2">
<table cellspacing="0" cellpadding="5">
<tr>
<tabs:activeTab tabId="1"><td class="activeTab" ><a href="tabbedPane.jsp?tab2=1">Tab l</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="1"><td class="inactiveTab"><a href="tabbedPane.jsp?tab2=1">Tab l</a></td></tabs:inactiveTab>
<tabs:activeTab tabId="2"><td class="activeTab" ><a href="tabbedPane.jsp?tab2=2">Tab 2</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="2"><td class="inactiveTab"><a href="tabbedPane.jsp?tab2=2">Tab 2</a></td></tabs:inactiveTab>
<tabs:activeTab tabId="3"><td class="activeTab" ><a href="tabbedPane.jsp?tab2=3">Tab 3</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="3"><td class="inactiveTab"><a href="tabbedPane.jsp?tab2=3">Tab 3</a></td></tabs:inactiveTab>
<tabs:activeTab tabId="4"><td class="activeTab" ><a href="tabbedPane.jsp?tab2=4">Tab 4</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="4"><td class="inactiveTab"><a href="tabbedPane.jsp?tab2=4">Tab 4</a></td></tabs:inactiveTab>
<tabs:activeTab tabId="5"><td class="activeTab" ><a href="tabbedPane.jsp?tab2=5">Tab 5</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="5"><td class="inactiveTab"><a href="tabbedPane.jsp?tab2=5">Tab 5</a></td></tabs:inactiveTab>
</tr>
<tr><td colspan="7" class="tabContent"><br/><br/>
<tabs:tabContent tabId="1">Tab 1 Content</tabs:tabContent>
<tabs:tabContent tabId="2">Tab 2 Content</tabs:tabContent>
<tabs:tabContent tabId="3">Tab 3 Content</tabs:tabContent>
<tabs:tabContent tabId="4">Tab 4 Content</tabs:tabContent>
<tabs:tabContent tabId="5">Tab 5 Content</tabs:tabContent>
</td></tr>
</table>
</tabs:tabbedPane><br/>
Tabbed Pane using differing content for each tab.<br/><br/><br/>
</td>
</tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr>
<td valign="top">
<tabs:tabbedPane tabParam="tab3" defaultTab="4" sessionKey="tab3">
<table cellspacing="0" cellpadding="5">
<tr>
<tabs:activeTab tabId="1"><td class="activeTab" ><a href="tabbedPane.jsp?tab3=1">Tab l</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="1"><td class="inactiveTab"><a href="tabbedPane.jsp?tab3=1">Tab l</a></td></tabs:inactiveTab>
<tabs:activeTab tabId="2"><td class="activeTab" ><a href="tabbedPane.jsp?tab3=2">Tab 2</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="2"><td class="inactiveTab"><a href="tabbedPane.jsp?tab3=2">Tab 2</a></td></tabs:inactiveTab>
<tabs:activeTab tabId="3"><td class="activeTab" ><a href="tabbedPane.jsp?tab3=3">Tab 3</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="3"><td class="inactiveTab"><a href="tabbedPane.jsp?tab3=3">Tab 3</a></td></tabs:inactiveTab>
<tabs:activeTab tabId="4"><td class="activeTab" ><a href="tabbedPane.jsp?tab3=4">Tab 4</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="4"><td class="inactiveTab"><a href="tabbedPane.jsp?tab3=4">Tab 4</a></td></tabs:inactiveTab>
<tabs:activeTab tabId="5"><td class="activeTab" ><a href="tabbedPane.jsp?tab3=5">Tab 5</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="5"><td class="inactiveTab"><a href="tabbedPane.jsp?tab3=5">Tab 5</a></td></tabs:inactiveTab>
</tr>
<tr><td colspan="7" class="tabContent"><br/><br/>
<tabs:tabContent tabId="1"><tabs:include uri="tab1.jsp"/></tabs:tabContent>
<tabs:tabContent tabId="2"><tabs:include uri="tab2.jsp"/></tabs:tabContent>
<tabs:tabContent tabId="3"><tabs:include uri="tab3.jsp"/></tabs:tabContent>
<tabs:tabContent tabId="4"><tabs:include uri="tab4.jsp"/></tabs:tabContent>
<tabs:tabContent tabId="5"><tabs:include uri="tab5.jsp"/></tabs:tabContent>
</td></tr>
</table>
</tabs:tabbedPane><br/>
Tabbed Pane using differing content for <br/>each tab,
and including other JSP's as <br/>content of the tab panes.<br/><br/>
</td>
<td> </td>
<td valign="top">
<tabs:tabbedPane tabParam="tab4" defaultTab="2" sessionKey="tab4">
<table cellspacing="0" cellpadding="5">
<tr>
<tabs:activeTab tabId="1"><td class="activeTab" ><a href="tabbedPane.jsp?tab4=1">Tabbed Pane</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="1"><td class="inactiveTab"><a href="tabbedPane.jsp?tab4=1">Tabbed Pane</a></td></tabs:inactiveTab>
<tabs:activeTab tabId="2"><td class="activeTab" ><a href="tabbedPane.jsp?tab4=2">Tree</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="2"><td class="inactiveTab"><a href="tabbedPane.jsp?tab4=2">Tree</a></td></tabs:inactiveTab>
<tabs:activeTab tabId="3"><td class="activeTab" ><a href="tabbedPane.jsp?tab4=3">Tab 3</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="3"><td class="inactiveTab"><a href="tabbedPane.jsp?tab4=3">Tab 3</a></td></tabs:inactiveTab>
<tabs:activeTab tabId="4"><td class="activeTab" ><a href="tabbedPane.jsp?tab4=4">Tab 4</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="4"><td class="inactiveTab"><a href="tabbedPane.jsp?tab4=4">Tab 4</a></td></tabs:inactiveTab>
<tabs:activeTab tabId="5"><td class="activeTab" ><a href="tabbedPane.jsp?tab4=5">Tab 5</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="5"><td class="inactiveTab"><a href="tabbedPane.jsp?tab4=5">Tab 5</a></td></tabs:inactiveTab>
</tr>
<tr><td colspan="7" class="tabContent"><br/><br/>
<tabs:tabContent tabId="1"><tabs:include uri="subPane.jsp"/></tabs:tabContent>
<tabs:tabContent tabId="2"><tabs:include uri="subTree.jsp"/></tabs:tabContent>
<tabs:tabContent tabId="3"><tabs:include uri="tab3.jsp"/></tabs:tabContent>
<tabs:tabContent tabId="4"><tabs:include uri="tab4.jsp"/></tabs:tabContent>
<tabs:tabContent tabId="5"><tabs:include uri="tab5.jsp"/></tabs:tabContent>
</td></tr>
</table>
</tabs:tabbedPane><br/>
Tabbed Pane with nested Tabbed Pane and Tree.<br/>
Notice how the state of the nested pane and tree <br/>
are kept even if you click on tab3, tab4, or tab5 <br/>
and back on the nested pane or tree.
<br/><br/>
</td>
</tr>
</table>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -