mirror of
https://github.com/ACSPRI/queXS
synced 2024-04-02 12:12:16 +00:00
214 lines
6.3 KiB
HTML
214 lines
6.3 KiB
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 Demo (WebFX)</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<script type="text/javascript" src="local/webfxlayout.js"></script>
|
|
|
|
<!-- this link element includes the css definitions that describes the tab pane -->
|
|
<!--
|
|
<link type="text/css" rel="stylesheet" href="tab.winclassic.css" />
|
|
-->
|
|
<link id="luna-tab-style-sheet" type="text/css" rel="stylesheet"
|
|
href="css/luna/tab.css" disabled="disabled" />
|
|
<link id="webfx-tab-style-sheet" type="text/css" rel="stylesheet"
|
|
href="css/tab.webfx.css" disabled="disabled" />
|
|
<link id="winclassic-tab-style-sheet" type="text/css" rel="stylesheet"
|
|
href="css/tab.winclassic.css" disabled="disabled" />
|
|
<!-- the id is not needed. It is used here to be able to change css file at runtime -->
|
|
|
|
<style type="text/css">
|
|
.dynamic-tab-pane-control .tab-page {
|
|
height: 200px;
|
|
}
|
|
|
|
.dynamic-tab-pane-control .tab-page .dynamic-tab-pane-control .tab-page
|
|
{
|
|
height: 100px;
|
|
}
|
|
|
|
html,body {
|
|
background: ThreeDFace;
|
|
}
|
|
|
|
form {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* over ride styles from webfxlayout */
|
|
body {
|
|
margin: 10px;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="js/tabpane.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<script type="text/javascript">
|
|
//<![CDATA[
|
|
|
|
function setLinkSrc( sStyle ) {
|
|
document.getElementById( "luna-tab-style-sheet" ).disabled = sStyle != "luna";
|
|
document.getElementById( "webfx-tab-style-sheet" ).disabled = sStyle != "webfx"
|
|
document.getElementById( "winclassic-tab-style-sheet" ).disabled = sStyle != "winclassic"
|
|
|
|
document.documentElement.style.background =
|
|
document.body.style.background = sStyle == "webfx" ? "white" : "ThreeDFace";
|
|
}
|
|
|
|
setLinkSrc( "luna" );
|
|
|
|
//]]>
|
|
</script>
|
|
|
|
<form action="#">
|
|
<fieldset><legend>Select Style Sheet</legend> <input
|
|
id="luna-radio" type="radio" name="tab-css-radio" checked="checked"
|
|
value="css/luna/tab.css" onclick="setLinkSrc('luna')" /> <label
|
|
for="luna-radio">luna/tab.css</label> <br />
|
|
|
|
<input id="webfx-radio" type="radio" name="tab-css-radio"
|
|
value="css/tab.webfx.css" onclick="setLinkSrc('webfx')" /> <label
|
|
for="webfx-radio">tab.webfx.css</label> <br />
|
|
|
|
<input id="classic-radio" type="radio" name="tab-css-radio"
|
|
value="css/tab.winclassic.css" onclick="setLinkSrc('winclassic')" /> <label
|
|
for="classic-radio">tab.winclassic.css</label></fieldset>
|
|
</form>
|
|
|
|
<p> </p>
|
|
|
|
<div class="tab-pane" id="tabPane1"><script type="text/javascript">
|
|
tp1 = new WebFXTabPane( document.getElementById( "tabPane1" ) );
|
|
//tp1.setClassNameTag( "dynamic-tab-pane-control-luna" );
|
|
//alert( 0 )
|
|
</script>
|
|
|
|
<div class="tab-page" id="tabPage1">
|
|
<h2 class="tab">General</h2>
|
|
|
|
<script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage1" ) );</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. This is text of tab 1. 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="tabPage2">
|
|
<h2 class="tab">Security</h2>
|
|
|
|
<script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage2" ) );</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. This is text of tab 2. This is text of tab 2.
|
|
This is text of tab 2. This is text of tab 2. This is text of tab 2. <br />
|
|
<br />
|
|
This is text of tab 2. This is text of tab 2. This is text of tab 2.
|
|
This is text of tab 2. This is text of tab 2. 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 class="tab-page" id="tabPage3">
|
|
<h2 class="tab">Privacy</h2>
|
|
|
|
<script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage3" ) );</script>
|
|
|
|
This is text of tab 3. This is text of tab 3. This is text of tab 3.
|
|
This is text of tab 3. This is text of tab 3. This is text of tab 3.
|
|
This is text of tab 3. This is text of tab 3. This is text of tab 3.</div>
|
|
|
|
<div class="tab-page" id="tabPage4">
|
|
<h2 class="tab">Content</h2>
|
|
|
|
<script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage4" ) );</script>
|
|
|
|
<fieldset><legend>Content</legend> This is text of tab 4.
|
|
This is text of tab 4. This is text of tab 4. This is text of tab 4.
|
|
This is text of tab 4. This is text of tab 4. This is text of tab 4.
|
|
This is text of tab 4. This is text of tab 4.</fieldset>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<p>Another tab below</p>
|
|
|
|
|
|
<!-- id is not necessary unless you want to support multiple tabs with persistence -->
|
|
<div class="tab-pane" id="tabPane2">
|
|
|
|
<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. This is text of tab 1. 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">Security</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. This is text of tab 2. This is text of tab 2.
|
|
This is text of tab 2. This is text of tab 2. This is text of tab 2. <br />
|
|
<br />
|
|
This is text of tab 2. This is text of tab 2. This is text of tab 2.
|
|
This is text of tab 2. This is text of tab 2. 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 class="tab-page">
|
|
<h2 class="tab">Nested</h2>
|
|
|
|
<!-- id is not necessary unless you want to support multiple tabs with persistence -->
|
|
<div class="tab-pane" id="tabPane3">
|
|
|
|
<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. This is text of tab 1. 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. This is text of tab 2. 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>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
//<![CDATA[
|
|
|
|
setupAllTabs();
|
|
|
|
//]]>
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|