Team:Mingdao

From 2014hs.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
 
-
<html>
+
<script>
-
<div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #fe2b33; /*background-color: #fe2b33;*/">
+
-
<div id="template" style="text-align: center; font-weight: bold; font-size: large; /*color: #f6f6f6*/; padding: 5px;">
+
-
This is a template page. READ THESE INSTRUCTIONS.
+
-
</div>
+
-
<div id="instructions" style="text-align: center; font-weight: normal; font-size: small; /*color: #f6f6f6*/; padding: 5px;">
+
-
You are provided with this team page template with which to start the iGEM season.  You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki.  You can find some examples <a href="https://2009.igem.org/Help:Template/Examples">HERE</a>.
+
-
</div>
+
-
<div id="warning" style="/*text-align: center;*/ font-weight: bold; font-size: small; /*color: #f6f6f6*/; padding: 5px;">
+
-
You <strong>MUST</strong> have the following information on your wiki:
+
-
<ul style="font-weight:normal;">
+
-
<li>a team description</li>
+
-
<li>project description</li>
+
-
<li>safety information (did your team take a safety training course? were you supervised in the lab?)</li>
+
-
<li>team attribution (who did what part of your project?)</li>
+
-
</ul>
+
-
You may also wish to add other page such as:
+
-
<ul style="font-weight:normal;">
+
-
<li>lab notebook</li>
+
-
<li>sponsor information</li>
+
-
<li>other information</li>
+
-
</ul>
+
-
REMEMBER, keep all of your pages within your teams namespace. <br><span style="font-weight:normal; font-style:italic;">Example: 2013hs.igem.org/Team:Mingdao/Our_Pets</span>
+
-
</div>
+
-
</div>
+
-
</html>
+
-
<!-- *********************** End of the alert box *********************** -->
+
/* SpryMenuBar.js - Revision: Spry Preview Release 1.4 */
 +
// Copyright (c) 2006. Adobe Systems Incorporated.
 +
// All rights reserved.
 +
//
 +
// Redistribution and use in source and binary forms, with or without
 +
// modification, are permitted provided that the following conditions are met:
 +
//
 +
//  * Redistributions of source code must retain the above copyright notice,
 +
//    this list of conditions and the following disclaimer.
 +
//  * Redistributions in binary form must reproduce the above copyright notice,
 +
//    this list of conditions and the following disclaimer in the documentation
 +
//    and/or other materials provided with the distribution.
 +
//  * Neither the name of Adobe Systems Incorporated nor the names of its
 +
//    contributors may be used to endorse or promote products derived from this
 +
//    software without specific prior written permission.
 +
//
 +
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 +
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 +
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
 +
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
 +
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 +
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 +
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 +
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 +
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 +
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 +
// POSSIBILITY OF SUCH DAMAGE.
 +
/*******************************************************************************
-
{|align="justify"
+
SpryMenuBar.js
-
|You can write a background of your team here. Give us a background of your team, the members, etc.  Or tell us more about something of your choosing.
+
  This file handles the JavaScript for Spry Menu Bar.  You should have no need
-
|[[Image:Mingdao_logo.png|200px|right|frame]]
+
to edit this file. Some highlights of the MenuBar object is that timers are
-
|-
+
used to keep submenus from showing up until the user has hovered over the parent
-
|
+
menu item for some time, as well as a timer for when they leave a submenu to keep
-
''Tell us more about your project. Give us background.  Use this as the abstract of your project. Be descriptive but concise (1-2 paragraphs)''
+
  showing that submenu until the timer fires.
-
|[[Image:Mingdao_team.png|right|frame|Your team picture]]
+
-
|-
+
-
|
+
-
|align="center"|[[Team:Mingdao | Team Mingdao]]
+
-
|}
+
-
<!--- Team Information Link --->
+
*******************************************************************************/
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
+
var Spry;
-
!align="center"|[https://igem.org/Team.cgi?year=2013&division=high_school&team_name=Mingdao Official Team Profile]
+
if(!Spry)
-
|}
+
{
 +
Spry = {};
 +
}
 +
