Difference between revisions of "Team:CSU CHINA/Safety"
Lonely-boy (Talk | contribs) |
Lonely-boy (Talk | contribs) |
||
| Line 237: | Line 237: | ||
</div> | </div> | ||
<div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid4"> | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid4"> | ||
| − | <a href=" | + | <a href="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" data-lightbox="example-set" data-title="My name is Yao Keyu. I am 20 years old now ，but in my heart,forever 18. I am currently a junior student of Central South University. My major is Detection, guidance and control technology.I'm honored to participate in this competition. In the CSU-CHINA team ,I am an art designer.I spend most of my time on designing the poster 、website design and so on. I have lots of interest, such as singing, dancing, drawing and so on.On vacation,I usually like to have the Volunteer Travel. "> |
| − | <img src=" | + | <img src="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" class="img-responsive zoom-img" alt="" /> |
<div class="b-wrapper"> | <div class="b-wrapper"> | ||
<h5>Yao Keyu</h5> | <h5>Yao Keyu</h5> | ||
| Line 244: | Line 244: | ||
</a> | </a> | ||
</div> | </div> | ||
| − | + | <div class="clearfix"></div> | |
| − | + | </div> | |
| − | + | <div class="tab-1 resp-tab-content"> | |
| − | + | ||
| − | + | <div class="clearfix"></div> | |
| − | + | </div> | |
| − | + | <div class="tab-1 resp-tab-content"> | |
| − | + | <div class="clearfix"></div> | |
| − | + | </div> | |
| − | + | <div class="tab-1 resp-tab-content"> | |
| − | + | ||
| − | + | <div class="clearfix"></div> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | <!--script for portfolio--> | |
| − | + | <script src="https://2018.igem.org/Template:Valencia_UPV/lightboxminJS?action=raw&ctype=text/javascript"> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</script> | </script> | ||
| − | + | <script> | |
| − | + | (function ($) { | |
| − | + | $.fn.extend({ | |
| − | + | easyResponsiveTabs: function (options) { | |
| − | + | //Set the default values, use comma to separate the settings, example: | |
| − | + | var defaults = { | |
| − | + | type: 'default', //default, vertical, accordion; | |
| − | + | width: 'auto', | |
| − | + | fit: true | |
| − | + | } | |
| − | + | //Variables | |
| − | + | var options = $.extend(defaults, options); | |
| − | + | var opt = options, | |
| − | + | jtype = opt.type, | |
| − | + | jfit = opt.fit, | |
| − | + | jwidth = opt.width, | |
| − | + | vtabs = 'vertical', | |
| − | + | accord = 'accordion'; | |
| − | + | ||
| − | + | //Main function | |
| − | + | this.each(function () { | |
| − | + | var $respTabs = $(this); | |
| − | + | $respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item'); | |
| − | + | $respTabs.css({ | |
| − | + | 'display': 'block', | |
| − | + | 'width': jwidth | |
| − | + | }); | |
| − | + | ||
| − | + | $respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content'); | |
| − | + | jtab_options(); | |
| − | + | //Properties Function | |
| − | + | function jtab_options() { | |
| − | + | if (jtype == vtabs) { | |
| − | + | $respTabs.addClass('resp-vtabs'); | |
| − | + | } | |
| − | + | if (jfit == true) { | |
| − | + | $respTabs.css({ | |
| − | + | width: '100%', | |
| − | + | margin: '0px' | |
| − | + | }); | |
| − | + | } | |
| − | + | if (jtype == accord) { | |
| − | + | $respTabs.addClass('resp-easy-accordion'); | |
| − | + | $respTabs.find('.resp-tabs-list').css('display', 'none'); | |
| − | + | } | |
| − | + | } | |
| − | + | ||
| − | + | //Assigning the h2 markup | |
| − | + | var $tabItemh2; | |
| − | + | $respTabs.find('.resp-tab-content').before("<h2 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h2>"); | |
| − | + | ||
| − | + | var itemCount = 0; | |
| − | + | $respTabs.find('.resp-accordion').each(function () { | |
| − | + | $tabItemh2 = $(this); | |
| − | + | var innertext = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')').text(); | |
| − | + | $respTabs.find('.resp-accordion:eq(' + itemCount + ')').append(innertext); | |
| − | + | $tabItemh2.attr('aria-controls', 'tab_item-' + (itemCount)); | |
| − | + | itemCount++; | |
| − | + | }); | |
| − | + | ||
| − | + | //Assigning the 'aria-controls' to Tab items | |
| − | + | var count = 0, | |
| − | + | $tabContent; | |
| − | + | $respTabs.find('.resp-tab-item').each(function () { | |
| − | + | $tabItem = $(this); | |
| + | $tabItem.attr('aria-controls', 'tab_item-' + (count)); | ||
| + | $tabItem.attr('role', 'tab'); | ||
| + | |||
| + | //First active tab | ||
| + | $respTabs.find('.resp-tab-item').first().addClass('resp-tab-active'); | ||
| + | $respTabs.find('.resp-accordion').first().addClass('resp-tab-active'); | ||
| + | $respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block'); | ||
| + | |||
| + | //Assigning the 'aria-labelledby' attr to tab-content | ||
| + | var tabcount = 0; | ||
| + | $respTabs.find('.resp-tab-content').each(function () { | ||
| + | $tabContent = $(this); | ||
| + | $tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount)); | ||
| + | tabcount++; | ||
| + | }); | ||
| + | count++; | ||
| + | }); | ||
| + | |||
| + | //Tab Click action function | ||
| + | $respTabs.find("[role=tab]").each(function () { | ||
| + | var $currentTab = $(this); | ||
| + | $currentTab.click(function () { | ||
| + | |||
| + | var $tabAria = $currentTab.attr('aria-controls'); | ||
| + | |||
| + | if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) { | ||
| + | $respTabs.find('.resp-tab-content-active').slideUp('', function () { | ||
| + | $(this).addClass('resp-accordion-closed'); | ||
}); | }); | ||
| − | + | $currentTab.removeClass('resp-tab-active'); | |
| − | + | return false; | |
| + | } | ||
| + | if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) { | ||
| + | $respTabs.find('.resp-tab-active').removeClass('resp-tab-active'); | ||
| + | $respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed'); | ||
| + | $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active'); | ||
| + | $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active'); | ||
| + | } else { | ||
| + | $respTabs.find('.resp-tab-active').removeClass('resp-tab-active'); | ||
| + | $respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed'); | ||
| + | $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active'); | ||
| + | $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block'); | ||
| + | } | ||
| + | }); | ||
| + | //Window resize function | ||
| + | $(window).resize(function () { | ||
| + | $respTabs.find('.resp-accordion-closed').removeAttr('style'); | ||
| + | }); | ||
| + | }); | ||
| + | }); | ||
| + | } | ||
| + | }); | ||
| + | })(jQuery); | ||
| + | </script> | ||
| + | <script type="text/javascript"> | ||
| + | $(document).ready(function () { | ||
| + | $('#horizontalTab').easyResponsiveTabs({ | ||
| + | type: 'default', //Types: default, vertical, accordion | ||
| + | width: 'auto', //auto or any width like 600px | ||
| + | fit: true // 100% fit in a container | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | <!--//script for portfolio--> | ||
</body> | </body> | ||
| + | |||
</html> | </html> | ||
Revision as of 08:21, 19 October 2019
loading……
TEAM
- Student Members
- Team Leader
- Instructors
- Advisors
