Team:SUSTC-Shenzhen-A/tutorial

From 2012.igem.org

(Difference between revisions)

Revision as of 06:56, 16 September 2012

BioDesign & BioSearch

-- Synthetic Biology in Your Hand!

The pictures of each step

	123
	123

Tutorial

In this page,the tutorial of the APP will be showed to you.

Step 1 - 4

Step 5 - 8

Step 9 -12

Step 13-16

Step 17-20

Step 21-24

Step 25-28

Step 29-32

@@ Line 177: / Line 177: @@
-<div id="HackBox1" class="HackBox" style="width:100%;display:block;">
+<div id="tagContent0" class="HackBox" style="width:100%;display:block;">
 <div align="center">
 <table border="0" width="95%" cellpadding="0" style="border-collapse: collapse" height="90" id="table1">
@@ Line 205: / Line 205: @@
 </div>
-<div id="HackBox2" class="HackBox" style="width:100%;display:none;">
-<div align="center">
-<table border="0" width="95%" cellpadding="0" style="border-collapse: collapse" height="90" id="table2">
-<tr>
-<td style="line-height: 150%"><b>拜金主义的女人</b> <br>
-　　她不会看上穷光蛋，因为她的爱情首先建立在物质的满足上，她知道花男人的钱比自己辛苦赚来的钱容易，这是她限定和男人交往的条件。和她交往，总有金山银山被挖光的一天，那时只有落的人财两空的局面。</td>
-</tr>
-</table>
-</div>
-</div>
+<div id="tagContent1" class="HackBox" style="width:100%;display:none;">
-<div id="HackBox3" class="HackBox" style="width:100%;display:none;">
 <div align="center">
-<table border="0" width="95%" cellpadding="0" style="border-collapse: collapse" height="90" id="table3">
+<table border="0" width="95%" cellpadding="0" style="border-collapse: collapse" height="90" id="table1">
 <tr>
-<td style="line-height: 150%"><b>歇斯底里的女人</b> <br>
+<td style="line-height: 150%">&nbsp;
-　　她的专长是一哭二闹三上吊，只要稍稍辜负她，她就会以死作威胁，当发现一个女人充满神经质，动不动就有发动千军万马之势，要随时提防它闹出失控的局面，否则就意味着不得安宁的日子从此开始。</td>
+  <table width="200" border="0">
+    <tr>
+      <td><img src="http://taftproot.gotoip2.com/ld/img/tutorial_03.png" width="350" height="550"></td>
+      <td>123</td>
+    </tr>
+    <tr>
+      <td><img src="http://taftproot.gotoip2.com/ld/img/tutorial_04.png" width="350" height="550"></td>
+      <td>123</td>
+    </tr>
+    <tr>
+      <td>&nbsp;</td>
+      <td>&nbsp;</td>
+    </tr>
+    <tr>
+      <td>&nbsp;</td>
+      <td>&nbsp;</td>
+    </tr>
+  </table></td>
 </tr>
 </table>
@@ Line 228: / Line 234: @@
 </div>
-<div id="HackBox4" class="HackBox" style="width:100%;display:none;">
-<div align="center">
-<table border="0" width="95%" cellpadding="0" style="border-collapse: collapse" height="90" id="table4">
-<tr>
-<td style="line-height: 150%"><b>翻脸不认人的女人</b> <br>
-　　不管好的时候多好，一旦反目，她则完全变成另外一个人，毫不留情地公开你们之间所有的秘密，甚至不行玉石俱焚。碰到这样的女人，要有心理准备，分手后她底报复心会炸的你粉身碎骨。 </td>
-</tr>
-</table>
-</div>
-</div>
-<script language="JavaScript">
-function switchTab(tabpage,tabid,show_n){
+<SCRIPT type=text/javascript>
-//alert(show_n);
+function selectTag(showContent,selfObj){
-for(var i=1;i<5;i++){
+	// 标签6a8a.com
-document.getElementById('HackBox'+i).style.display="none";
+	var tag = document.getElementById("tags").getElementsByTagName("li");
+	var taglength = tag.length;
+	for(i=0; i<taglength; i++){
+	tag[i].className = "";
+	}
+	selfObj.parentNode.className = "selectTag";
+	// 标签内容
+	for(i=0; j=document.getElementById("tagContent"+i); i++){
+	j.style.display = "none";
+	}
+	document.getElementById(showContent).style.display = "block";
 }
-document.getElementById(show_n).style.display="block";
+</SCRIPT>
-var oItem = document.getElementById(tabpage);
-for(var i=0;i<oItem.children.length;i++){
-var x = oItem.children(i);
-x.className = "";
-var y = x.getElementsByTagName('a');
-y[0].style.color="#333333";
-}
-document.getElementById(tabid).className = "Selected";
-}
-</script>
@@ Line 306: / Line 300: @@
 						<ul>
 							<li>
-								<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />            <a href="#" onClick="javascript:switchTab('TabPage1','Tab1','HackBox1');">    Step 1    -    4</a>							</li> <br>  							<li>
+								<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />           <A onMouseOver="selectTag('tagContent1',this)"
-								<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />            <a href="#" onClick="javascript:switchTab('TabPage1','Tab2','HackBox2');">    Step 5    -    8</a>							</li><br>
+  href="javascript:void(0)">   Step 1    -    4</a>							</li> <br>  							<li>
+								<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />            <A onMouseOver="selectTag('tagContent2',this)"
+  href="javascript:void(0)">   Step 5    -    8</a>							</li><br>
 							<li>
-								<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />            <a href="#" onClick="javascript:switchTab('TabPage1','Tab3','HackBox3');">   Step 9    -12</a>
+								<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />           <A onMouseOver="selectTag('tagContent3',this)"
+  href="javascript:void(0)">  Step 9    -12</a>
 							</li><br>
 							<li>
-								<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />           <a href="#" onClick="javascript:switchTab('TabPage1','Tab4','HackBox4');">    Step 13-16</a>
+								<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />         <A onMouseOver="selectTag('tagContent4',this)"
+  href="javascript:void(0)">    Step 13-16</a>
 							</li> <br>
 							<li style="list-style-type:none;">
-								<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />            <a href="#" onClick="javascript:switchTab('TabPage1','Tab5','HackBox5');">    Step 17-20</a>							</li><br>
+								<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />         <A onMouseOver="selectTag('tagContent5',this)"
+  href="javascript:void(0)">  Step 17-20</a>							</li><br>
 <li style="list-style-type:none;">
-								<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />            <a href="#">    Step 21-24</a>							</li><br>
+								<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />          <A onMouseOver="selectTag('tagContent6',this)"
+  href="javascript:void(0)">  Step 21-24</a>							</li><br>
 <li style="list-style-type:none;">
-								<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />            <a href="#">    Step 25-28</a>							</li><br>
+								<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />          <A onMouseOver="selectTag('tagContent7',this)"
+  href="javascript:void(0)">   Step 25-28</a>							</li><br>
 <li style="list-style-type:none;">
-								<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />            <a href="#">    Step 29-32</a>							</li><br>
+								<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />          <A onMouseOver="selectTag('tagContent8',this)"
+  href="javascript:void(0)">   Step 29-32</a>							</li><br>