|
|
(26 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <html> | + | {{:Team:NTU-Taida/Templates/Header}}{{:Team:NTU-Taida/Templates/Navbar}}<html> |
- | <head> | + | <!--跨頁========================================= --> |
- | <style type="text/css"> | + | <div style=' |
| + | width: 100%; |
| + | '> |
| + | <div class="container"> |
| + | <div class='row'> |
| + | <img src='https://static.igem.org/mediawiki/2012/5/53/NTU-Taida-Home-2012.jpg' width='100%'> |
| + | </div> |
| + | </div> <!-- /container --> |
| + | </div> |
| | | |
- | .nav {
| + | </html>{{:Team:NTU-Taida/Templates/Footer|ActiveNavbar=Home}} |
- | margin-bottom: 18px;
| + | |
- | margin-left: 0;
| + | |
- | list-style: none;
| + | |
- | }
| + | |
- | | + | |
- | .nav > li > a {
| + | |
- | display: block;
| + | |
- | }
| + | |
- | | + | |
- | .nav > li > a:hover {
| + | |
- | text-decoration: none;
| + | |
- | background-color: #eeeeee;
| + | |
- | }
| + | |
- | | + | |
- | .nav > .pull-right {
| + | |
- | float: right;
| + | |
- | }
| + | |
- | | + | |
- | .nav .nav-header {
| + | |
- | display: block;
| + | |
- | padding: 3px 15px;
| + | |
- | font-size: 11px;
| + | |
- | font-weight: bold;
| + | |
- | line-height: 18px;
| + | |
- | color: #999999;
| + | |
- | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
| + | |
- | text-transform: uppercase;
| + | |
- | }
| + | |
- | | + | |
- | .nav li + .nav-header {
| + | |
- | margin-top: 9px;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs,
| + | |
- | .nav-pills {
| + | |
- | *zoom: 1;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs:before,
| + | |
- | .nav-pills:before,
| + | |
- | .nav-tabs:after,
| + | |
- | .nav-pills:after {
| + | |
- | display: table;
| + | |
- | content: "";
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs:after,
| + | |
- | .nav-pills:after {
| + | |
- | clear: both;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs > li,
| + | |
- | .nav-pills > li {
| + | |
- | float: left;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs > li > a,
| + | |
- | .nav-pills > li > a {
| + | |
- | padding-right: 12px;
| + | |
- | padding-left: 12px;
| + | |
- | margin-right: 2px;
| + | |
- | line-height: 14px;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs {
| + | |
- | border-bottom: 1px solid #ddd;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs > li {
| + | |
- | margin-bottom: -1px;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs > li > a {
| + | |
- | padding-top: 8px;
| + | |
- | padding-bottom: 8px;
| + | |
- | line-height: 18px;
| + | |
- | border: 1px solid transparent;
| + | |
- | -webkit-border-radius: 4px 4px 0 0;
| + | |
- | -moz-border-radius: 4px 4px 0 0;
| + | |
- | border-radius: 4px 4px 0 0;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs > li > a:hover {
| + | |
- | border-color: #eeeeee #eeeeee #dddddd;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs > .active > a,
| + | |
- | .nav-tabs > .active > a:hover {
| + | |
- | color: #555555;
| + | |
- | cursor: default;
| + | |
- | background-color: #ffffff;
| + | |
- | border: 1px solid #ddd;
| + | |
- | border-bottom-color: transparent;
| + | |
- | }
| + | |
- | | + | |
- | .nav-pills > li > a {
| + | |
- | padding-top: 8px;
| + | |
- | padding-bottom: 8px;
| + | |
- | margin-top: 2px;
| + | |
- | margin-bottom: 2px;
| + | |
- | -webkit-border-radius: 5px;
| + | |
- | -moz-border-radius: 5px;
| + | |
- | border-radius: 5px;
| + | |
- | }
| + | |
- | | + | |
- | .nav-pills > .active > a,
| + | |
- | .nav-pills > .active > a:hover {
| + | |
- | color: #ffffff;
| + | |
- | background-color: #0088cc;
| + | |
- | }
| + | |
- | | + | |
- | .nav-stacked > li {
| + | |
- | float: none;
| + | |
- | }
| + | |
- | | + | |
- | .nav-stacked > li > a {
| + | |
- | margin-right: 0;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs.nav-stacked {
| + | |
- | border-bottom: 0;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs.nav-stacked > li > a {
| + | |
- | border: 1px solid #ddd;
| + | |
- | -webkit-border-radius: 0;
| + | |
- | -moz-border-radius: 0;
| + | |
- | border-radius: 0;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs.nav-stacked > li:first-child > a {
| + | |
- | -webkit-border-radius: 4px 4px 0 0;
| + | |
- | -moz-border-radius: 4px 4px 0 0;
| + | |
- | border-radius: 4px 4px 0 0;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs.nav-stacked > li:last-child > a {
| + | |
- | -webkit-border-radius: 0 0 4px 4px;
| + | |
- | -moz-border-radius: 0 0 4px 4px;
| + | |
- | border-radius: 0 0 4px 4px;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs.nav-stacked > li > a:hover {
| + | |
- | z-index: 2;
| + | |
- | border-color: #ddd;
| + | |
- | }
| + | |
- | | + | |
- | .nav-pills.nav-stacked > li > a {
| + | |
- | margin-bottom: 3px;
| + | |
- | }
| + | |
- | | + | |
- | .nav-pills.nav-stacked > li:last-child > a {
| + | |
- | margin-bottom: 1px;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs .dropdown-menu {
| + | |
- | -webkit-border-radius: 0 0 5px 5px;
| + | |
- | -moz-border-radius: 0 0 5px 5px;
| + | |
- | border-radius: 0 0 5px 5px;
| + | |
- | }
| + | |
- | | + | |
- | .nav-pills .dropdown-menu {
| + | |
- | -webkit-border-radius: 4px;
| + | |
- | -moz-border-radius: 4px;
| + | |
- | border-radius: 4px;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs .dropdown-toggle .caret,
| + | |
- | .nav-pills .dropdown-toggle .caret {
| + | |
- | margin-top: 6px;
| + | |
- | border-top-color: #0088cc;
| + | |
- | border-bottom-color: #0088cc;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs .dropdown-toggle:hover .caret,
| + | |
- | .nav-pills .dropdown-toggle:hover .caret {
| + | |
- | border-top-color: #005580;
| + | |
- | border-bottom-color: #005580;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs .active .dropdown-toggle .caret,
| + | |
- | .nav-pills .active .dropdown-toggle .caret {
| + | |
- | border-top-color: #333333;
| + | |
- | border-bottom-color: #333333;
| + | |
- | }
| + | |
- | | + | |
- | .nav > .dropdown.active > a:hover {
| + | |
- | color: #000000;
| + | |
- | cursor: pointer;
| + | |
- | }
| + | |
- | | + | |
- | .nav-tabs .open .dropdown-toggle,
| + | |
- | .nav-pills .open .dropdown-toggle,
| + | |
- | .nav > li.dropdown.open.active > a:hover {
| + | |
- | color: #ffffff;
| + | |
- | background-color: #999999;
| + | |
- | border-color: #999999;
| + | |
- | }
| + | |
- | | + | |
- | .nav li.dropdown.open .caret,
| + | |
- | .nav li.dropdown.open.active .caret,
| + | |
- | .nav li.dropdown.open a:hover .caret {
| + | |
- | border-top-color: #ffffff;
| + | |
- | border-bottom-color: #ffffff;
| + | |
- | opacity: 1;
| + | |
- | filter: alpha(opacity=100);
| + | |
- | }
| + | |
- | </style>
| + | |
- | </head>
| + | |
- | | + | |
- | <body>
| + | |
- | <ul class="nav nav-tabs" id="myTab">
| + | |
- | <li class="active" >
| + | |
- | <a href="#">Home</a>
| + | |
- | </li>
| + | |
- | <li><a href="https://2012.igem.org/Team:NTU-Taida/Team">Team</a></li>
| + | |
- | <li>
| + | |
- | <a href="https://2012.igem.org/Team:NTU-Taida/https://igem.org/Team.cgi?year=2012&team_name=NTU-Taida">
| + | |
- | Official Team Profile
| + | |
- | </a>
| + | |
- | </li>
| + | |
- | <li><a href="https://2012.igem.org/Team:NTU-Taida/Project">Project</a></li>
| + | |
- | <li><a href="https://2012.igem.org/Team:NTU-Taida/Parts">Parts Submitted to the Registry</a></li>
| + | |
- | <li><a href="https://2012.igem.org/Team:NTU-Taida/Modeling">Modeling</a></li>
| + | |
- | <li><a href="https://2012.igem.org/Team:NTU-Taida/Notebook">Notebook</a></li>
| + | |
- | <li><a href="https://2012.igem.org/Team:NTU-Taida/Safety">Safety</a></li>
| + | |
- | <li><a href="https://2012.igem.org/Team:NTU-Taida/Attributions">Attributions</a></li>
| + | |
- | </ul>
| + | |
- |
| + | |
- | <script>
| + | |
- | !function ($) {
| + | |
- | | + | |
- | "use strict"; // jshint ;_;
| + | |
- | | + | |
- | | + | |
- | /* TAB CLASS DEFINITION
| + | |
- | * ==================== */
| + | |
- | | + | |
- | var Tab = function ( element ) {
| + | |
- | this.element = $(element)
| + | |
- | }
| + | |
- | | + | |
- | Tab.prototype = {
| + | |
- | | + | |
- | constructor: Tab
| + | |
- | | + | |
- | , show: function () {
| + | |
- | var $this = this.element
| + | |
- | , $ul = $this.closest('ul:not(.dropdown-menu)')
| + | |
- | , selector = $this.attr('data-target')
| + | |
- | , previous
| + | |
- | , $target
| + | |
- | , e
| + | |
- | | + | |
- | if (!selector) {
| + | |
- | selector = $this.attr('href')
| + | |
- | selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
| + | |
- | }
| + | |
- | | + | |
- | if ( $this.parent('li').hasClass('active') ) return
| + | |
- | | + | |
- | previous = $ul.find('.active a').last()[0]
| + | |
- | | + | |
- | e = $.Event('show', {
| + | |
- | relatedTarget: previous
| + | |
- | })
| + | |
- | | + | |
- | $this.trigger(e)
| + | |
- | | + | |
- | if (e.isDefaultPrevented()) return
| + | |
- | | + | |
- | $target = $(selector)
| + | |
- | | + | |
- | this.activate($this.parent('li'), $ul)
| + | |
- | this.activate($target, $target.parent(), function () {
| + | |
- | $this.trigger({
| + | |
- | type: 'shown'
| + | |
- | , relatedTarget: previous
| + | |
- | })
| + | |
- | })
| + | |
- | }
| + | |
- | | + | |
- | , activate: function ( element, container, callback) {
| + | |
- | var $active = container.find('> .active')
| + | |
- | , transition = callback
| + | |
- | && $.support.transition
| + | |
- | && $active.hasClass('fade')
| + | |
- | | + | |
- | function next() {
| + | |
- | $active
| + | |
- | .removeClass('active')
| + | |
- | .find('> .dropdown-menu > .active')
| + | |
- | .removeClass('active')
| + | |
- | | + | |
- | element.addClass('active')
| + | |
- | | + | |
- | if (transition) {
| + | |
- | element[0].offsetWidth // reflow for transition
| + | |
- | element.addClass('in')
| + | |
- | } else {
| + | |
- | element.removeClass('fade')
| + | |
- | }
| + | |
- | | + | |
- | if ( element.parent('.dropdown-menu') ) {
| + | |
- | element.closest('li.dropdown').addClass('active')
| + | |
- | }
| + | |
- | | + | |
- | callback && callback()
| + | |
- | }
| + | |
- | | + | |
- | transition ?
| + | |
- | $active.one($.support.transition.end, next) :
| + | |
- | next()
| + | |
- | | + | |
- | $active.removeClass('in')
| + | |
- | }
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | /* TAB PLUGIN DEFINITION
| + | |
- | * ===================== */
| + | |
- | | + | |
- | $.fn.tab = function ( option ) {
| + | |
- | return this.each(function () {
| + | |
- | var $this = $(this)
| + | |
- | , data = $this.data('tab')
| + | |
- | if (!data) $this.data('tab', (data = new Tab(this)))
| + | |
- | if (typeof option == 'string') data[option]()
| + | |
- | })
| + | |
- | }
| + | |
- | | + | |
- | $.fn.tab.Constructor = Tab
| + | |
- | | + | |
- | | + | |
- | /* TAB DATA-API
| + | |
- | * ============ */
| + | |
- | | + | |
- | $(function () {
| + | |
- | $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
| + | |
- | e.preventDefault()
| + | |
- | $(this).tab('show')
| + | |
- | })
| + | |
- | })
| + | |
- | | + | |
- | }
| + | |
- | $(function () {
| + | |
- | $('#myTab a:last').tab('show');
| + | |
- | })
| + | |
- | $('#myTab a').click(function (e) {
| + | |
- | e.preventDefault();
| + | |
- | $(this).tab('show');
| + | |
- | })
| + | |
- | $('#myTab a[href="#"]').tab('show');
| + | |
- | </script>
| + | |
- | </body>
| + | |
- | </html> | + | |
- | | + | |
- | {{:Team:NTU-Taida/Project_Description}} | + | |