if(!Spry.Widget)
 +
{
 +
Spry.Widget = {};
 +
}
-
===Team===
+
// Constructor for Menu Bar
 +
// element should be an ID of an unordered list (<ul> tag)
 +
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
 +
Spry.Widget.MenuBar = function(element, opts)
 +
{
 +
this.init(element, opts);
 +
};
-
===Project===
+
Spry.Widget.MenuBar.prototype.init = function(element, opts)
-
:Food wastes are discarded and unable to be used. Recycling and reuse of the wastes are getting increasingly attention. Generating fertilizer from kitchen wastes are benefit for the environment and even profitable. However, fertilizers made from the wastes are always with bad smell even deodorants have been used.
+
{
 +
this.element = this.getElement(element);
-
:In our project, we will analyze where the bad smells are produced. We are going to genetically engineer bacteria to diminish or reduce the smell.
+
// represents the current (sub)menu we are operating on
 +
this.currMenu = null;
-
===Notebook===
+
var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
-
Show us how you spent your days.
+
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
 +
{
 +
// bail on older unsupported browsers
 +
return;
 +
}
 +
// load hover images now
 +
if(opts)
 +
{
 +
for(var k in opts)
 +
{
 +
var rollover = new Image;
 +
rollover.src = opts[k];
 +
}
 +
}
-
===Results/Conclusions===
+
if(this.element)
-
What did you achieve over the course of your semester?
+
{
 +
this.currMenu = this.element;
 +
var items = this.element.getElementsByTagName('li');
 +
for(var i=0; i<items.length; i++)
 +
{
 +
this.initialize(items[i], element, isie);
 +
if(isie)
 +
{
 +
this.addClassName(items[i], "MenuBarItemIE");
 +
items[i].style.position = "static";
 +
}
 +
}
 +
if(isie)
 +
{
 +
if(this.hasClassName(this.element, "MenuBarVertical"))
 +
{
 +
this.element.style.position = "relative";
 +
}
 +
var linkitems = this.element.getElementsByTagName('a');
 +
for(var i=0; i<linkitems.length; i++)
 +
{
 +
linkitems[i].style.position = "relative";
 +
}
 +
}
 +
}
 +
};
 +
Spry.Widget.MenuBar.prototype.getElement = function(ele)
 +
{
 +
if (ele && typeof ele == "string")
 +
return document.getElementById(ele);
 +
return ele;
 +
};
-
===Safety===
+
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
-
What safety precautions did your team take? Did you take a safety training course? Were you supervised at all times in the lab?
+
{
 +
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
 +
{
 +
return false;
 +
}
 +
return true;
 +
};
 +
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
 +
{
 +
if (!ele || !className || this.hasClassName(ele, className))
 +
return;
 +
ele.className += (ele.className ? " " : "") + className;
 +
};
-
===Attributions===
+
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
-
Who worked on what?
+
{
 +
if (!ele || !className || !this.hasClassName(ele, className))
 +
return;
 +
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
 +
};
 +
// addEventListener for Menu Bar
 +
// attach an event to a tag without creating obtrusive HTML code
 +
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
 +
{
 +
try
 +
{
 +
if (element.addEventListener)
 +
{
 +
element.addEventListener(eventType, handler, capture);
 +
}
 +
else if (element.attachEvent)
 +
{
 +
element.attachEvent('on' + eventType, handler);
 +
}
 +
}
 +
catch (e) {}
 +
};
-
===Human Practices===
+
// createIframeLayer for Menu Bar
-
What impact does/will your project have on the public? 
+
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
 +
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
 +
{
 +
var layer = document.createElement('iframe');
 +
layer.tabIndex = '-1';
 +
layer.src = 'javascript:false;';
 +
menu.parentNode.appendChild(layer);
 +
 +
layer.style.left = menu.offsetLeft + 'px';
 +
layer.style.top = menu.offsetTop + 'px';
 +
layer.style.width = menu.offsetWidth + 'px';
 +
layer.style.height = menu.offsetHeight + 'px';
 +
};
 +
