Difference between revisions of "Template:CSU CHINA/JS/easyResponsiveTabs.js"

 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
// Easy Responsive Tabs Plugin
 
−
// Author: Samson.Onna <Email : samson3d@gmail.com>
 
 
(function ($) {
 
(function ($) {
 
     $.fn.extend({
 
     $.fn.extend({
 
         easyResponsiveTabs: function (options) {
 
         easyResponsiveTabs: function (options) {
−
            //Set the default values, use comma to separate the settings, example:
 
 
             var defaults = {
 
             var defaults = {
−
                 type: 'default', //default, vertical, accordion;
+
                 type: 'default',
 
                 width: 'auto',
 
                 width: 'auto',
 
                 fit: true
 
                 fit: true
 
             }
 
             }
−
            //Variables
+
             var options = $.extend(defaults, options);
−
             var options = $.extend(defaults, options);          
+
             var opt = options,
−
             var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion';
+
                jtype = opt.type,
−
 
+
                jfit = opt.fit,
−
            //Main function
+
                jwidth = opt.width,
 +
                vtabs = 'vertical',
 +
                accord = 'accordion';
 
             this.each(function () {
 
             this.each(function () {
 
                 var $respTabs = $(this);
 
                 var $respTabs = $(this);
Line 22: Line 21:
 
                     'width': jwidth
 
                     'width': jwidth
 
                 });
 
                 });
−
 
 
                 $respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content');
 
                 $respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content');
 
                 jtab_options();
 
                 jtab_options();
−
                //Properties Function
+
 
 
                 function jtab_options() {
 
                 function jtab_options() {
 
                     if (jtype == vtabs) {
 
                     if (jtype == vtabs) {
Line 31: Line 29:
 
                     }
 
                     }
 
                     if (jfit == true) {
 
                     if (jfit == true) {
−
                         $respTabs.css({ width: '100%', margin: '0px' });
+
                         $respTabs.css({
 +
                            width: '100%',
 +
                            margin: '0px'
 +
                        });
 
                     }
 
                     }
 
                     if (jtype == accord) {
 
                     if (jtype == accord) {
Line 38: Line 39:
 
                     }
 
                     }
 
                 }
 
                 }
−
 
−
                //Assigning the h2 markup
 
 
                 var $tabItemh2;
 
                 var $tabItemh2;
−
                 $respTabs.find('.resp-tab-content').before('<h2 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h2>');
+
                 $respTabs.find('.resp-tab-content').before("<h2 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h2>");
−
 
+
 
                 var itemCount = 0;
 
                 var itemCount = 0;
 
                 $respTabs.find('.resp-accordion').each(function () {
 
                 $respTabs.find('.resp-accordion').each(function () {
Line 51: Line 49:
 
                     itemCount++;
 
                     itemCount++;
 
                 });
 
                 });
−
 
−
                //Assigning the 'aria-controls' to Tab items
 
 
                 var count = 0,
 
                 var count = 0,
 
                     $tabContent;
 
                     $tabContent;
Line 59: Line 55:
 
                     $tabItem.attr('aria-controls', 'tab_item-' + (count));
 
                     $tabItem.attr('aria-controls', 'tab_item-' + (count));
 
                     $tabItem.attr('role', 'tab');
 
                     $tabItem.attr('role', 'tab');
−
 
−
                    //First active tab                 
 
 
                     $respTabs.find('.resp-tab-item').first().addClass('resp-tab-active');
 
                     $respTabs.find('.resp-tab-item').first().addClass('resp-tab-active');
 
                     $respTabs.find('.resp-accordion').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');
 
                     $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;
 
                     var tabcount = 0;
 
                     $respTabs.find('.resp-tab-content').each(function () {
 
                     $respTabs.find('.resp-tab-content').each(function () {
Line 74: Line 66:
 
                     count++;
 
                     count++;
 
                 });
 
                 });
−
 
−
                //Tab Click action function
 
 
                 $respTabs.find("[role=tab]").each(function () {
 
                 $respTabs.find("[role=tab]").each(function () {
 
                     var $currentTab = $(this);
 
                     var $currentTab = $(this);
 
                     $currentTab.click(function () {
 
                     $currentTab.click(function () {
−
 
 
                         var $tabAria = $currentTab.attr('aria-controls');
 
                         var $tabAria = $currentTab.attr('aria-controls');
−
 
 
                         if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) {
 
                         if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) {
−
                             $respTabs.find('.resp-tab-content-active').slideUp('', function () { $(this).addClass('resp-accordion-closed'); });
+
                             $respTabs.find('.resp-tab-content-active').slideUp('', function () {
 +
                                $(this).addClass('resp-accordion-closed');
 +
                            });
 
                             $currentTab.removeClass('resp-tab-active');
 
                             $currentTab.removeClass('resp-tab-active');
 
                             return false;
 
                             return false;
Line 91: Line 81:
 
                             $respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed');
 
                             $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("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
−
 
 
                             $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active');
 
                             $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active');
 
                         } else {
 
                         } else {
Line 100: Line 89:
 
                         }
 
                         }
 
                     });
 
                     });
−
                    //Window resize function                 
 
 
                     $(window).resize(function () {
 
                     $(window).resize(function () {
 
                         $respTabs.find('.resp-accordion-closed').removeAttr('style');
 
                         $respTabs.find('.resp-accordion-closed').removeAttr('style');
Line 108: Line 96:
 
         }
 
         }
 
     });
 
     });
 +
})(jQuery);

Latest revision as of 08:31, 19 October 2019

(function ($) { 

   $.fn.extend({
       easyResponsiveTabs: function (options) {
           var defaults = {
               type: 'default',
               width: 'auto',
               fit: true
           }
           var options = $.extend(defaults, options);
           var opt = options,
               jtype = opt.type,
               jfit = opt.fit,
               jwidth = opt.width,
               vtabs = 'vertical',
               accord = 'accordion';
           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();

               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');
                   }
               }
               var $tabItemh2;
$respTabs.find('.resp-tab-content').before("

"); 
               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++;
               });
               var count = 0,
                   $tabContent;
               $respTabs.find('.resp-tab-item').each(function () {
                   $tabItem = $(this);
                   $tabItem.attr('aria-controls', 'tab_item-' + (count));
                   $tabItem.attr('role', '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');
                   var tabcount = 0;
                   $respTabs.find('.resp-tab-content').each(function () {
                       $tabContent = $(this);
                       $tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount));
                       tabcount++;
                   });
                   count++;
               });
               $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 () {
                       $respTabs.find('.resp-accordion-closed').removeAttr('style');
                   });
               });
           });
       }
   });

})(jQuery);