mirror of
https://github.com/ACSPRI/queXS
synced 2024-04-02 12:12:16 +00:00
Import from DCARF SVN
This commit is contained in:
azammitdcarf
240
include/limesurvey/admin/scripts/tabpane/demo.html
Normal file
240
include/limesurvey/admin/scripts/tabpane/demo.html
Normal file
@@ -0,0 +1,240 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user