// removeIframeLayer for Menu Bar
 +
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
 +
Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
 +
{
 +
var layers = menu.parentNode.getElementsByTagName('iframe');
 +
while(layers.length > 0)
 +
{
 +
layers[0].parentNode.removeChild(layers[0]);
 +
}
 +
};
-
===Fun!===
+
// clearMenus for Menu Bar
-
What was your favorite team snack?? Have a picture of your team mascot?
+
// root is the top level unordered list (<ul> tag)
 +
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
 +
{
 +
var menus = root.getElementsByTagName('ul');
 +
for(var i=0; i<menus.length; i++)
 +
{
 +
this.hideSubmenu(menus[i]);
 +
}
 +
this.removeClassName(this.element, "MenuBarActive");
 +
};
 +
// bubbledTextEvent for Menu Bar
 +
// identify bubbled up text events in Safari so we can ignore them
 +
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
 +
{
 +
return (navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget)));
 +
};
 +
// showSubmenu for Menu Bar
 +
// set the proper CSS class on this menu to show it
 +
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
 +
{
 +
if(this.currMenu)
 +
{
 +
this.clearMenus(this.currMenu);
 +
this.currMenu = null;
 +
}
 +
 +
if(menu)
 +
{
 +
this.addClassName(menu, "MenuBarSubmenuVisible");
 +
if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
 +
{
 +
if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element)
 +
{
 +
menu.style.top = menu.parentNode.offsetTop + 'px';
 +
}
 +
}
 +
if(typeof document.uniqueID != "undefined")
 +
{
 +
this.createIframeLayer(menu);
 +
}
 +
}
 +
this.addClassName(this.element, "MenuBarActive");
 +
};
-
<forum_subtle />
+
// hideSubmenu for Menu Bar
 +
// remove the proper CSS class on this menu to hide it
 +
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
 +
{
 +
if(menu)
 +
{
 +
this.removeClassName(menu, "MenuBarSubmenuVisible");
 +
if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
 +
{
 +
menu.style.top = '';
 +
menu.style.left = '';
 +
}
 +
this.removeIframeLayer(menu);
 +
}
 +
};
 +
// initialize for Menu Bar
 +
// create event listeners for the Menu Bar widget so we can properly
 +
// show and hide submenus
 +
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element, isie)
 +
{
 +
var opentime, closetime;
 +
var link = listitem.getElementsByTagName('a')[0];
 +
var submenus = listitem.getElementsByTagName('ul');
 +
var menu = (submenus.length > 0 ? submenus[0] : null);
 +
var hasSubMenu = false;
 +
if(menu)
 +
{
 +
this.addClassName(link, "MenuBarItemSubmenu");
 +
hasSubMenu = true;
 +
}
 +
if(!isie)
 +
{
 +
// define a simple function that comes standard in IE to determine
 +
// if a node is within another node
 +
listitem.contains = function(testNode)
 +
{
 +
// this refers to the list item
 +
if(testNode == null)
 +
{
 +
return false;
 +
}
 +
if(testNode == this)
 +
{
 +
return true;
 +
}
 +
else
 +
{
 +
return this.contains(testNode.parentNode);
 +
}
 +
};
 +
}
 +
 +
// need to save this for scope further down
 +
var self = this;
 +
this.addEventListener(listitem, 'mouseover', function(e)
 +
{
 +
if(self.bubbledTextEvent())
 +
{
 +
// ignore bubbled text events
 +
return;
 +
}
 +
clearTimeout(closetime);
 +
if(self.currMenu == listitem)
 +
{
 +
self.currMenu = null;
 +
}
 +
// show menu highlighting
 +
self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
 +
if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible"))
 +
{
 +
opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
 +
}
 +
}, false);
 +
this.addEventListener(listitem, 'mouseout', function(e)
 +
{
 +
if(self.bubbledTextEvent())
 +
{
 +
// ignore bubbled text events
 +
return;
 +
}
 +
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
 +
if(!listitem.contains(related))
 +
{
 +
clearTimeout(opentime);
 +
self.currMenu = listitem;
 +
// remove menu highlighting
 +
self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
 +
if(menu)
 +
{
 +
closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
 +
}
 +
}
 +
}, false);
 +
};
 +
