tab.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. !function(window) {
  2. "use strict";
  3. var doc = window.document
  4. , ydui = {};
  5. $(window).on('load', function() {});
  6. var util = ydui.util = {
  7. parseOptions: function(string) {},
  8. pageScroll: function() {}(),
  9. localStorage: function() {}(),
  10. sessionStorage: function() {}(),
  11. serialize: function(value) {},
  12. deserialize: function(value) {}
  13. };
  14. function storage(ls) {}
  15. $.fn.emulateTransitionEnd = function(duration) {}
  16. ;
  17. if (typeof define === 'function') {
  18. define(ydui);
  19. } else {
  20. window.YDUI = ydui;
  21. }
  22. }(window);
  23. !function(window) {
  24. "use strict";
  25. function Tab(element, options) {
  26. this.$element = $(element);
  27. this.options = $.extend({}, Tab.DEFAULTS, options || {});
  28. this.init();
  29. this.bindEvent();
  30. this.transitioning = false;
  31. }
  32. Tab.TRANSITION_DURATION = 150;
  33. Tab.DEFAULTS = {
  34. nav: '.tab-nav-item',
  35. panel: '.tab-panel-item',
  36. activeClass: 'tab-active'
  37. };
  38. Tab.prototype.init = function() {
  39. var _this = this
  40. , $element = _this.$element;
  41. _this.$nav = $element.find(_this.options.nav);
  42. _this.$panel = $element.find(_this.options.panel);
  43. }
  44. ;
  45. Tab.prototype.bindEvent = function() {
  46. var _this = this;
  47. _this.$nav.each(function(e) {
  48. $(this).on('click.ydui.tab', function() {
  49. _this.open(e);
  50. });
  51. });
  52. }
  53. ;
  54. Tab.prototype.open = function(index) {
  55. var _this = this;
  56. index = typeof index == 'number' ? index : _this.$nav.filter(index).index();
  57. var $curNav = _this.$nav.eq(index);
  58. _this.active($curNav, _this.$nav);
  59. _this.active(_this.$panel.eq(index), _this.$panel, function() {
  60. $curNav.trigger({
  61. type: 'opened.ydui.tab',
  62. index: index
  63. });
  64. _this.transitioning = false;
  65. });
  66. }
  67. ;
  68. Tab.prototype.active = function($element, $container, callback) {
  69. var _this = this
  70. , activeClass = _this.options.activeClass;
  71. var $avtive = $container.filter('.' + activeClass);
  72. function next() {
  73. typeof callback == 'function' && callback();
  74. }
  75. $element.one('webkitTransitionEnd', next).emulateTransitionEnd(Tab.TRANSITION_DURATION);
  76. $avtive.removeClass(activeClass);
  77. $element.addClass(activeClass);
  78. }
  79. ;
  80. function Plugin(option) {
  81. var args = Array.prototype.slice.call(arguments, 1);
  82. return this.each(function() {
  83. var target = this
  84. , $this = $(target)
  85. , tab = $this.data('ydui.tab');
  86. if (!tab) {
  87. $this.data('ydui.tab', (tab = new Tab(target,option)));
  88. }
  89. if (typeof option == 'string') {
  90. tab[option] && tab[option].apply(tab, args);
  91. }
  92. });
  93. }
  94. $(window).on('load.ydui.tab', function() {
  95. $('[data-ydui-tab]').each(function() {
  96. var $this = $(this);
  97. $this.tab(window.YDUI.util.parseOptions($this.data('ydui-tab')));
  98. });
  99. });
  100. $.fn.tab = Plugin;
  101. }(window);