Posted By

jatkins on 01/14/14


Tagged

tabs tab tabset tabbing


Versions (?)

Tabset script with example


 / Published in: JavaScript
 

Released into the public domain.

  1. var tabset = function() {
  2. var tabsetContainer = document.createElement('div'),
  3. tabBar = document.createElement('ul');
  4.  
  5. tabsetContainer.className = 'tabsetContainer';
  6. tabBar.className = 'tabset';
  7. tabsetContainer.appendChild(tabBar);
  8.  
  9. var tabsetAnchor = this;
  10.  
  11. this.sheets = {
  12. all: {},
  13. totalTabCount: 0,
  14. selected: 0,
  15. select: function(tabIndex) {
  16. if((typeof tabIndex).toLowerCase() != 'number')
  17. var tabIndex = parseInt(tabIndex.getAttribute('href').substring(1));
  18.  
  19. tabsetAnchor.sheets.all['_' + tabsetAnchor.sheets.selected].a.className = '';
  20. tabsetAnchor.sheets.all['_' + tabsetAnchor.sheets.selected].div.className = 'tabSheet';
  21.  
  22. tabsetAnchor.sheets.all['_' + tabIndex].a.className = 'selected';
  23. tabsetAnchor.sheets.all['_' + tabIndex].div.className = 'tabSheet selected';
  24.  
  25. tabsetAnchor.sheets.selected = parseInt(tabIndex);
  26.  
  27. window.event.stopPropagation();
  28. window.event.preventDefault();
  29. return false;
  30. },
  31. add: function(sheetName) {
  32. var sheetDiv = document.createElement('div'),
  33. tabLI = document.createElement('li'),
  34. tabA = document.createElement('a');
  35.  
  36. sheetDiv.className = 'tabSheet';
  37. tabsetContainer.appendChild(sheetDiv);
  38.  
  39. this.all['_' + this.totalTabCount] = {a: tabA, div: sheetDiv};
  40. this.totalTabCount++;
  41.  
  42. tabA.onclick = function(){tabsetAnchor.sheets.select(this);};
  43. tabA.href = '#' + (this.totalTabCount - 1);
  44. tabA.appendChild(document.createTextNode(sheetName));
  45. tabLI.appendChild(tabA);
  46. tabBar.appendChild(tabLI);
  47.  
  48. tabsetAnchor.sheets.select(this.totalTabCount - 1);
  49.  
  50. return sheetDiv;
  51. },
  52. };
  53.  
  54. document.body.appendChild(tabsetContainer);
  55. };
  56.  
  57. function tabbing() {
  58. var testTS = new tabset;
  59.  
  60. var page1 = testTS.sheets.add('Page 1'),
  61. page2 = testTS.sheets.add('Page 2'),
  62. page3 = testTS.sheets.add('Page 3');
  63.  
  64. var page1_h1 = document.createElement('h1');
  65. page1_h1.appendChild(document.createTextNode('Page 1'));
  66. page1.appendChild(page1_h1);
  67. page1.appendChild(document.createTextNode('The quick brown fox jumps over the lazy dog.'));
  68.  
  69. var page2_h1 = document.createElement('h1');
  70. page2_h1.appendChild(document.createTextNode('Page 2'));
  71. page2.appendChild(page2_h1);
  72. page2.appendChild(document.createTextNode('Jackdaws love my big sphinx of quartz.'));
  73.  
  74. var page3_h1 = document.createElement('h1');
  75. page3_h1.appendChild(document.createTextNode('Page 3'));
  76. page3.appendChild(page3_h1);
  77. page3.appendChild(document.createTextNode('[nothing to see here]'));
  78.  
  79. console.log(testTS);
  80. }

Report this snippet  

You need to login to post a comment.