</script>
Line 96: Line 341:
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<!-- TemplateBeginEditable name="doctitle" -->
 +
<title>無標題文件</title>
 +
<!-- TemplateEndEditable -->
 +
<!-- TemplateBeginEditable name="head" -->
 +
<!-- TemplateEndEditable -->
 +
<style type="text/css">
 +
<!--
 +
body  {
 +
font: 100% Verdana, Arial, Helvetica, sans-serif;
 +
background: #666666;
 +
margin: 0; /* 比較好的做法是將 Body 元素的邊界與欄位間隔調整為零，以處理不同的瀏覽器預設值 */
 +
padding: 0;
 +
text-align: center; /* 這樣會讓容器在 IE 5* 瀏覽器內置中對齊。然後，文字會在 #container 選取器中設定為靠左對齊預設值 */
 +
color: #000000;
 +
}
 +
/* 彈性版面的提示
 +
1. 由於彈性版面的整體尺寸調整是以使用者的預設字體大小為基礎，所以比較無法預期。如果正確使用，它們也會比需要較大字體大小的版面更容易存取，這是因為行長度會維持一定比例。
 +
2. 這種版面的 Div 尺寸調整是以 Body 元素中的 100% 字體大小為基礎。如果您在 Body 元素或 #container 上使用 font-size: 80% 藉以減少整體文字大小，請記住，整個版面將會依比例縮小。您可能會想要增加各種 Div 的寬度來補償這種情況。
 +
3. 如果字體尺寸調整是以不同的量在每個 Div 而非整體設計上變更 (亦即：#sidebar1 指定為 70% 字體大小而 #mainContent 指定為 85% 字體大小)，這樣就會依比例變更每個 Div 的整體大小。您可能會想要根據最終的字體尺寸來對這些 Div 進行調整。
 +
*/
 +
.twoColElsLt #container {
 +
width: 46em;  /* 如果文字保持瀏覽器的預設字體大小，這個寬度將會建立可容納在 800px 瀏覽器視窗中的容器 */
 +
background: #FFFFFF;
 +
margin: 0 auto; /* 自動邊界 (搭配寬度) 會讓頁面置中對齊 */
 +
border: 1px solid #000000;
 +
text-align: left; /* 這樣做會覆寫 Body 元素上的 text-align: center。 */
 +
}
 +
/* sidebar1 的提示：
 +
1. 請注意，如果您在這個 Div 上設定 font-size 值，Div 的整體寬度將加以調整。
 +
2. 因為我們是以 em 為單位進行工作，所以最好不要在邊列本身上使用欄位間隔。它將會新增至寬度，而讓符合標準的瀏覽器建立不明的實際寬度。
 +
3. 您可以根據在 ".twoColElsLt #sidebar1 p" 規則中看見的方式，將左和右邊界放置於 Div 內部的元素上，藉以建立 Div 側邊與內部元素之間的空間。
 +
*/
 +
.twoColElsLt #sidebar1 {
 +
float: left;
 +
width: 12em; /* 因為這個元素是浮動元素，所以您必須指定寬度 */
 +
background: #EBEBEB; /* 背景顏色將會針對欄的內容長度而顯示，但僅止於此 */
 +
padding: 15px 0; /* 頂端和底部欄位間隔會在這個 Div 內部建立視覺空間 */
 +
}
 +
.twoColElsLt #sidebar1 h3, .twoColElsLt #sidebar1 p {
 +
