home *** CD-ROM | disk | FTP | other *** search
/ PC Pro 2006 April / DPPRO0406DVD.ISO / Essentials / Programming / Eclipse SDK / eclipse-SDK-3.1.1-win32.exe / eclipse / plugins / org.eclipse.help.webapp_3.1.0 / advanced / tabs.jsp < prev    next >
Encoding:
Text File  |  2005-09-29  |  6.6 KB  |  297 lines
  1. <%--
  2.  Copyright (c) 2000, 2004 IBM Corporation and others.
  3.  All rights reserved. This program and the accompanying materials 
  4.  are made available under the terms of the Eclipse Public License v1.0
  5.  which accompanies this distribution, and is available at
  6.  http://www.eclipse.org/legal/epl-v10.html
  7.  
  8.  Contributors:
  9.      IBM Corporation - initial API and implementation
  10. --%>
  11. <%@ include file="header.jsp"%>
  12.  
  13. <% 
  14.     LayoutData data = new LayoutData(application,request, response);
  15.     WebappPreferences prefs = data.getPrefs();
  16.     View[] views = data.getViews();
  17. %>
  18.  
  19. <html>
  20. <head>
  21. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  22.  
  23. <title><%=ServletResources.getString("Tabs", request)%></title>
  24.     
  25. <style type="text/css">
  26.  
  27.  
  28. BODY {
  29.     margin:0px;
  30.     padding:0px;
  31.     background:<%=prefs.getToolbarBackground()%>;
  32.     height:100%;
  33. <% 
  34. if (data.isMozilla()){
  35. %>
  36.     height:21px;
  37. <%
  38. }
  39. %>
  40. }
  41.  
  42. /* tabs at the bottom */
  43. .tab {
  44.     font-size:5px;<%-- needed to verticaly center icon image --%>
  45.     margin:0px;
  46.     padding:0px;
  47.     border-top:1px solid ThreeDShadow;
  48.     border-bottom:1px solid <%=data.isMozilla()?prefs.getToolbarBackground():"ThreeDShadow"%>;
  49.     cursor:default;
  50. }
  51.  
  52. .pressed {
  53.     font-size:5px;<%-- needed to verticaly center icon image (on IE--%>
  54.     margin:0px;
  55.     padding:0px;
  56.     cursor:default;
  57.     background-color:<%=prefs.getViewBackground()%>;
  58.     border-top:1px solid <%=prefs.getViewBackground()%>;
  59.     border-bottom:1px solid ThreeDShadow;
  60. }
  61.  
  62. .separator {
  63.     height:100%;
  64.     background-color:ThreeDShadow;
  65.     border-bottom:1px solid <%=prefs.getToolbarBackground()%>;
  66. }
  67.  
  68. .separator_pressed {
  69.     height:100%;
  70.     background-color:ThreeDShadow;
  71.     border-top:1px solid <%=prefs.getViewBackground()%>;
  72.     border-bottom:1px solid <%=prefs.getToolbarBackground()%>;
  73. }
  74.  
  75. A {
  76.     text-decoration:none;
  77.     vertical-align:middle;
  78.     height:16px;
  79.     width:16px;
  80. <% 
  81. if (data.isIE()){
  82. %>
  83.     writing-mode:tb-rl; <%-- needed to verticaly center icon image on IE--%>
  84. <%
  85. } else {
  86. %>
  87.     display:block;<%-- needed to verticaly center icon image (remove extra pixels below) on Mozilla--%>
  88. <%
  89. }
  90. %>
  91. }
  92.  
  93. IMG {
  94.     border:0px;
  95.     margin:0px;
  96.     padding:0px;
  97.     height:16px;
  98.     width:16px;
  99. }
  100.  
  101. </style>
  102.  
  103. <script language="JavaScript">
  104.  
  105. var isMozilla = navigator.userAgent.indexOf('Mozilla') != -1 && parseInt(navigator.appVersion.substring(0,1)) >= 5;
  106. var isIE = navigator.userAgent.indexOf('MSIE') != -1;
  107. var linksArray = new Array ("linktoc", "linksearch", "linklinks", "linkbookmarks");
  108.  
  109. if (isMozilla) {
  110.   document.addEventListener('keydown', keyDownHandler, true);
  111. }
  112. else if (isIE){
  113.   document.onkeydown = keyDownHandler;
  114. }
  115.  
  116. /**
  117.  * Returns the target node of an event
  118.  */
  119. function getTarget(e) {
  120.     var target;
  121.       if (isMozilla)
  122.           target = e.target;
  123.       else if (isIE)
  124.            target = window.event.srcElement;
  125.  
  126.     return target;
  127. }
  128.  
  129. <%
  130. for (int i=0; i<views.length; i++) {
  131. %>
  132.     var <%=views[i].getName()%> = new Image();
  133.     <%=views[i].getName()%>.src = "<%=views[i].getOnImage()%>";
  134. <%
  135. }
  136. %>
  137.  
  138. var lastTab = "";
  139. /* 
  140.  * Switch tabs.
  141.  */ 
  142. function showTab(tab)
  143. {     
  144.     if (tab == lastTab) 
  145.         return;
  146.     
  147.     lastTab = tab;
  148.     
  149.      // show the appropriate pressed tab
  150.       var buttons = document.body.getElementsByTagName("TD");
  151.       for (var i=0; i<buttons.length; i++)
  152.       {
  153.           if (buttons[i].id == tab) { 
  154.             buttons[i].className = "pressed";
  155.             if (i > 0) 
  156.                 buttons[i-1].className = "separator_pressed";
  157.             if (i<buttons.length-1) 
  158.                 buttons[i+1].className = "separator_pressed";
  159.         } else if (buttons[i].className == "pressed") {
  160.             buttons[i].className = "tab";
  161.             if (i > 0) 
  162.                 if (i > 1 && buttons[i-2].id == tab) 
  163.                     buttons[i-1].className = "separator_pressed";
  164.                 else
  165.                     buttons[i-1].className = "separator";
  166.             if (i<buttons.length-1) 
  167.                 if (i<buttons.length-2 && buttons[i+2].id == tab) 
  168.                     buttons[i+1].className = "separator_pressed";
  169.                 else
  170.                     buttons[i+1].className = "separator";
  171.         }
  172.       }
  173. }
  174.  
  175. /**
  176.  * Handler for key down (arrows)
  177.  */
  178. function keyDownHandler(e)
  179. {
  180.     var key;
  181.  
  182.     if (isIE) {
  183.         key = window.event.keyCode;
  184.     } else if (isMozilla) {
  185.         key = e.keyCode;
  186.     }
  187.         
  188.     if (key <37 || key > 39) 
  189.         return true;
  190.     
  191.       var clickedNode = getTarget(e);
  192.       if (!clickedNode) return true;
  193.  
  194.     var linkId="";
  195.     if (clickedNode.tagName == 'A')
  196.         linkId=clickedNode.id;
  197.     else if(clickedNode.tagName == 'TD')
  198.         linkId="link"+clickedNode.id;
  199.  
  200.     if (isMozilla)
  201.           e.cancelBubble = true;
  202.       else if (isIE)
  203.           window.event.cancelBubble = true;
  204.       if (key == 38 ) { // up arrow
  205.         if(linkId.length>4){
  206.             parent.showView(linkId.substring(4, linkId.length));
  207.             clickedNode.blur();
  208.             parent.frames.ViewsFrame.focus();
  209.         }
  210.       } else if (key == 39) { // Right arrow, expand
  211.           var nextLink=getNextLink(linkId);
  212.         if(nextLink!=null){
  213.             document.getElementById(nextLink).focus();
  214.         }
  215.       } else if (key == 37) { // Left arrow,collapse
  216.            var previousLink=getPreviousLink(linkId);
  217.         if(previousLink!=null){
  218.             document.getElementById(previousLink).focus();
  219.         }
  220.      }
  221.                    
  222.       return false;
  223. }
  224.  
  225. function getNextLink(currentLink){
  226.     for(i=0; i<linksArray.length; i++){
  227.         if(currentLink==linksArray[i]){
  228.             if((i+1)<linksArray.length)
  229.                 return linksArray[i+1];
  230.         }
  231.     }
  232.     return linksArray[0];
  233. }
  234.  
  235. function getPreviousLink(currentLink){
  236.     for(i=0; i<linksArray.length; i++){
  237.         if(currentLink==linksArray[i]){
  238.             if(i>0)
  239.                  return linksArray[i-1];
  240.         }
  241.     }
  242.     return linksArray[linksArray.length-1];
  243. }
  244.  
  245. </script>
  246.  
  247. </head>
  248.    
  249. <body dir="<%=direction%>">
  250.  
  251.   <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%" valign="middle">
  252.    <tr>
  253.  
  254. <%
  255.     for (int i=0; i<views.length; i++) 
  256.     {
  257.         String title = ServletResources.getString(views[i].getName(), request);
  258.         if (i != 0) {
  259. %>
  260.     <td width="1px" class="separator"><div style="width:1px;height:1px;display:block;"></div></td>
  261.     <%-- div inside separator cell fixes top separator pixel that was not white on IE, or first separator not displayed when frame width happens to be even number of pixels --%>
  262. <%
  263.         }
  264. %>
  265.     <td  title="<%=title%>" 
  266.          align="center"  
  267.          valign="middle"
  268.          class="tab" 
  269.          id="<%=views[i].getName()%>" 
  270.          onclick="parent.showView('<%=views[i].getName()%>')" 
  271.          onmouseover="window.status='<%=title%>';return true;" 
  272.          onmouseout="window.status='';">
  273.          <a  href='javascript:parent.showView("<%=views[i].getName()%>");' 
  274.              onclick='this.blur();return false;' 
  275.              onmouseover="window.status='<%=title%>';return true;" 
  276.              onmouseout="window.status='';"
  277.              id="link<%=views[i].getName()%>"
  278.              <%=views[i].getKey()==View.NO_SHORTCUT?"":"ACCESSKEY=\""+views[i].getKey()+"\""%>>
  279.              <img alt="<%=title%>" 
  280.                   title="<%=title%>" 
  281.                   src="<%=views[i].getOnImage()%>"
  282.                   id="img<%=views[i].getName()%>"
  283.                   height="16"
  284.              >
  285.          </a>
  286.     </td>
  287. <%
  288.     }
  289. %>
  290.  
  291.    </tr>
  292.    </table>
  293.  
  294. </body>
  295. </html>
  296.  
  297.