tabulous.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. /*
  2. * strength.js
  3. */
  4. ;(function ( $, window, document, undefined ) {
  5. var pluginName = "tabulous",
  6. defaults = {
  7. effect: 'scale'
  8. };
  9. // $('<style>body { background-color: red; color: white; }</style>').appendTo('head');
  10. function Plugin( element, options ) {
  11. this.element = element;
  12. this.$elem = $(this.element);
  13. this.options = $.extend( {}, defaults, options );
  14. this._defaults = defaults;
  15. this._name = pluginName;
  16. this.init();
  17. }
  18. Plugin.prototype = {
  19. init: function() {
  20. var links = this.$elem.find('ul a');
  21. var firstchild = this.$elem.find('li:first-child').find('a');
  22. var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>');
  23. if (this.options.effect == 'scale') {
  24. tab_content = this.$elem.find('.tabs-content').not(':first').not(':nth-child(1)').addClass('hidescale');
  25. } else if (this.options.effect == 'slideLeft') {
  26. tab_content = this.$elem.find('.tabs-content').not(':first').not(':nth-child(1)').addClass('hideleft');
  27. } else if (this.options.effect == 'scaleUp') {
  28. tab_content = this.$elem.find('.tabs-content').not(':first').not(':nth-child(1)').addClass('hidescaleup');
  29. } else if (this.options.effect == 'flip') {
  30. tab_content = this.$elem.find('.tabs-content').not(':first').not(':nth-child(1)').addClass('hideflip');
  31. }
  32. var firstdiv = this.$elem.find('#tabs_container');
  33. var firstdivheight = firstdiv.find('div:first').height();
  34. var alldivs = this.$elem.find('div:first').find('.tabs-content');
  35. alldivs.css({'position': 'absolute','top':'0px'});
  36. firstdiv.css('height',firstdivheight+'px');
  37. firstchild.addClass('tabulous_active');
  38. links.bind('click', {myOptions: this.options}, function(e) {
  39. e.preventDefault();
  40. var $options = e.data.myOptions;
  41. var effect = $options.effect;
  42. var mythis = $(this);
  43. var thisform = mythis.parent().parent().parent();
  44. var thislink = mythis.attr('href');
  45. firstdiv.addClass('transition');
  46. links.removeClass('tabulous_active');
  47. mythis.addClass('tabulous_active');
  48. thisdivwidth = thisform.find('div'+thislink).height();
  49. if (effect == 'scale') {
  50. alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');
  51. thisform.find('.tabs-content'+thislink).addClass('make_transist').addClass('showscale');
  52. } else if (effect == 'slideLeft') {
  53. alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');
  54. thisform.find('.tabs-content'+thislink).addClass('make_transist').addClass('showleft');
  55. } else if (effect == 'scaleUp') {
  56. alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');
  57. thisform.find('.tabs-content'+thislink).addClass('make_transist').addClass('showscaleup');
  58. } else if (effect == 'flip') {
  59. alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');
  60. thisform.find('.tabs-content'+thislink).addClass('make_transist').addClass('showflip');
  61. }
  62. firstdiv.css('height',thisdivwidth+'px');
  63. });
  64. },
  65. yourOtherFunction: function(el, options) {
  66. // some logic
  67. }
  68. };
  69. // A really lightweight plugin wrapper around the constructor,
  70. // preventing against multiple instantiations
  71. $.fn[pluginName] = function ( options ) {
  72. return this.each(function () {
  73. new Plugin( this, options );
  74. });
  75. };
  76. })( jQuery, window, document );