margin-left: 10px; /* 您應該針對將要放置於側邊欄的每個元素，指定左和右邊界 */
 +
margin-right: 10px;
 +
}
-
[[ABC]]
+
/* mainContent 的提示：
-
[[明道iGEM]]
+
1. 如果您針對這個 #mainContent Div 和 #sidebar1 Div 指定不同的 font-size 值，則 #mainContent Div 的邊界將會以其 font-size 為基礎，而 #sidebar1 Div 的寬度將會以其 font-size 為基礎。您可能會想要調整這些 Div 的值。
 +
2. mainContent 和 sidebar1 之間的空間是以 mainContent Div 的左邊界建立的。不論 sidebar1 Div 包含多少內容，欄空間將維持不變。當 #sidebar1 的內容結束時，如果您想讓 #mainContent Div 的文字填滿 #sidebar1 的空間，就可以移除這個左邊界。
 +
3. 若要避免浮動遺失，您可能需要進行測試以便判斷約略的影像/元素大小上限，因為這個版面是以使用者的字體尺寸結合您所設定的值為基礎。不過，如果使用者將他們的瀏覽器字體大小設定為低於一般大小，#mainContent Div 中的可用空間將會比您在測試時看見的空間更少。
 +
4. 在下列 Internet Explorer 條件註解中，縮放屬性是用來提供 mainContent "hasLayout"。這樣做可避免許多可能會發生的 IE 特有錯誤。
 +
*/
 +
.twoColElsLt #mainContent {
 +
margin: 0 1.5em 0 13em; /* 右邊界的指定方式可以使用 em 或像素為單位。它會在頁面的右下方建立空間。 */
 +
}
 +
 
 +
/* 可重複使用的雜項類別 */
 +
.fltrt { /* 這個類別可用來讓頁面右邊的元素浮動。浮動元素必須位於頁面上必須相鄰的元素前面。 */
 +
float: right;
 +
margin-left: 8px;
 +
}
 +
.fltlft { /* 這個類別可用來讓頁面左邊的元素浮動 */
 +
float: left;
 +
margin-right: 8px;
 +
}
 +
.clearfloat { /* 這個類別應該放置於 Div 或 Break 元素上，而且應該是完整包含浮動的容器關閉前的最後一個元素 */
 +
clear:both;
 +
    height:0;
 +
    font-size: 1px;
 +
    line-height: 0px;
 +
}
 +
-->
 +
</style><!--[if IE]>
 +
<style type="text/css">
 +
@charset "UTF-8";
 +
 
 +
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
 +
 
 +
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 +
 
 +
/*******************************************************************************
 +
 
 +
LAYOUT INFORMATION: describes box model, positioning, z-order
 +
 
 +
*******************************************************************************/
 +
 
 +
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
 +
ul.MenuBarHorizontal
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
 +
cursor: default;
 +
width: auto;
 +
}
 +
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
 +
ul.MenuBarActive
 +
{
 +
z-index: 1000;
 +
}
 +
/* Menu item containers, position children relative to this container and are a fixed width */
 +
ul.MenuBarHorizontal li
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
 +
position: relative;
 +
text-align: left;
 +
cursor: pointer;
 +
width: 8em;
 +
float: left;
 +
}
 +
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
 +
ul.MenuBarHorizontal ul
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
 +
z-index: 1020;
 +
cursor: default;
 +
width: 8.2em;
 +
position: absolute;
 +
left: -1000em;
 +
}
 +
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
 +
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
 +
{
 +
left: auto;
 +
}
 +
/* Menu item containers are same fixed width as parent */
 +
ul.MenuBarHorizontal ul li
 +
{
 +
width: 8.2em;
 +
}
 +
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
 +
ul.MenuBarHorizontal ul ul
 +
{
 +
position: absolute;
 +
margin: -5% 0 0 95%;
 +
}
 +
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
 +
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
 +
{
 +
left: auto;
 +
top: 0;
 +
}
 +
 
 +
