|
|
| Line 263: |
Line 263: |
| | </div> | | </div> |
| | <!--script for portfolio--> | | <!--script for portfolio--> |
| − | <script src="https://2018.igem.org/Template:Valencia_UPV/lightboxminJS?action=raw&ctype=text/javascript">
| + | <script src="https://2018.igem.org/Template:Valencia_UPV/lightboxminJS?action=raw&ctype=text/javascript"></script> |
| − | </script>
| + | <script src="https://2019.igem.org/Template:CSU_CHINA/JS/easyResponsiveTabsjs?action=raw&ctype=text/javascript"></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"> | | <script type="text/javascript"> |
| | $(document).ready(function () { | | $(document).ready(function () { |
