Merge pull request #6 from davidsekar/develop

add tab feature

Author: davidsekar

src/demo.html

@@ -81,6 +81,8 @@
   </div>
   <br/>
   <button onclick="$('#example_0').scrollTabs('destroy')" >Destroy above tabs</button>
+  <br/>
+  <button id="addRandomTab" type="button">Add new random tab</button>
   <br /><br />
   <div id="example_1">
     <ul role="tablist">

src/ts/jquery.init.ts

@@ -16,6 +16,11 @@ $(() => {
     }
   });
 
+  // $('#addRandomTab').on('click', (e) => {
+  //   $('#example_0').data('uiScrollTabs')
+  //     .addTab(keywords[Math.floor(Math.random() * keywords.length) + 1], );
+  // });
+
   if (scrollEnabled) {
     $tabs = $('#example_1')
       .scrollTabs({
@@ -49,14 +54,14 @@ $(() => {
   $('#example_2').tabs();
 
   // Add new tab
-  $('#addTab_1').click(() => {
+  $('#addRandomTab').click(() => {
     const label = keywords[Math.floor(Math.random() * keywords.length)];
     const content = 'This is the content for the ' + label + '<br>Lorem ipsum dolor sit amet,' +
       ' consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo,' +
       ' faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim,' +
       ' varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a' +
       ' aliquam neque ornare. Proin sed semper lacus.';
-    $tabs.trigger('addTab', [label, content]);
+    $('#example_0').data('uiScrollTabs').addTab(label, content);
     return false;
   });
 });

src/ts/jquery.ui.scrolltabs.ts

@@ -442,7 +442,25 @@
         });
       });
     },
+    addTab(header: string, panelContent: string) {
+      const newId: string = $({}).uniqueId()[0].id;
+      const tab = $('<li><a href="#' + newId + '" role="tab">' + header + '</a></li>');
+      const panel = this._createPanel(newId);
+      panel.html(panelContent);
 
+      this.$ul.append(tab);
+      panel.attr('aria-live', 'polite');
+
+      if (panel.length) {
+        $(this.panels[this.panels.length - 1]).after(panel);
+      }
+
+      panel.attr('role', 'tabpanel');
+      this._addclosebutton(tab);
+
+      this.refresh();
+      this._showNavsIfNeeded();
+    },
     removeTab(anc: JQuery<HTMLElement>) {
       const tabId = anc.attr('href');
       // Remove the panel
@@ -481,4 +499,5 @@
       $(window).off('resize', this.debounceEvent(() => { this._showNavsIfNeeded(); }));
     }
   });
+  return $.ui.scrollTabs;
 })(jQuery);