/*******************************************************************************
 +
 
 +
DESIGN INFORMATION: describes color scheme, borders, fonts
 +
 
 +
*******************************************************************************/
 +
 
 +
/* Submenu containers have borders on all sides */
 +
ul.MenuBarHorizontal ul
 +
{
 +
border: 1px solid #CCC;
 +
}
 +
/* Menu items are a light gray block with padding and no text decoration */
 +
ul.MenuBarHorizontal a
 +
{
 +
display: block;
 +
cursor: pointer;
 +
background-color: #EEE;
 +
padding: 0.5em 0.75em;
 +
color: #333;
 +
text-decoration: none;
 +
}
 +
/* Menu items that have mouse over or focus have a blue background and white text */
 +
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
 +
{
 +
background-color: #33C;
 +
color: #FFF;
 +
}
 +
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
 +
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
 +
{
 +
background-color: #33C;
 +
color: #FFF;
 +
}
 +
 
 +
/*******************************************************************************
 +
 
 +
SUBMENU INDICATION: styles if there is a submenu under a given menu item
 +
 
 +
*******************************************************************************/
 +
 
 +
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
 +
ul.MenuBarHorizontal a.MenuBarItemSubmenu
 +
{
 +
background-image: url(SpryMenuBarDown.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
 +
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
 +
{
 +
background-image: url(SpryMenuBarRight.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
 +
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
 +
{
 +
background-image: url(SpryMenuBarDownHover.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
 +
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
 +
{
 +
background-image: url(SpryMenuBarRightHover.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
 
 +
/*******************************************************************************
 +
 
 +
BROWSER HACKS: the hacks below should not be changed unless you are an expert
 +
 
 +
*******************************************************************************/
 +
 
 +
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
 +
ul.MenuBarHorizontal iframe
 +
{
 +
position: absolute;
 +
z-index: 1010;
 +
}
 +
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
 +
@media screen, projection
 +
{
 +
ul.MenuBarHorizontal li.MenuBarItemIE
 +
{
 +
display: inline;
 +
f\loat: left;
 +
background: #FFF;
 +
}
 +
}
 +
 
 +
 
 +
/* 在這個條件註解中，放置所有 IE 版本的 CSS 修正 */
 +
.twoColElsLt #sidebar1 { padding-top: 30px; }
 +
.twoColElsLt #mainContent { zoom: 1; padding-top: 15px; }
 +
/* 上面的專用縮放屬性會提供 IE 所需的 hasLayout，以避免許多錯誤 */
 +
</style>
 +
<![endif]-->
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</head>
 +
 
 +
<body class="twoColElsLt">
 +
 
 +
<div id="container">
 +
  <div id="sidebar1">
 +
<h3>sidebar1 內容</h3>
 +
<p>這個 Div 的背景顏色只會針對內容長度而顯示。如果您想要改用分隔行，而且 #mainContent Div 總是會比 #sidebar1 Div 包含較多內容，請將邊框放置於 #mainContent Div 的左邊。 </p>
 +
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
 +
  <!-- end #sidebar1 --></div>
 +
  <div id="mainContent">
 +
<ul id="MenuBar1" class="MenuBarHorizontal">
 +
  <li><a class="MenuBarItemSubmenu" href="#">項目 1</a>
 +
      <ul>
 +
        <li><a href="#">項目 1.1</a></li>
 +
        <li><a href="#">項目 1.2</a></li>
 +
        <li><a href="#">項目 1.3</a></li>
 +
      </ul>
 +
  </li>
 +
  <li></li>
 +
  <li><a class="MenuBarItemSubmenu" href="#">項目 3</a>
 +
      <ul>
 +
        <li><a class="MenuBarItemSubmenu" href="#">項目 3.1</a>
 +
            <ul>
 +
              <li><a href="#">項目 3.1.1</a></li>
 +
              <li><a href="#">項目 3.1.2</a></li>
 +
            </ul>
 +
        </li>
 +
        <li><a href="#">項目 3.2</a></li>
 +
        <li><a href="#">項目 3.3</a></li>
 +
      </ul>
 +
  </li>
 +
  <li><a href="#">項目 4</a></li>
 +
</ul>
 +
<h1>&nbsp; </h1>
 +
<h1>主要內容 </h1>
 +
<p>Test</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
    <h2>H2 層級標題 </h2>
 +
    <p>Test thingy</p>
 +
    <p>&nbsp;</p>
 +
    <h3>H3 Tag</h3>
 +
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
 +
  <!-- end #mainContent --></div>
 +
<!-- 這個清除元素應該緊接在 #mainContent Div 之後，以便強制 #container Div 包含所有子浮動 --><br class="clearfloat" />
 +
<!-- end #container --></div>
 +
<script type="text/javascript">
 +
<!--
 +
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
 +
//-->
 +
</script>
 +
</body>
 +
</html>

Revision as of 07:11, 7 March 2014

<script>

/* SpryMenuBar.js - Revision: Spry Preview Release 1.4 */

// Copyright (c) 2006. Adobe Systems Incorporated. // All rights reserved. // // Redistribution and use in source and binary forms, with or without // modification, are permitted provided that the following conditions are met: // // * Redistributions of source code must retain the above copyright notice, // this list of conditions and the following disclaimer. // * Redistributions in binary form must reproduce the above copyright notice, // this list of conditions and the following disclaimer in the documentation // and/or other materials provided with the distribution. // * Neither the name of Adobe Systems Incorporated nor the names of its // contributors may be used to endorse or promote products derived from this // software without specific prior written permission. // // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE // POSSIBILITY OF SUCH DAMAGE.

/******************************************************************************* 

SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar.  You should have no need
to edit this file.  Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.

*******************************************************************************/

var Spry; if(!Spry) { Spry = {}; } if(!Spry.Widget) { Spry.Widget = {}; }

// Constructor for Menu Bar

// element should be an ID of an unordered list (
    tag) // preloadImage1 and preloadImage2 are images for the rollover state of a menu Spry.Widget.MenuBar = function(element, opts) { this.init(element, opts); }; Spry.Widget.MenuBar.prototype.init = function(element, opts) { this.element = this.getElement(element); // represents the current (sub)menu we are operating on this.currMenu = null; var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE'); if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined')) { // bail on older unsupported browsers return; } // load hover images now if(opts) { for(var k in opts) { var rollover = new Image; rollover.src = opts[k]; } } if(this.element) { this.currMenu = this.element; var items = this.element.getElementsByTagName('li'); for(var i=0; i<items.length; i++) { this.initialize(items[i], element, isie); if(isie) { this.addClassName(items[i], "MenuBarItemIE"); items[i].style.position = "static"; } } if(isie) { if(this.hasClassName(this.element, "MenuBarVertical")) { this.element.style.position = "relative"; } var linkitems = this.element.getElementsByTagName('a'); for(var i=0; i<linkitems.length; i++) { linkitems[i].style.position = "relative"; } } } }; Spry.Widget.MenuBar.prototype.getElement = function(ele) { if (ele && typeof ele == "string") return document.getElementById(ele); return ele; }; Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className) { if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1) { return false; } return true; }; Spry.Widget.MenuBar.prototype.addClassName = function(ele, className) { if (!ele || !className || this.hasClassName(ele, className)) return; ele.className += (ele.className ? " " : "") + className; }; Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className) { if (!ele || !className || !this.hasClassName(ele, className)) return; ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), ""); }; // addEventListener for Menu Bar // attach an event to a tag without creating obtrusive HTML code Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture) { try { if (element.addEventListener) { element.addEventListener(eventType, handler, capture); } else if (element.attachEvent) { element.attachEvent('on' + eventType, handler); } } catch (e) {} }; // createIframeLayer for Menu Bar // creates an IFRAME underneath a menu so that it will show above form controls and ActiveX Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu) { var layer = document.createElement('iframe'); layer.tabIndex = '-1'; layer.src = 'javascript:false;'; menu.parentNode.appendChild(layer); layer.style.left = menu.offsetLeft + 'px'; layer.style.top = menu.offsetTop + 'px'; layer.style.width = menu.offsetWidth + 'px'; layer.style.height = menu.offsetHeight + 'px'; }; // removeIframeLayer for Menu Bar // removes an IFRAME underneath a menu to reveal any form controls and ActiveX Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu) { var layers = menu.parentNode.getElementsByTagName('iframe'); while(layers.length > 0) { layers[0].parentNode.removeChild(layers[0]); } }; // clearMenus for Menu Bar // root is the top level unordered list (
      tag) Spry.Widget.MenuBar.prototype.clearMenus = function(root) { var menus = root.getElementsByTagName('ul'); for(var i=0; i<menus.length; i++) { this.hideSubmenu(menus[i]); } this.removeClassName(this.element, "MenuBarActive"); }; // bubbledTextEvent for Menu Bar // identify bubbled up text events in Safari so we can ignore them Spry.Widget.MenuBar.prototype.bubbledTextEvent = function() { return (navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget))); }; // showSubmenu for Menu Bar // set the proper CSS class on this menu to show it Spry.Widget.MenuBar.prototype.showSubmenu = function(menu) { if(this.currMenu) { this.clearMenus(this.currMenu); this.currMenu = null; } if(menu) { this.addClassName(menu, "MenuBarSubmenuVisible"); if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE') { if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element) { menu.style.top = menu.parentNode.offsetTop + 'px'; } } if(typeof document.uniqueID != "undefined") { this.createIframeLayer(menu); } } this.addClassName(this.element, "MenuBarActive"); }; // hideSubmenu for Menu Bar // remove the proper CSS class on this menu to hide it Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu) { if(menu) { this.removeClassName(menu, "MenuBarSubmenuVisible"); if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE') { menu.style.top = ; menu.style.left = ; } this.removeIframeLayer(menu); } }; // initialize for Menu Bar // create event listeners for the Menu Bar widget so we can properly // show and hide submenus Spry.Widget.MenuBar.prototype.initialize = function(listitem, element, isie) { var opentime, closetime; var link = listitem.getElementsByTagName('a')[0]; var submenus = listitem.getElementsByTagName('ul'); var menu = (submenus.length > 0 ? submenus[0] : null); var hasSubMenu = false; if(menu) { this.addClassName(link, "MenuBarItemSubmenu"); hasSubMenu = true; } if(!isie) { // define a simple function that comes standard in IE to determine // if a node is within another node listitem.contains = function(testNode) { // this refers to the list item if(testNode == null) { return false; } if(testNode == this) { return true; } else { return this.contains(testNode.parentNode); } }; } // need to save this for scope further down var self = this; this.addEventListener(listitem, 'mouseover', function(e) { if(self.bubbledTextEvent()) { // ignore bubbled text events return; } clearTimeout(closetime); if(self.currMenu == listitem) { self.currMenu = null; } // show menu highlighting self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover"); if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible")) { opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250); } }, false); this.addEventListener(listitem, 'mouseout', function(e) { if(self.bubbledTextEvent()) { // ignore bubbled text events return; } var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement); if(!listitem.contains(related)) { clearTimeout(opentime); self.currMenu = listitem; // remove menu highlighting self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover"); if(menu) { closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600); } } }, false); }; </script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 無標題文件

      sidebar1 內容

      這個 Div 的背景顏色只會針對內容長度而顯示。如果您想要改用分隔行，而且 #mainContent Div 總是會比 #sidebar1 Div 包含較多內容，請將邊框放置於 #mainContent Div 的左邊。

      Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien.

       

      主要內容

      Test

       

       

       

       

      H2 層級標題

      Test thingy

       

      H3 Tag

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.


Retrieved from "http://2014hs.igem.org/Team:Mingdao"