TL_Tab.js 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1.  (function($){
  2. $.fn.TL_Tab = function(options) {
  3. var defaults = {
  4. tab : ".df_67 ol li",
  5. box : ".df_67 ul li",
  6. events : "over",
  7. num : 3,
  8. speed : 300
  9. };
  10. var setting = $.extend(defaults, options);
  11. var tl_tab = setting.tab;
  12. var tl_box = setting.box;
  13. var tl_events = setting.events;
  14. var tl_num = setting.num;
  15. var tl_speed = setting.speed;
  16. var tl_time_out = null;
  17. $(tl_box).css({
  18. display: 'none'
  19. });
  20. $(tl_tab).removeClass('df_on');
  21. $(tl_tab).eq(tl_num - 1).addClass('df_on');
  22. $(tl_box).eq(tl_num - 1).css({
  23. display: 'block'
  24. });
  25. if (tl_events === 'click') {
  26. $(tl_tab).click(function () {
  27. $(tl_tab).removeClass('df_on');
  28. $(tl_tab).eq($(this).index()).addClass('df_on');
  29. $(tl_box).stop().fadeOut(tl_speed);
  30. $(tl_box).eq($(this).index()).stop().fadeIn(tl_speed);
  31. });
  32. }
  33. if (tl_events === 'over') {
  34. $(tl_tab).hover(function () {
  35. var _this = this;
  36. clearTimeout(tl_num);
  37. tl_time_out = setTimeout(function () {
  38. $(tl_tab).removeClass('df_on');
  39. $(tl_tab).eq($(_this).index()).addClass('df_on');
  40. $(tl_box).stop().fadeOut(tl_speed);
  41. $(tl_box).eq($(_this).index()).stop().fadeIn(tl_speed);
  42. }, 30);
  43. }, function () {
  44. clearTimeout(tl_time_out);
  45. });
  46. }
  47. };
  48. })(jQuery);