1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176
|
@@-- This templates provides support for implementing notebook tabs in
@@-- an HTML page, ie something that looks like:
@@--
@@-- +-------+-------+-------+
@@-- | Page1 | Page2 | Page3 |
@@-- +--+-------+ +-------+---------------------------------+
@@-- | The content of the second page |
@@-- | |
@@-- +------------------------------------------------------------+
@@--
@@-- This implements depends on browsers supporting CSS 2.0 and javascript,
@@-- and was tested on IExplorer 6.0, Firefox 1.0, Opera 7.0.
@@-- They degrade correctly if javascript is disabled, except the user will
@@-- then see all pages at the same time.
@@-- They also preserve the currently displayed page when the page is reloaded.
@@--
@@-- To use this template, you must do the following in your HTML file:
@@-- * Include this template in the header (between <head> and </head>)
@@-- This is done with an instruction like:
@@--
@@-- @@INCLUDE@@ notebook.thtml (1=>Tabs, 2=>currentPage,
@@-- 3=>TabContents, 4=>initialPageName,
@@-- 5=>activePageColor, 6=>inactivePageColor)
@@--
@@-- Where the six parameters will be explained below, but should appear
@@-- on the same line.
@@-- The first parameter mustn't contain spaces
@@--
@@-- * Optional parameters:
@@--
@@-- $5 - The active page color
@@-- $6 - The standard page color
@@-- $7 - The tab active text color
@@-- $8 - The tab standard text color
@@-- $9 - The tab selected text color
@@-- $10 - Height offset for the tab, 0 by default. It needs to be adjusted
@@-- if the font used is too big.
@@--
@@-- * Create a <ul> list that contains the text for the tabs. This
@@-- should look like the following, where the id and class attributes
@@-- should match the corresponding parameters in the @@INCLUDE@@ statement
@@-- above.
@@-- The idea for each of the <li> elements is left to your choice, but
@@-- should be the same everywhere the same page is referenced
@@--
@@-- <ul id="Tabs" >
@@-- <li id="page1" class="currentPage">
@@-- <a href=""
@@-- onclick="return !switchTabPage_Tabs('page1')">
@@-- Title of page 1
@@-- </a>
@@-- </li>
@@-- <li id="page2"><a href=""
@@-- onclick="return !switchTabPage_Tabs('page2')">...
@@-- </li>
@@-- ... same for other pages
@@-- </ul>
@@--
@@-- One of the pages should have the name given in the initialPageName, and
@@-- will be selected initially.
@@-- The name of the javascript function is made from the prefix
@@-- "switchTabPage_", followed by the name of the first parameter above.
@@-- This is so that multiple notebooks can be created on the same page.
@@-- The goal of the call to "return" is to prevent the browser from
@@-- interpreting the href attribute, which would force a reload of the page
@@--
@@-- Note the empty URL associated with the links. If you use "#" instead,
@@-- you will encounter some refresh problems in some cases.
@@--
@@-- * Create the contents of each pages. In this implementation, all notebook
@@-- pages are loaded at the same time, and no further access to the server
@@-- is done when the user switches pages. Your style sheet should be such
@@-- that the background color of the page is activePageColor, since it
@@-- gives better results.
@@--
@@-- <div class="TabContents" id="page1">
@@-- Content of page 1
@@-- </div>
@@--
@@-- <div class="TabContents" id="page2">
@@-- Content of page 2
@@-- </div>
@@--
@@-- <script language="javascript">setCurrentPage_Tabs()</script>
@@--
@@-- The last call makes sure the current page after a refresh of the page
@@-- remains the same that it was before. This requires cookies, but so does
@@-- AWS to support sessions.
@@SET@@ ACTIVE_PAGE_COLOR = $5 | white
@@SET@@ PAGE_COLOR = $6 | #ccc
@@SET@@ TAB_ACTIVE_TEXT_COLOR = $7 | black
@@SET@@ TAB_TEXT_COLOR = $8 | #666
@@SET@@ TAB_SELECTED_TEXT_COLOR = $9 | #f00
@@SET@@ TAB_HEIGHT = $10 | 0
<style type="text/css">
#@_$1_@ { border-bottom: 1px solid @_PAGE_COLOR_@;
margin: 15px 10px 0px 0px;
position: relative;
height: @_"+"(19):TAB_HEIGHT_@px;
padding-left: 10px; }
#@_$1_@ li { display: inline;
list-style-type: none;
padding: 0;
margin: 0px 20px 0px 20px; }
#@_$1_@ a:link,
#@_$1_@ a:active,
#@_$1_@ a:visited { background: @_PAGE_COLOR_@;
border: 1px solid @_PAGE_COLOR_@;
color: @_TAB_TEXT_COLOR_@;
position: relative; /* Required for IE6 */
float: left;
font-weight: normal;
line-height: @_"+"(14):TAB_HEIGHT_@px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none; }
#@_$1_@ a:hover { color: @_TAB_SELECTED_TEXT_COLOR_@; }
#@_$1_@ li.@_$2_@ a:link,
#@_$1_@ li.@_$2_@ a:active,
#@_$1_@ li.@_$2_@ a:visited
{ background: @_ACTIVE_PAGE_COLOR_@;
border-bottom: 1px solid @_ACTIVE_PAGE_COLOR_@;
color: @_TAB_ACTIVE_TEXT_COLOR_@; }
div.@_$3_@ { border: 1px solid #ccc;
border-top: none;
display: none;
background-color: @_ACTIVE_PAGE_COLOR_@;
padding: 1px 5px 10px 5px;
margin: 0px 10px 30px 0px; }
div#@_$4_@ { display: block; }
</style>
<script src="/we_js/cookies.js" type="text/javascript"></script>
<script language="javascript">
@@-- Select a new tab, return True if it could change the page
function switchTabPage_@_$1_@ (pageName) {
var ul = document.getElementById ('@_$1_@');
var children = ul.getElementsByTagName ('li');
for (var i=0; i < children.length; i++) {
if (children[i].id == pageName) {
children[i].className = "@_$2_@";
} else {
children[i].className = "";
}
}
var children = document.getElementsByTagName ('div');
for (var i=0; i < children.length; i++) {
if (children[i].className == '@_$3_@') {
if (children[i].id == pageName) {
children[i].style.display = 'block';
} else {
children[i].style.display = 'none';
}
}
}
createCookie ("currentPage_@_$1_@", pageName, 0, "/");
return true;
}
@@-- Set the current page given the one previously set by the user (from the
@@-- cookie), or using the default one.
function setCurrentPage_@_$1_@ () {
var value = readCookie ("currentPage_@_$1_@");
if (value) {
switchTabPage_@_$1_@ (value);
} else {
switchTabPage_@_$1_@ ("@_$4_@");
}
}
</script>
|