?? tabbedpanevertical.jsp
字號:
<%@ taglib uri="/WEB-INF/tabbedpanetag.tld" prefix="tabs" %>
<html>
<head>
<link rel="stylesheet" href="/prizetagsdemo/stylesheet.css" type="text/css">
</head>
<body>
<style type="text/css">
.activeTabVertical {
Font-Family: Arial;
Font-Size : 12px;
Font-Weight: Bold;
Background-Color: #FFFFFF;
Border-Top: 1px solid #000000;
Border-Left: 1px solid #000000;
Border-Bottom: 1px solid #000000;
}
.inactiveTabVertical {
Font-Family: Arial;
Font-Size : 12px;
Font-Weight: Boldx;
Background-Color: #EEEEEE;
Border : 1px solid #000000;
}
.tabContentVertical {
Font-Family: Arial;
Font-Size : 12px;
Font-Weight: Boldx;
Background-Color: #FFFFFF;
Border-Top: 1px solid #000000;
Border-Right: 1px solid #000000;
Border-Bottom: 1px solid #000000;
}
.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.-->
<tabs:tabbedPane tabParam="tab4" defaultTab="2" sessionKey="tab4">
<table cellspacing="0" cellpadding="5">
<tr>
<tabs:activeTab tabId="1"><td class="activeTabVertical" ><a href="tabbedPaneVertical.jsp?tab4=1">Tabs</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="1"><td class="inactiveTabVertical"><a href="tabbedPaneVertical.jsp?tab4=1">Tabs</a></td></tabs:inactiveTab>
<td rowspan="5" class="tabContentVertical" valign="top">
<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>
<tr>
<tabs:activeTab tabId="2"><td class="activeTabVertical" ><a href="tabbedPaneVertical.jsp?tab4=2">Tree</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="2"><td class="inactiveTabVertical"><a href="tabbedPaneVertical.jsp?tab4=2">Tree</a></td></tabs:inactiveTab>
</tr>
<tr>
<tabs:activeTab tabId="3"><td class="activeTabVertical" ><a href="tabbedPaneVertical.jsp?tab4=3">Tab 3</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="3"><td class="inactiveTabVertical"><a href="tabbedPaneVertical.jsp?tab4=3">Tab 3</a></td></tabs:inactiveTab>
</tr>
<tr>
<tabs:activeTab tabId="4"><td class="activeTabVertical" ><a href="tabbedPaneVertical.jsp?tab4=4">Tab 4</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="4"><td class="inactiveTabVertical"><a href="tabbedPaneVertical.jsp?tab4=4">Tab 4</a></td></tabs:inactiveTab>
</tr>
<tr>
<tabs:activeTab tabId="5"><td class="activeTabVertical" ><a href="tabbedPaneVertical.jsp?tab4=5">Tab 5</a></td></tabs:activeTab>
<tabs:inactiveTab tabId="5"><td class="inactiveTabVertical"><a href="tabbedPaneVertical.jsp?tab4=5">Tab 5</a></td></tabs:inactiveTab>
</tr>
</table>
</tabs:tabbedPane><br/>
Tabbed Pane with nested Tabbed Pane and Tree, and vertical tabs
<br/><br/>
</body>
</html>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -