tabs.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. /**
  2. * @fileOverview
  3. *
  4. * Ribbon 选项卡
  5. *
  6. * @author: techird
  7. * @copyright: Baidu FEX, 2014
  8. */
  9. KityMinder.registerUI('ribbon/tabs', function(minder) {
  10. var memory = minder.getUI('memory');
  11. var $tab = new FUI.Tabs({
  12. buttons: ['idea', 'appearence', 'view'].map(function(key) {
  13. return minder.getLang('ui.tabs.' + key);
  14. })
  15. });
  16. var $title = minder.getUI('topbar/title').$title;
  17. var $header = $('<div id="tab-select"></div>');
  18. var $container = $('<div id="tab-container"></div>');
  19. $title.before($header);
  20. $('#panel').after($container);
  21. $tab.appendButtonTo($header[0]);
  22. $tab.appendPanelTo($container[0]);
  23. // 隐藏效果
  24. var lastIndex = 0;
  25. var muteRemember = false;
  26. $tab.on('tabsselect', function(e, info) {
  27. if (info.index == lastIndex) {
  28. $container.toggleClass('collapsed');
  29. $header.toggleClass('collapsed');
  30. } else {
  31. $container.removeClass('collapsed');
  32. $header.removeClass('collapsed');
  33. }
  34. if (!muteRemember) {
  35. memory.set('ribbon-tab-collapsed', $container.hasClass('collapsed'));
  36. memory.set('ribbon-tab-index', info.index);
  37. }
  38. lastIndex = info.index;
  39. });
  40. $tab.idea = $tab.getPanel(0);
  41. $tab.appearence = $tab.getPanel(1);
  42. $tab.view = $tab.getPanel(2);
  43. var rememberIndex = memory.get('ribbon-tab-index');
  44. var rememberCollapse = memory.get('ribbon-tab-collapsed');
  45. muteRemember = true;
  46. $tab.select(rememberIndex || 0);
  47. muteRemember = false;
  48. if (rememberCollapse) {
  49. $container.addClass('collapsed');
  50. $header.addClass('collapsed');
  51. } else {
  52. $container.removeClass('collapsed');
  53. $header.removeClass('collapsed');
  54. }
  55. return $tab;
  56. });