"
Team:HNU China/Parts
From 2014.igem.org
(Difference between revisions)
| Line 51: | Line 51: | ||
width: 900px; | width: 900px; | ||
margin: auto; | margin: auto; | ||
| - | min-height: | + | min-height: 1; |
height: auto; | height: auto; | ||
} | } | ||
| Line 70: | Line 70: | ||
} | } | ||
#chead{ | #chead{ | ||
| - | + | ||
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 id="cmiddle"> | + | <div class="tabset" id="tabset1"><a id="a" class="tab sel {content:'cont_1'}">hp1</a><a id="b" class="tab {content:'cont_2'}">hp2</a></div> |
| + | <div id="cont_1"> | ||
| + | <div id="chead"></div> | ||
| + | <div id="cmiddle">hp1<br/></div> | ||
<div id="cfoot"></div> | <div id="cfoot"></div> | ||
| + | </div> | ||
| + | <div id="cont_2"> | ||
| + | <div id="chead"></div> | ||
| + | <div id="cmiddle">hp2</div> | ||
| + | <div id="cfoot"></div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | </div> | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 09:05, 24 July 2014
