|
|
(54 intermediate revisions not shown) |
Line 2: |
Line 2: |
| <html xmlns="http://www.w3.org/1999/xhtml"> | | <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> | | <head> |
| + | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| <title>无标题文档</title> | | <title>无标题文档</title> |
| <style type="text/css"> | | <style type="text/css"> |
| + | /* hiding the top section*/ |
| + | body{position:absolute; top:0px; width:100%; height:1480px;} |
| + | #top-section{ |
| + | height:0px; |
| + | border:none; |
| + | width:980px; |
| + | margin:0 auto; |
| + | padding:0 0 0 0; |
| + | background-color:transparent; |
| + | overflow:hide; |
| + | |
| + | } |
| + | #p-logo{display:none;} |
| + | #search-controls{display:none;} |
| + | #top{display:none;} |
| + | .firstHeading{display:none;} |
| + | /* end of hiding the top section*/ |
| + | |
| + | /*hiding the footer-box*/ |
| + | #footer-box{display:none;} |
| + | #catlinks{display:none;} |
| + | /*end of hiding the footer book*/ |
| #apDiv1 { | | #apDiv1 { |
| position: absolute; | | position: absolute; |
- | width: 1071px; | + | width: 1375px; |
- | height: 115px; | + | height: 163px; |
| z-index: 1; | | z-index: 1; |
- | left: 3px; | + | top: -2px; |
- | top: 4px; | + | left: -201px; |
| } | | } |
| #apDiv2 { | | #apDiv2 { |
| position: absolute; | | position: absolute; |
- | width: 797px; | + | width: 150px; |
- | height: 61px; | + | height: 280px; |
| z-index: 2; | | z-index: 2; |
- | left: 518px; | + | left: -135px; |
- | top: 55px; | + | top: 0px; |
| } | | } |
- | </style>
| |
- | <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
| |
- | <style type="text/css">
| |
| #apDiv3 { | | #apDiv3 { |
| position: absolute; | | position: absolute; |
- | width: 200px; | + | width: 150px; |
- | height: 255px; | + | height: 280px; |
- | z-index: 3; | + | z-index: 1; |
- | left: 2px; | + | left: 220px; |
- | top: 224px; | + | top: 0px; |
| } | | } |
- | @charset "UTF-8";
| |
- |
| |
- | /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
| |
- |
| |
- | /* 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: medium;
| |
- | 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;
| |
- | padding: 0.75em 0.75em;
| |
- | color: #FFF;
| |
- | text-decoration: none;
| |
- | background-color: #000;
| |
- | }
| |
- | /* 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;
| |
- | font-weight: bold;
| |
- | text-align: center;
| |
- | font-size: medium;
| |
- | }
| |
- | /* 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;
| |
- | filter:alpha(opacity:0.1);
| |
- | }
| |
- | /* 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;
| |
- | }
| |
- | }
| |
- | #apDiv2 #MenuBar1 li a {
| |
- | font-family: 宋体;
| |
- | }
| |
- | </style>
| |
- | <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
| |
- | <style type="text/css">
| |
| #apDiv4 { | | #apDiv4 { |
| position: absolute; | | position: absolute; |
- | width: 972px; | + | width: 150px; |
- | height: 379px; | + | height: 280px; |
- | z-index: 4; | + | z-index: 3; |
- | left: 310px; | + | left: 175px; |
- | top: 224px; | + | top: 0px; |
| } | | } |
| #apDiv5 { | | #apDiv5 { |
| position: absolute; | | position: absolute; |
- | width: 936px; | + | width: 150px; |
- | height: 973px; | + | height: 280px; |
| z-index: 4; | | z-index: 4; |
- | left: 205px; | + | left: 620px; |
- | top: 223px; | + | top: 0px; |
| } | | } |
| #apDiv6 { | | #apDiv6 { |
| position: absolute; | | position: absolute; |
- | width: 45px; | + | width: 150px; |
- | height: 44px; | + | height: 280px; |
- | z-index: 1; | + | z-index: 5; |
- | left: 0px; | + | left: 775px; |
- | top: 145px; | + | top: 0px; |
| } | | } |
| #apDiv7 { | | #apDiv7 { |
| position: absolute; | | position: absolute; |
- | width: 53px; | + | width: 150px; |
- | height: 47px; | + | height: 280px; |
- | z-index: 1; | + | z-index: 6; |
- | left: 6px; | + | left: 930px; |
- | top: 458px; | + | top: 0px; |
| } | | } |
| #apDiv8 { | | #apDiv8 { |
| position: absolute; | | position: absolute; |
- | width: 44px; | + | width: 914px; |
- | height: 39px; | + | height: 400px; |
- | z-index: 1; | + | z-index: 7; |
- | left: -5px; | + | left: 30px; |
- | top: 480px; | + | top: 387px; |
| } | | } |
- | @charset "UTF-8";
| + | #apDiv9 { |
- | | + | |
- | /* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
| + | |
- | | + | |
- | /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
| + | |
- | | + | |
- | /*******************************************************************************
| + | |
- | | + | |
- | LAYOUT INFORMATION: describes box model, positioning, z-order
| + | |
- | | + | |
- | *******************************************************************************/
| + | |
- | | + | |
- | /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
| + | |
- | ul.MenuBarVertical
| + | |
- | {
| + | |
- | margin: 0;
| + | |
- | padding: 0;
| + | |
- | list-style-type: none;
| + | |
- | font-size: 100%;
| + | |
- | cursor: default;
| + | |
- | width: 8em;
| + | |
- | }
| + | |
- | /* 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 same fixed width as parent */
| + | |
- | ul.MenuBarVertical li
| + | |
- | {
| + | |
- | margin: 0;
| + | |
- | padding: 0;
| + | |
- | list-style-type: none;
| + | |
- | font-size: 100%;
| + | |
- | position: relative;
| + | |
- | text-align: left;
| + | |
- | cursor: pointer;
| + | |
- | width: 10em;
| + | |
- | background-color: #0066CC;
| + | |
- | }
| + | |
- | /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
| + | |
- | ul.MenuBarVertical ul
| + | |
- | { | + | |
- | margin: -5% 0 0 95%;
| + | |
- | padding: 0;
| + | |
- | list-style-type: none;
| + | |
- | font-size: 100%;
| + | |
| position: absolute; | | position: absolute; |
- | z-index: 1020; | + | width: 200px; |
- | cursor: default; | + | height: 200px; |
- | width: 8.2em; | + | z-index: 8; |
- | left: -1000em; | + | left: 360px; |
- | top: 0; | + | top: 0px; |
| } | | } |
- | /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ | + | </style> |
- | ul.MenuBarVertical ul.MenuBarSubmenuVisible
| + | <script type="text/javascript"> |
- | {
| + | function MM_swapImgRestore() { //v3.0 |
- | left: 0;
| + | var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; |
| } | | } |
- | /* Menu item containers are same fixed width as parent */ | + | function MM_preloadImages() { //v3.0 |
- | ul.MenuBarVertical ul li
| + | var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); |
- | { | + | var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) |
- | width: 8.2em;
| + | if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} |
| } | | } |
| | | |
- | /******************************************************************************* | + | function MM_findObj(n, d) { //v4.01 |
- | | + | var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { |
- | DESIGN INFORMATION: describes color scheme, borders, fonts
| + | d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} |
- | | + | if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; |
- | *******************************************************************************/ | + | for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); |
- | | + | if(!x && d.getElementById) x=d.getElementById(n); return x; |
- | /* Outermost menu container has borders on all sides */
| + | |
- | ul.MenuBarVertical
| + | |
- | { | + | |
- | | + | |
- | }
| + | |
- | /* Submenu containers have borders on all sides */
| + | |
- | ul.MenuBarVertical ul
| + | |
- | {
| + | |
- | border: 1px solid #CCC;
| + | |
- | } | + | |
- | /* Menu items are a light gray block with padding and no text decoration */
| + | |
- | ul.MenuBarVertical a
| + | |
- | {
| + | |
- | display: block;
| + | |
- | cursor: pointer;
| + | |
- | padding: 0.75em 0.75em;
| + | |
- | color: #FFF;
| + | |
- | text-decoration: none;
| + | |
- | }
| + | |
- | /* Menu items that have mouse over or focus have a blue background and white text */
| + | |
- | ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
| + | |
- | {
| + | |
- | background-color: #33C;
| + | |
- | color: #FFF;
| + | |
- | font-size: x-large;
| + | |
- | }
| + | |
- | /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
| + | |
- | ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
| + | |
- | {
| + | |
- | background-color: #33C;
| + | |
- | color: #FFF;
| + | |
| } | | } |
| | | |
- | /******************************************************************************* | + | function MM_swapImage() { //v3.0 |
- | | + | var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) |
- | SUBMENU INDICATION: styles if there is a submenu under a given menu item
| + | if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} |
- | | + | |
- | *******************************************************************************/
| + | |
- | | + | |
- | /* 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.MenuBarVertical a.MenuBarItemSubmenu
| + | |
- | { | + | |
- | background-image: url(SpryMenuBarRight.gif);
| + | |
- | background-repeat: no-repeat;
| + | |
- | background-position: 95% 50%;
| + | |
| } | | } |
- | | + | </script> |
- | /* 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.MenuBarVertical 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.MenuBarVertical iframe
| + | |
- | {
| + | |
- | position: absolute;
| + | |
- | z-index: 1010;
| + | |
- | filter:alpha(opacity:0.1);
| + | |
- | }
| + | |
- | /* 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.MenuBarVertical li.MenuBarItemIE
| + | |
- | {
| + | |
- | display: inline;
| + | |
- | f\loat: left;
| + | |
- | background: #FFF;
| + | |
- | }
| + | |
- | }
| + | |
- | #apDiv4 table tr td {
| + | |
- | font-size: x-large;
| + | |
- | color: #FFF;
| + | |
- | }
| + | |
- | .daxiao {
| + | |
- | font-size: x-large;
| + | |
- | }
| + | |
- | .daxiao {
| + | |
- | font-size: x-large;
| + | |
- | }
| + | |
- | .daxiao {
| + | |
- | font-size: x-large;
| + | |
- | }
| + | |
- | .daxiao {
| + | |
- | font-size: x-large;
| + | |
- | }
| + | |
- | | + | |
- | </style>
| + | |
- | <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
| + | |
| </head> | | </head> |
| | | |
- | <body background="https://static.igem.org/mediawiki/2013/d/de/Slide2-background.jpg"> | + | <body background="https://static.igem.org/mediawiki/2013/7/79/Pattern_018.gif" onload="MM_preloadImages('https://static.igem.org/mediawiki/2013/5/51/Aa.png','https://static.igem.org/mediawiki/2013/0/0f/Bb.png','https://static.igem.org/mediawiki/2013/1/15/Cc.png','https://static.igem.org/mediawiki/2013/2/22/Dd.png','https://static.igem.org/mediawiki/2013/5/5e/Ee.png','https://static.igem.org/mediawiki/2013/f/f1/Ff.png')"> |
- | <div id="apDiv1"><img src="https://static.igem.org/mediawiki/2013/e/e0/%E9%A1%B5%E7%9C%89.jpg" width="1280" height="99" /></div> | + | <div id="apDiv9"><img src="https://static.igem.org/mediawiki/2013/2/28/Logo_1.png" width="227" height="282" /></div> |
- | <div id="apDiv2"> | + | <div id="apDiv1"><img src="https://static.igem.org/mediawiki/2013/a/ad/%E6%A0%87%E9%A2%98%E8%83%8C%E6%99%AF.png" width="1374" height="300" /> |
- | <ul id="MenuBar1" class="MenuBarHorizontal">
| + | <div id="apDiv3"><a href="https://2013.igem.org/Team:AHUT_China/Team" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','https://static.igem.org/mediawiki/2013/0/0f/Bb.png',1)"><img src="https://static.igem.org/mediawiki/2013/5/57/B.png" width="152" height="282" id="Image3" /></a></div> |
- | <li><a href="#"><strong>Home</strong></a> </li>
| + | |
- | <li><a href="team.html" class="MenuBarItemSubmenu"><strong>Team</strong></a>
| + | |
- | <ul>
| + | |
- | <li><a href="#"><strong>Members</strong></a></li>
| + | |
- | <li><a href="#"><strong>Advisors</strong></a></li>
| + | |
- | <li><a href="#"><strong>Students</strong></a></li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | <li><a class="MenuBarItemSubmenu" href="#"><strong>Part</strong></a>
| + | |
- | <ul>
| + | |
- | <li><a href="#">项目 3.1</a> </li>
| + | |
- | <li><a href="#">项目 3.2</a></li>
| + | |
- | <li><a href="#">项目 3.3</a></li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | <li><a href="#" class="MenuBarItemSubmenu"><strong>Modeling</strong></a>
| + | |
- | <ul>
| + | |
- | <li><a href="#">无标题项目</a></li>
| + | |
- | <li><a href="#">无标题项目</a></li>
| + | |
- | <li><a href="#">无标题项目</a></li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | <li><a href="#" class="MenuBarItemSubmenu"><strong>Practice</strong></a>
| + | |
- | <ul>
| + | |
- | <li><a href="#">无标题项目</a></li>
| + | |
- | <li><a href="#">无标题项目</a></li>
| + | |
- | <li><a href="#">无标题项目</a></li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | <li><a href="safety.html"><strong>Safety</strong></a> </li>
| + | |
- | </ul>
| + | |
| </div> | | </div> |
- | <div id="apDiv3"> | + | <div id="apDiv2"><a href="https://2013.igem.org/Team:AHUT_China" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','https://static.igem.org/mediawiki/2013/5/51/Aa.png',1)"><img src="https://static.igem.org/mediawiki/2013/7/70/A.png" width="152" height="282" id="Image2" /></a></div> |
- | <ul id="MenuBar2" class="MenuBarVertical">
| + | <div id="apDiv4"><a href="https://2013.igem.org/Team:AHUT_China/Parts" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','https://static.igem.org/mediawiki/2013/1/15/Cc.png',1)"><img src="https://static.igem.org/mediawiki/2013/e/ee/C.png" width="156" height="282" id="Image4" /></a></div> |
- | <li><a href="#question1" class="daxiao"> Question 1</a> </li>
| + | <div id="apDiv5"><a href="https://2013.igem.org/Team:AHUT_China/Modeling" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','https://static.igem.org/mediawiki/2013/2/22/Dd.png',1)"><img src="https://static.igem.org/mediawiki/2013/5/54/D.png" width="161" height="282" id="Image5" /></a></div> |
- | <li><a href="#question2" class="daxiao"> Question 2</a></li>
| + | <div id="apDiv6"><a href="https://2013.igem.org/Team:AHUT_China/Humanpractice" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','https://static.igem.org/mediawiki/2013/5/5e/Ee.png',1)"><img src="https://static.igem.org/mediawiki/2013/f/fa/E.png" width="159" height="282" id="Image6" /></a></div> |
- | <li><a href="#question3" class="daxiao"> Question 3</a> </li>
| + | <div id="apDiv7"><a href="https://2013.igem.org/Team:AHUT_China/Safety" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','https://static.igem.org/mediawiki/2013/f/f1/Ff.png',1)"><img src="https://static.igem.org/mediawiki/2013/archive/3/3d/20130925104816%21F.png" width="154" height="282" id="Image7" /></a></div> |
- | </ul>
| + | <div id="apDiv8"><img src="https://static.igem.org/mediawiki/2013/5/5b/Safety%E6%9C%80%E5%90%8E.png" width="926" height="1534" /></div> |
- | </div>
| + | |
- | <div id="apDiv5"><img src="https://static.igem.org/mediawiki/2013/d/d5/Safety.jpg" width="926" height="1563" />
| + | |
- | <div id="apDiv6">
| + | |
- | <div id="apDiv7">
| + | |
- | <div id="apDiv8"></div>
| + | |
- | <a name="question2" id="question2"></a> </div>
| + | |
- | <a name="question1" id="question1"></a> </div>
| + | |
- | </div>
| + | |
- | <script type="text/javascript">
| + | |
- | var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
| + | |
- | var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
| + | |
- | // SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1
| + | |
- | //
| + | |
- | // 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.
| + | |
- | | + | |
- | *******************************************************************************/
| + | |
- | | + | |
- | (function() { // BeginSpryComponent
| + | |
- | | + | |
- | if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
| + | |
- | | + | |
- | Spry.BrowserSniff = function()
| + | |
- | {
| + | |
- | var b = navigator.appName.toString();
| + | |
- | var up = navigator.platform.toString();
| + | |
- | var ua = navigator.userAgent.toString();
| + | |
- | | + | |
- | this.mozilla = this.ie = this.opera = this.safari = false;
| + | |
- | var re_opera = /Opera.([0-9\.]*)/i;
| + | |
- | var re_msie = /MSIE.([0-9\.]*)/i;
| + | |
- | var re_gecko = /gecko/i;
| + | |
- | var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
| + | |
- | var r = false;
| + | |
- | | + | |
- | if ( (r = ua.match(re_opera))) {
| + | |
- | this.opera = true;
| + | |
- | this.version = parseFloat(r[1]);
| + | |
- | } else if ( (r = ua.match(re_msie))) {
| + | |
- | this.ie = true;
| + | |
- | this.version = parseFloat(r[1]);
| + | |
- | } else if ( (r = ua.match(re_safari))) {
| + | |
- | this.safari = true;
| + | |
- | this.version = parseFloat(r[2]);
| + | |
- | } else if (ua.match(re_gecko)) {
| + | |
- | var re_gecko_version = /rv:\s*([0-9\.]+)/i;
| + | |
- | r = ua.match(re_gecko_version);
| + | |
- | this.mozilla = true;
| + | |
- | this.version = parseFloat(r[1]);
| + | |
- | }
| + | |
- | this.windows = this.mac = this.linux = false;
| + | |
- | | + | |
- | this.Platform = ua.match(/windows/i) ? "windows" :
| + | |
- | (ua.match(/linux/i) ? "linux" :
| + | |
- | (ua.match(/mac/i) ? "mac" :
| + | |
- | ua.match(/unix/i)? "unix" : "unknown"));
| + | |
- | this[this.Platform] = true;
| + | |
- | this.v = this.version;
| + | |
- | | + | |
- | if (this.safari && this.mac && this.mozilla) {
| + | |
- | this.mozilla = false;
| + | |
- | }
| + | |
- | };
| + | |
- | | + | |
- | Spry.is = new Spry.BrowserSniff();
| + | |
- | | + | |
- | // 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);
| + | |
- | };
| + | |
- | | + | |
- | 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;
| + | |
- | this.showDelay = 250;
| + | |
- | this.hideDelay = 600;
| + | |
- | if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
| + | |
- | {
| + | |
- | // bail on older unsupported browsers
| + | |
- | return;
| + | |
- | }
| + | |
- | | + | |
- | // Fix IE6 CSS images flicker
| + | |
- | if (Spry.is.ie && Spry.is.version < 7){
| + | |
- | try {
| + | |
- | document.execCommand("BackgroundImageCache", false, true);
| + | |
- | } catch(err) {}
| + | |
- | }
| + | |
- | | + | |
- | this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
| + | |
- | this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
| + | |
- | this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
| + | |
- | this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
| + | |
- | this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
| + | |
- | | + | |
- | this.hoverClass = 'MenuBarItemHover';
| + | |
- | this.subHoverClass = 'MenuBarItemSubmenuHover';
| + | |
- | this.subVisibleClass ='MenuBarSubmenuVisible';
| + | |
- | this.hasSubClass = 'MenuBarItemSubmenu';
| + | |
- | this.activeClass = 'MenuBarActive';
| + | |
- | this.isieClass = 'MenuBarItemIE';
| + | |
- | this.verticalClass = 'MenuBarVertical';
| + | |
- | this.horizontalClass = 'MenuBarHorizontal';
| + | |
- | this.enableKeyboardNavigation = true;
| + | |
- | | + | |
- | this.hasFocus = false;
| + | |
- | // load hover images now
| + | |
- | if(opts)
| + | |
- | {
| + | |
- | for(var k in opts)
| + | |
- | {
| + | |
- | if (typeof this[k] == 'undefined')
| + | |
- | {
| + | |
- | var rollover = new Image;
| + | |
- | rollover.src = opts[k];
| + | |
- | }
| + | |
- | }
| + | |
- | Spry.Widget.MenuBar.setOptions(this, opts);
| + | |
- | }
| + | |
- | | + | |
- | // safari doesn't support tabindex
| + | |
- | if (Spry.is.safari)
| + | |
- | this.enableKeyboardNavigation = false;
| + | |
- | | + | |
- | if(this.element)
| + | |
- | {
| + | |
- | this.currMenu = this.element;
| + | |
- | var items = this.element.getElementsByTagName('li');
| + | |
- | for(var i=0; i<items.length; i++)
| + | |
- | {
| + | |
- | if (i > 0 && this.enableKeyboardNavigation)
| + | |
- | items[i].getElementsByTagName('a')[0].tabIndex='-1';
| + | |
- | | + | |
- | this.initialize(items[i], element);
| + | |
- | if(Spry.is.ie)
| + | |
- | {
| + | |
- | this.addClassName(items[i], this.isieClass);
| + | |
- | items[i].style.position = "static";
| + | |
- | }
| + | |
- | }
| + | |
- | if (this.enableKeyboardNavigation)
| + | |
- | {
| + | |
- | var self = this;
| + | |
- | this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
| + | |
- | }
| + | |
- | | + | |
- | if(Spry.is.ie)
| + | |
- | {
| + | |
- | if(this.hasClassName(this.element, this.verticalClass))
| + | |
- | {
| + | |
- | 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.KEY_ESC = 27;
| + | |
- | Spry.Widget.MenuBar.KEY_UP = 38;
| + | |
- | Spry.Widget.MenuBar.KEY_DOWN = 40;
| + | |
- | Spry.Widget.MenuBar.KEY_LEFT = 37;
| + | |
- | Spry.Widget.MenuBar.KEY_RIGHT = 39;
| + | |
- | | + | |
- | 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:""';
| + | |
- | layer.frameBorder = '0';
| + | |
- | layer.scrolling = 'no';
| + | |
- | 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 == this.element) ? menu : 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 (<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, this.activeClass);
| + | |
- | };
| + | |
- | | + | |
- | // bubbledTextEvent for Menu Bar | + | |
- | // identify bubbled up text events in Safari so we can ignore them
| + | |
- | Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
| + | |
- | {
| + | |
- | return Spry.is.safari && (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, this.subVisibleClass);
| + | |
- | if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
| + | |
- | {
| + | |
- | if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
| + | |
- | {
| + | |
- | menu.style.top = menu.parentNode.offsetTop + 'px';
| + | |
- | }
| + | |
- | }
| + | |
- | if(Spry.is.ie && Spry.is.version < 7)
| + | |
- | {
| + | |
- | this.createIframeLayer(menu);
| + | |
- | }
| + | |
- | }
| + | |
- | this.addClassName(this.element, this.activeClass);
| + | |
- | };
| + | |
- | | + | |
- | // 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, this.subVisibleClass);
| + | |
- | if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
| + | |
- | {
| + | |
- | menu.style.top = '';
| + | |
- | menu.style.left = '';
| + | |
- | }
| + | |
- | if(Spry.is.ie && Spry.is.version < 7)
| + | |
- | 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)
| + | |
- | {
| + | |
- | var opentime, closetime;
| + | |
- | var link = listitem.getElementsByTagName('a')[0];
| + | |
- | var submenus = listitem.getElementsByTagName('ul');
| + | |
- | var menu = (submenus.length > 0 ? submenus[0] : null);
| + | |
- | | + | |
- | if(menu)
| + | |
- | this.addClassName(link, this.hasSubClass);
| + | |
- | | + | |
- | if(!Spry.is.ie)
| + | |
- | {
| + | |
- | // 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){self.mouseOver(listitem, e);}, false);
| + | |
- | this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
| + | |
- | | + | |
- | if (this.enableKeyboardNavigation)
| + | |
- | {
| + | |
- | this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
| + | |
- | this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
| + | |
- | }
| + | |
- | };
| + | |
- | Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
| + | |
- | {
| + | |
- | this.lastOpen = listitem.getElementsByTagName('a')[0];
| + | |
- | this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
| + | |
- | this.hasFocus = true;
| + | |
- | };
| + | |
- | Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
| + | |
- | {
| + | |
- | this.clearSelection(listitem);
| + | |
- | };
| + | |
- | Spry.Widget.MenuBar.prototype.clearSelection = function(el){
| + | |
- | //search any intersection with the current open element
| + | |
- | if (!this.lastOpen)
| + | |
- | return;
| + | |
- | | + | |
- | if (el)
| + | |
- | {
| + | |
- | el = el.getElementsByTagName('a')[0];
| + | |
- |
| + | |
- | // check children
| + | |
- | var item = this.lastOpen;
| + | |
- | while (item != this.element)
| + | |
- | {
| + | |
- | var tmp = el;
| + | |
- | while (tmp != this.element)
| + | |
- | {
| + | |
- | if (tmp == item)
| + | |
- | return;
| + | |
- | try{
| + | |
- | tmp = tmp.parentNode;
| + | |
- | }catch(err){break;}
| + | |
- | }
| + | |
- | item = item.parentNode;
| + | |
- | }
| + | |
- | }
| + | |
- | var item = this.lastOpen;
| + | |
- | while (item != this.element)
| + | |
- | {
| + | |
- | this.hideSubmenu(item.parentNode);
| + | |
- | var link = item.getElementsByTagName('a')[0];
| + | |
- | this.removeClassName(link, this.hoverClass);
| + | |
- | this.removeClassName(link, this.subHoverClass);
| + | |
- | item = item.parentNode;
| + | |
- | }
| + | |
- | this.lastOpen = false;
| + | |
- | };
| + | |
- | Spry.Widget.MenuBar.prototype.keyDown = function (e)
| + | |
- | {
| + | |
- | if (!this.hasFocus)
| + | |
- | return;
| + | |
- | | + | |
- | if (!this.lastOpen)
| + | |
- | {
| + | |
- | this.hasFocus = false;
| + | |
- | return;
| + | |
- | }
| + | |
- | | + | |
- | var e = e|| event;
| + | |
- | var listitem = this.lastOpen.parentNode;
| + | |
- | var link = this.lastOpen;
| + | |
- | var submenus = listitem.getElementsByTagName('ul');
| + | |
- | var menu = (submenus.length > 0 ? submenus[0] : null);
| + | |
- | var hasSubMenu = (menu) ? true : false;
| + | |
- | | + | |
- | var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
| + | |
- |
| + | |
- | if (!opts[3])
| + | |
- | opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
| + | |
- | | + | |
- | var found = 0;
| + | |
- | switch (e.keyCode){
| + | |
- | case this.upKeyCode:
| + | |
- | found = this.getElementForKey(opts, 'y', 1);
| + | |
- | break;
| + | |
- | case this.downKeyCode:
| + | |
- | found = this.getElementForKey(opts, 'y', -1);
| + | |
- | break;
| + | |
- | case this.leftKeyCode:
| + | |
- | found = this.getElementForKey(opts, 'x', 1);
| + | |
- | break;
| + | |
- | case this.rightKeyCode:
| + | |
- | found = this.getElementForKey(opts, 'x', -1);
| + | |
- | break;
| + | |
- | case this.escKeyCode:
| + | |
- | case 9:
| + | |
- | this.clearSelection();
| + | |
- | this.hasFocus = false;
| + | |
- | default: return;
| + | |
- | }
| + | |
- | switch (found)
| + | |
- | {
| + | |
- | case 0: return;
| + | |
- | case 1:
| + | |
- | //subopts
| + | |
- | this.mouseOver(listitem, e);
| + | |
- | break;
| + | |
- | case 2:
| + | |
- | //parent
| + | |
- | this.mouseOut(opts[2], e);
| + | |
- | break;
| + | |
- | case 3:
| + | |
- | case 4:
| + | |
- | // left - right
| + | |
- | this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
| + | |
- | break;
| + | |
- | }
| + | |
- | var link = opts[found].getElementsByTagName('a')[0];
| + | |
- | if (opts[found].nodeName.toLowerCase() == 'ul')
| + | |
- | opts[found] = opts[found].getElementsByTagName('li')[0];
| + | |
- | | + | |
- | this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
| + | |
- | this.lastOpen = link;
| + | |
- | opts[found].getElementsByTagName('a')[0].focus();
| + | |
- |
| + | |
- | //stop further event handling by the browser
| + | |
- | return Spry.Widget.MenuBar.stopPropagation(e);
| + | |
- | };
| + | |
- | Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
| + | |
- | {
| + | |
- | var link = listitem.getElementsByTagName('a')[0];
| + | |
- | var submenus = listitem.getElementsByTagName('ul');
| + | |
- | var menu = (submenus.length > 0 ? submenus[0] : null);
| + | |
- | var hasSubMenu = (menu) ? true : false;
| + | |
- | if (this.enableKeyboardNavigation)
| + | |
- | this.clearSelection(listitem);
| + | |
- | | + | |
- | if(this.bubbledTextEvent())
| + | |
- | {
| + | |
- | // ignore bubbled text events
| + | |
- | return;
| + | |
- | }
| + | |
- | | + | |
- | if (listitem.closetime)
| + | |
- | clearTimeout(listitem.closetime);
| + | |
- | | + | |
- | if(this.currMenu == listitem)
| + | |
- | {
| + | |
- | this.currMenu = null;
| + | |
- | }
| + | |
- | | + | |
- | // move the focus too
| + | |
- | if (this.hasFocus)
| + | |
- | link.focus();
| + | |
- | | + | |
- | // show menu highlighting
| + | |
- | this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
| + | |
- | this.lastOpen = link;
| + | |
- | if(menu && !this.hasClassName(menu, this.subHoverClass))
| + | |
- | {
| + | |
- | var self = this;
| + | |
- | listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
| + | |
- | }
| + | |
- | };
| + | |
- | Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
| + | |
- | {
| + | |
- | var link = listitem.getElementsByTagName('a')[0];
| + | |
- | var submenus = listitem.getElementsByTagName('ul');
| + | |
- | var menu = (submenus.length > 0 ? submenus[0] : null);
| + | |
- | var hasSubMenu = (menu) ? true : false;
| + | |
- | if(this.bubbledTextEvent())
| + | |
- | {
| + | |
- | // ignore bubbled text events
| + | |
- | return;
| + | |
- | }
| + | |
- | | + | |
- | var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
| + | |
- | if(!listitem.contains(related))
| + | |
- | {
| + | |
- | if (listitem.opentime)
| + | |
- | clearTimeout(listitem.opentime);
| + | |
- | this.currMenu = listitem;
| + | |
- | | + | |
- | // remove menu highlighting
| + | |
- | this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
| + | |
- | if(menu)
| + | |
- | {
| + | |
- | var self = this;
| + | |
- | listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
| + | |
- | }
| + | |
- | if (this.hasFocus)
| + | |
- | link.blur();
| + | |
- | }
| + | |
- | };
| + | |
- | Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
| + | |
- | {
| + | |
- | var child = element[sibling];
| + | |
- | while (child && child.nodeName.toLowerCase() !='li')
| + | |
- | child = child[sibling];
| + | |
- | | + | |
- | return child;
| + | |
- | };
| + | |
- | Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
| + | |
- | {
| + | |
- | var found = 0;
| + | |
- | var rect = Spry.Widget.MenuBar.getPosition;
| + | |
- | var ref = rect(els[found]);
| + | |
- | | + | |
- | var hideSubmenu = false;
| + | |
- | //make the subelement visible to compute the position
| + | |
- | if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
| + | |
- | {
| + | |
- | els[1].style.visibility = 'hidden';
| + | |
- | this.showSubmenu(els[1]);
| + | |
- | hideSubmenu = true;
| + | |
- | }
| + | |
- | | + | |
- | var isVert = this.hasClassName(this.element, this.verticalClass);
| + | |
- | var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
| + | |
- |
| + | |
- | for (var i = 1; i < els.length; i++){
| + | |
- | //when navigating on the y axis in vertical menus, ignore children and parents
| + | |
- | if(prop=='y' && isVert && (i==1 || i==2))
| + | |
- | {
| + | |
- | continue;
| + | |
- | }
| + | |
- | //when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
| + | |
- | if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
| + | |
- | {
| + | |
- | continue;
| + | |
- | }
| + | |
- |
| + | |
- | if (els[i])
| + | |
- | {
| + | |
- | var tmp = rect(els[i]);
| + | |
- | if ( (dir * tmp[prop]) < (dir * ref[prop]))
| + | |
- | {
| + | |
- | ref = tmp;
| + | |
- | found = i;
| + | |
- | }
| + | |
- | }
| + | |
- | }
| + | |
- |
| + | |
- | // hide back the submenu
| + | |
- | if (els[1] && hideSubmenu){
| + | |
- | this.hideSubmenu(els[1]);
| + | |
- | els[1].style.visibility = '';
| + | |
- | }
| + | |
- | | + | |
- | return found;
| + | |
- | };
| + | |
- | Spry.Widget.MenuBar.camelize = function(str)
| + | |
- | {
| + | |
- | if (str.indexOf('-') == -1){
| + | |
- | return str;
| + | |
- | }
| + | |
- | var oStringList = str.split('-');
| + | |
- | var isFirstEntry = true;
| + | |
- | var camelizedString = '';
| + | |
- | | + | |
- | for(var i=0; i < oStringList.length; i++)
| + | |
- | {
| + | |
- | if(oStringList[i].length>0)
| + | |
- | {
| + | |
- | if(isFirstEntry)
| + | |
- | {
| + | |
- | camelizedString = oStringList[i];
| + | |
- | isFirstEntry = false;
| + | |
- | }
| + | |
- | else
| + | |
- | {
| + | |
- | var s = oStringList[i];
| + | |
- | camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
| + | |
- | }
| + | |
- | }
| + | |
- | }
| + | |
- | | + | |
- | return camelizedString;
| + | |
- | };
| + | |
- | | + | |
- | Spry.Widget.MenuBar.getStyleProp = function(element, prop)
| + | |
- | {
| + | |
- | var value;
| + | |
- | try
| + | |
- | {
| + | |
- | if (element.style)
| + | |
- | value = element.style[Spry.Widget.MenuBar.camelize(prop)];
| + | |
- | | + | |
- | if (!value)
| + | |
- | if (document.defaultView && document.defaultView.getComputedStyle)
| + | |
- | {
| + | |
- | var css = document.defaultView.getComputedStyle(element, null);
| + | |
- | value = css ? css.getPropertyValue(prop) : null;
| + | |
- | }
| + | |
- | else if (element.currentStyle)
| + | |
- | {
| + | |
- | value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
| + | |
- | }
| + | |
- | }
| + | |
- | catch (e) {}
| + | |
- | | + | |
- | return value == 'auto' ? null : value;
| + | |
- | };
| + | |
- | Spry.Widget.MenuBar.getIntProp = function(element, prop)
| + | |
- | {
| + | |
- | var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
| + | |
- | if (isNaN(a))
| + | |
- | return 0;
| + | |
- | return a;
| + | |
- | };
| + | |
- | | + | |
- | Spry.Widget.MenuBar.getPosition = function(el, doc)
| + | |
- | {
| + | |
- | doc = doc || document;
| + | |
- | if (typeof(el) == 'string') {
| + | |
- | el = doc.getElementById(el);
| + | |
- | }
| + | |
- | | + | |
- | if (!el) {
| + | |
- | return false;
| + | |
- | }
| + | |
- | | + | |
- | if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
| + | |
- | //element must be visible to have a box
| + | |
- | return false;
| + | |
- | }
| + | |
- | | + | |
- | var ret = {x:0, y:0};
| + | |
- | var parent = null;
| + | |
- | var box;
| + | |
- | | + | |
- | if (el.getBoundingClientRect) { // IE
| + | |
- | box = el.getBoundingClientRect();
| + | |
- | var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
| + | |
- | var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
| + | |
- | ret.x = box.left + scrollLeft;
| + | |
- | ret.y = box.top + scrollTop;
| + | |
- | } else if (doc.getBoxObjectFor) { // gecko
| + | |
- | box = doc.getBoxObjectFor(el);
| + | |
- | ret.x = box.x;
| + | |
- | ret.y = box.y;
| + | |
- | } else { // safari/opera
| + | |
- | ret.x = el.offsetLeft;
| + | |
- | ret.y = el.offsetTop;
| + | |
- | parent = el.offsetParent;
| + | |
- | if (parent != el) {
| + | |
- | while (parent) {
| + | |
- | ret.x += parent.offsetLeft;
| + | |
- | ret.y += parent.offsetTop;
| + | |
- | parent = parent.offsetParent;
| + | |
- | }
| + | |
- | }
| + | |
- | // opera & (safari absolute) incorrectly account for body offsetTop
| + | |
- | if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
| + | |
- | ret.y -= doc.body.offsetTop;
| + | |
- | }
| + | |
- | if (el.parentNode)
| + | |
- | parent = el.parentNode;
| + | |
- | else
| + | |
- | parent = null;
| + | |
- | if (parent.nodeName){
| + | |
- | var cas = parent.nodeName.toUpperCase();
| + | |
- | while (parent && cas != 'BODY' && cas != 'HTML') {
| + | |
- | cas = parent.nodeName.toUpperCase();
| + | |
- | ret.x -= parent.scrollLeft;
| + | |
- | ret.y -= parent.scrollTop;
| + | |
- | if (parent.parentNode)
| + | |
- | parent = parent.parentNode;
| + | |
- | else
| + | |
- | parent = null;
| + | |
- | }
| + | |
- | }
| + | |
- | return ret;
| + | |
- | };
| + | |
- | | + | |
- | Spry.Widget.MenuBar.stopPropagation = function(ev)
| + | |
- | {
| + | |
- | if (ev.stopPropagation)
| + | |
- | ev.stopPropagation();
| + | |
- | else
| + | |
- | ev.cancelBubble = true;
| + | |
- | if (ev.preventDefault)
| + | |
- | ev.preventDefault();
| + | |
- | else
| + | |
- | ev.returnValue = false;
| + | |
- | };
| + | |
- | | + | |
- | Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
| + | |
- | {
| + | |
- | if (!optionsObj)
| + | |
- | return;
| + | |
- | for (var optionName in optionsObj)
| + | |
- | {
| + | |
- | if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
| + | |
- | continue;
| + | |
- | obj[optionName] = optionsObj[optionName];
| + | |
- | }
| + | |
- | };
| + | |
- | | + | |
- | })(); // EndSpryComponent
| + | |
- | </script> | + | |
| </body> | | </body> |
| </html> | | </html> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">