Version 1.1.2 Update

RTL support
horizontalPosition settings

New examples

Author: alexchizhovcom

assets/jquery.pwstabs-1.1.1.min.js

@@ -3,22 +3,22 @@
   * Author: Alex Chizhov
   * Author Website: http://alexchizhov.com/pwstabs
   * GitHub: https://github.com/alexchizhovcom/pwstabs
-  * Version: 1.1.1
-  * Version from: 16.01.2015
+  * Version: 1.1.2
+  * Version from: 17.01.2015
   * Licensed under the MIT license
   */
 ;(function ($, window, document, undefined) {
 
-
    var pluginName = "pwstabs",
     defaults = {
-      effect: 'scale',        // You can change effects of your tabs container: scale, slideleft, slideright, slidetop, slidedown
-      defaultTab: 1,          // The tab we want to be opened by default
-      containerWidth: '100%'  // Set custom container width if not set then 100% is used
+      effect: 'scale',              // You can change effects of your tabs container: scale, slideleft, slideright, slidetop, slidedown
+      defaultTab: 1,                // The tab we want to be opened by default
+      containerWidth: '100%',       // Set custom container width if not set then 100% is used
+      //tabsPosition: 'horizontal',   // Tabs position: horizontal / vertical
+      horizontalPosition: 'top',     // Tabs horizontal position: top / bottom
+      rtl: false                       // Right to left support: true/ false
     };
 
-
-
    function Plugin(element, options) {
       this.element = $(element);
       this.$elem = $(this.element);
@@ -40,8 +40,14 @@
          // Adding class to our selector
          this.$elem.addClass('pws_tabs_list');
 
+         // Check if RTL support is true or false
+         var pwsRtlClass = '';
+         if( this.settings.rtl == true ){
+            pwsRtlClass = ' pws_tabs_rtl';
+         }
+
          // Put tabs container into another block
-         this.$elem.wrap('<div class="pws_tabs_container" style="width:' + this.settings.containerWidth + '"></div>');
+         this.$elem.wrap('<div class="pws_tabs_container'+pwsRtlClass+'" style="width:' + this.settings.containerWidth + '"></div>');
 
 
          // Hiding selectors children (Tabs)
@@ -53,7 +59,7 @@
          } else if (this.settings.effect == 'slideright') {
             $(pwsTabs).addClass('pws_tabs_slide_right_hide');
          } else if (this.settings.effect == 'slidetop') {
-            $(pwsTabs).addClass('pws_tabs_slide_top_hide');
+            $(pwsTabs).addClass('pws_tabs_slide_top_hide');  
          } else if (this.settings.effect == 'slidedown') {
             $(pwsTabs).addClass('pws_tabs_slide_down_hide');
          } else { // In case something else is in the settings field that is not correct
@@ -62,27 +68,25 @@
 
 
          // Add UL / LI and A control elements to Tabs Container
-         this.$elem.parent().prepend('<ul class="pws_tabs_controll"></ul>');
-
+         
+         // Check if Horizontal and what position
+         if ( this.settings.horizontalPosition == 'top' ){
+            this.$elem.parent().prepend('<ul class="pws_tabs_controll pws_tabs_horizontal_top"></ul>');
+         } else {
+            this.$elem.parent().append('<ul class="pws_tabs_controll pws_tabs_horizontal_bottom"></ul>');
+         }
 
          var pwsTabsDataCounter = '1';
          this.$elem.children('[data-pws-tab]').each(function(){
-            
             // Set Data attributes with tab id number 1+
             $(this).attr('data-pws-tab-id', pwsTabsDataCounter);
-
             // Add LIs and A controls
             $(this).parent().parent().find('ul.pws_tabs_controll').append('<li><a href="#" data-tab-id="' + $(this).data('pws-tab') + '">' + $(this).data('pws-tab-name') + '</a></li>');
-
             // Adding class to our selector children (Tabs)
             $(this).addClass('pws_tab_single');
-
             pwsTabsDataCounter++;
-
          });
-
 
-
          // Now lets show default Tab
          if (this.settings.effect == 'slideleft') {
             this.$elem.find('[data-pws-tab-id="' + this.settings.defaultTab + '"]').addClass('pws_tabs_slide_left_show');
@@ -103,8 +107,6 @@
          // Now lets add active class to default tabs controller
          this.$elem.parent().find('ul li a[data-tab-id="' + this.$elem.find('[data-pws-tab-id="' + this.settings.defaultTab + '"]').data('pws-tab') + '"]').addClass('pws_tab_active');
 
-
-
          // First lets find A link and add click function
          this.$elem.parent().find('ul li a').on('click', {pwsOptions : this.settings}, function (e) {
 
@@ -124,7 +126,6 @@
 
             var getTabsContainer = $(this).parent().parent().parent().find('.pws_tabs_list');
 
-
             // Now lets make it cooler, and add some effects to tabs container
             if (effect == 'slideleft') {
                allTabs.removeClass('pws_tabs_slide_left_show').addClass('pws_tabs_slide_left_hide');

assets/jquery.pwstabs-1.1.1.js renamed to assets/jquery.pwstabs-1.1.2.js

@@ -3,10 +3,14 @@
   * Author: Alex Chizhov
   * Author Website: http://alexchizhov.com/pwstabs
   * GitHub: https://github.com/alexchizhovcom/pwstabs
-  * Version: 1.1.1
-  * Version from: 16.01.2015
+  * Version: 1.1.2
+  * Version from: 17.01.2015
   * Licensed under the MIT license
   */
+.pws_tabs_container.pws_tabs_rtl{
+   text-align: right;
+   direction: rtl;
+}
 .pws_tabs_container ul.pws_tabs_controll{
    list-style: none;
 }
@@ -21,6 +25,10 @@
    color: #fff;
    margin-right: 3px;
 }
+.pws_tabs_container.pws_tabs_rtl ul.pws_tabs_controll li a{
+   margin-right: 0;
+   margin-left: 3px;
+}
 .pws_tabs_container ul.pws_tabs_controll li a.pws_tab_active{
    background-color: #fff;
    color: #505050;
@@ -56,6 +64,10 @@
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
 }
+.pws_tabs_container.pws_tabs_rtl .pws_tab_single{
+   padding-right: 0;
+   padding-left: 20px;
+}
 
 /**
   * ######################################################