Team:HNU China/Project

From 2014.igem.org

(Difference between revisions)
Line 51: Line 51:
width: 900px;
width: 900px;
margin: auto;
margin: auto;
-
min-height: 100%;
+
min-height: 1;
height: auto;
height: auto;
}
}
Line 70: Line 70:
}
}
#chead{
#chead{
-
margin-top:150px;
+
 
height:91px;
height:91px;
background:url('https://static.igem.org/mediawiki/2014/0/08/Chead.png') no-repeat center;
background:url('https://static.igem.org/mediawiki/2014/0/08/Chead.png') no-repeat center;
Line 83: Line 83:
}
}
 +
.wrapper {
 +
width:850px;
 +
margin:auto;
 +
}
 +
.mbTabset .handler {
 +
padding-right:5px;
 +
position:relative;
 +
margin-left:-5px
 +
}
 +
.mbTabset {
 +
white-space:nowrap;
 +
display:block;
 +
margin-left:20px;
 +
margin-right:20px;
 +
margin-bottom:-1px;
 +
float:left;
 +
position:relative
 +
}
 +
.mbTabset .mbTab {
 +
display:inline-block;
 +
cursor:pointer;
 +
min-width:100px
 +
}
 +
.mbTabset .mbTab.disabled {
 +
cursor:default
 +
}
 +
.mbTabset.right {
 +
float:right
 +
}
 +
.mbTabset .mbTab i {
 +
width:25px;
 +
position:relative;
 +
margin-left:-7px;
 +
padding-right:5px;
 +
margin-right:8px;
 +
cursor:move
 +
}
 +
.mbTabset .floatEl {
 +
float:left;
 +
}
 +
.mbTabset a.mbTab {
 +
background-color:transparent;
 +
background-image: url( 'https://static.igem.org/mediawiki/2014/7/7b/Tab_right.png' );
 +
background-repeat:no-repeat;
 +
background-position:top right;
 +
color: #666;
 +
display:block; /*opera*/
 +
display:inline-block; /*ie*/
 +
font: normal 13px arial, sans-serif;
 +
height: 28px;
 +
margin-right: 0;
 +
padding-right: 33px;
 +
text-decoration: none;
 +
}
 +
.mbTabset a.mbTab span.sortable {
 +
background-color:transparent;
 +
background-image: url( 'https://static.igem.org/mediawiki/2014/e/e0/Tab_grep.png' );
 +
background-repeat:no-repeat;
 +
display: block;
 +
line-height: 21px;
 +
padding: 3px 0 4px 10px;
 +
}
 +
.mbTabset a.mbTab span img {
 +
margin-left:-5px;
 +
margin-top:-2px;
 +
padding-right:5px;
 +
}
 +
/*HOVER*/
 +
.mbTabset a.mbTab:hover {
 +
background-image: url( 'https://static.igem.org/mediawiki/2014/3/36/Tab_right_hover.png' );
 +
color: #000;
 +
outline: none;
 +
}
 +
.mbTabset a.mbTab:hover span.sortable {
 +
background-image:url( 'https://static.igem.org/mediawiki/2014/2/27/Tab_hover_grep.png');
 +
}
 +
/*SELECTED*/
 +
.mbTabset a.mbTab.sel {
 +
background-image: url( 'https://static.igem.org/mediawiki/2014/8/88/Tab_right_sel.png' );
 +
color: #000;
 +
outline: none;
 +
}
 +
.mbTabset a.mbTab.sel span.sortable {
 +
background-image:url( 'https://static.igem.org/mediawiki/2014/5/5b/Tab_sel_grep.png');
 +
}
 +
/*DISABLED*/
 +
.mbTabset a.mbTab.disabled {
 +
background-image: url( 'https://static.igem.org/mediawiki/2014/7/7b/Tab_right.png' );
 +
color: #999;
 +
outline: none;
 +
}
 +
.mbTabset a.mbTab.disabled span.sortable {
 +
background-image:url( 'https://static.igem.org/mediawiki/2014/e/e0/Tab_grep.png');
 +
}
 +
/*CONTAINER*/
 +
.mbTabsetContainer {
 +
clear:both;
 +
}
 +
.tabContent {
 +
padding:0px;
 +
}
</style>
</style>
 +
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
 +
<script type="text/javascript" src="http://xtms.info/js/ui.core.min.js"></script>
 +
<script type="text/javascript" src="http://xtms.info/js/ui.sortable.min.js"></script>
 +
<script type="text/javascript" src="http://xtms.info/js/jquery.metadata.js"></script>
 +
<script type="text/javascript" src="http://xtms.info/js/mbTabset.js"></script>
 +
<script type="text/javascript">
 +
$(function(){
 +
$("#tabset1").buildMbTabset({
 +
stop:function(){if ($("#array").is(":checked")) alert($.mbTabset.mbTabsetArray)},
 +
sortable:true
 +
});
 +
$("#tabset2").buildMbTabset({
 +
stop:function(){if ($("#array").is(":checked")) alert($.mbTabset.mbTabsetArray)},
 +
sortable:false,
 +
position:"left"
 +
});
 +
//$("#b").selectMbTab();
 +
});
 +
    var ajaxUrl="content_2.html";   
 +
    var ajaxD="pippo=1&pluto=2";
 +
 +
</script>
</head>
</head>
<body>
<body>
 +
     <div id="menu">
     <div id="menu">
         <ul>
         <ul>
Line 132: Line 256:
         </ul>
         </ul>
     </div>
     </div>
 +
<div class="wrapper">
 +
  <div class="tabset" id="tabset1"><a id="a" class="tab sel {content:'cont_1'}">project1</a><a id="b" class="tab {content:'cont_2'}">project2</a><a id="c" class="tab {content:'cont_3'}">project3</a><a id="d" class="tab {content:'cont_4'}" >project4</a><a id="a" class="tab {content:'cont_5'}" >project5</a></div>
 +
  <div id="cont_1">
 +
    <div id="chead"></div>
 +
<div id="cmiddle">project1<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>长度测试</div>
 +
<div id="cfoot"></div>
 +
</div>
 +
  <div id="cont_2">
 +
    <div id="chead"></div>
 +
<div id="cmiddle">2</div>
 +
<div id="cfoot"></div>
 +
  </div>
 +
 +
  <div id="cont_3">
 +
    <div id="chead"></div>
 +
<div id="cmiddle">3</div>
 +
<div id="cfoot"></div>
 +
</div>
 +
  <div id="cont_4">
   <div id="chead"></div>
   <div id="chead"></div>
-
<div id="cmiddle">这里是内容</div>
+
<div id="cmiddle">4</div>
<div id="cfoot"></div>
<div id="cfoot"></div>
 +
  </div>
 +
  <div id="cont_5">
 +
  <div id="chead"></div>
 +
<div id="cmiddle">5</div>
 +
<div id="cfoot"></div>
 +
  </div>
 +
 +
  </div>
</body>
</body>
</html>
</html>

Revision as of 08:59, 24 July 2014

project1


























长度测试
2
3
4
5