cbpFWTabs.js 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. /**
  2. * cbpFWTabs.js v1.0.0
  3. * http://www.codrops.com
  4. *
  5. * Licensed under the MIT license.
  6. * http://www.opensource.org/licenses/mit-license.php
  7. *
  8. * Copyright 2014, Codrops
  9. * http://www.codrops.com
  10. */
  11. ;( function( window ) {
  12. 'use strict';
  13. function extend( a, b ) {
  14. for( var key in b ) {
  15. if( b.hasOwnProperty( key ) ) {
  16. a[key] = b[key];
  17. }
  18. }
  19. return a;
  20. }
  21. function CBPFWTabs( el, options ) {
  22. this.el = el;
  23. this.options = extend( {}, this.options );
  24. extend( this.options, options );
  25. this._init();
  26. }
  27. CBPFWTabs.prototype.options = {
  28. start : 0
  29. };
  30. CBPFWTabs.prototype._init = function() {
  31. // tabs elems
  32. this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) );
  33. // content items
  34. this.items = [].slice.call( this.el.querySelectorAll( '.content-wrap > section' ) );
  35. // current index
  36. this.current = -1;
  37. // show current content item
  38. try{
  39. if(this.tabs[0].innerHTML.indexOf('#settings') >= 0){
  40. this._show(5);
  41. }else{
  42. this._show();
  43. }
  44. }catch{
  45. this._show();
  46. }
  47. // init events
  48. this._initEvents();
  49. };
  50. CBPFWTabs.prototype._initEvents = function() {
  51. var self = this;
  52. this.tabs.forEach( function( tab, idx ) {
  53. tab.addEventListener( 'click', function( ev ) {
  54. ev.preventDefault();
  55. self._show( idx );
  56. } );
  57. } );
  58. };
  59. CBPFWTabs.prototype._show = function( idx ) {
  60. if( this.current >= 0 ) {
  61. this.tabs[ this.current ].className = this.items[ this.current ].className = '';
  62. }
  63. // change current
  64. this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0;
  65. this.tabs[ this.current ].className = 'tab-current';
  66. this.items[ this.current ].className = 'content-current';
  67. };
  68. // add to global namespace
  69. window.CBPFWTabs = CBPFWTabs;
  70. })( window );