163fd4d50fb2a23672cf3822c162327d7be02669.svn-base 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. 
  2. layui.define(['element', 'common'], function (exports) {
  3. var mod_name = 'tab',
  4. $ = layui.jquery,
  5. element = layui.element(),
  6. commom = layui.common,
  7. globalTabIdIndex = 0,
  8. Tab = function () {
  9. this.config = {
  10. elem: undefined,
  11. closed: true //是否包含删除按钮
  12. };
  13. };
  14. var ELEM = {};
  15. /**
  16. * 参数设置
  17. * @param {Object} options
  18. */
  19. Tab.prototype.set = function (options) {
  20. var that = this;
  21. $.extend(true, that.config, options);
  22. return that;
  23. };
  24. /**
  25. * 初始化
  26. */
  27. Tab.prototype.init = function () {
  28. var that = this;
  29. var _config = that.config;
  30. if (typeof (_config.elem) !== 'string' && typeof (_config.elem) !== 'object') {
  31. common.throwError('Tab error: elem参数未定义或设置出错,具体设置格式请参考文档API.');
  32. }
  33. var $container;
  34. if (typeof (_config.elem) === 'string') {
  35. $container = $('' + _config.elem + '');
  36. }
  37. if (typeof (_config.elem) === 'object') {
  38. $container = _config.elem;
  39. }
  40. if ($container.length === 0) {
  41. common.throwError('Tab error:找不到elem参数配置的容器,请检查.');
  42. }
  43. var filter = $container.attr('lay-filter');
  44. if (filter === undefined || filter === '') {
  45. common.throwError('Tab error:请为elem容器设置一个lay-filter过滤器');
  46. }
  47. _config.elem = $container;
  48. ELEM.titleBox = $container.children('ul.layui-tab-title');
  49. ELEM.contentBox = $container.children('div.layui-tab-content');
  50. ELEM.tabFilter = filter;
  51. return that;
  52. };
  53. /**
  54. * 查询tab是否存在,如果存在则返回索引值,不存在返回-1
  55. * @param {String} 标题
  56. */
  57. Tab.prototype.exists = function (title) {
  58. var that = ELEM.titleBox === undefined ? this.init() : this,
  59. tabIndex = -1;
  60. ELEM.titleBox.find('li').each(function (i, e) {
  61. var $cite = $(this).children('cite');
  62. if ($cite.text() === title) {
  63. tabIndex = i;
  64. };
  65. });
  66. return tabIndex;
  67. };
  68. /**
  69. * 添加选择卡,如果选择卡存在则获取焦点
  70. * @param {Object} data
  71. */
  72. Tab.prototype.tabAdd = function (data) {
  73. var that = this;
  74. var tabIndex = that.exists(data.title);
  75. if (tabIndex === -1) {
  76. globalTabIdIndex++;
  77. var content = '<iframe src="' + data.href + '" data-id="' + globalTabIdIndex + '"></iframe>';
  78. var title = '';
  79. if (data.icon !== undefined) {
  80. if (data.icon.indexOf('fa-') !== -1) {
  81. title += '<i class="' + data.icon + '" aria-hidden="true"></i>';
  82. } else {
  83. title += '<i class="layui-icon">' + data.icon + '</i>';
  84. }
  85. }
  86. title += '<cite>' + data.title + '</cite>';
  87. if (that.config.closed) {
  88. title += '<i class="layui-icon layui-unselect layui-tab-close" data-id="' + globalTabIdIndex + '">&#x1006;</i>';
  89. }
  90. //添加tab
  91. element.tabAdd(ELEM.tabFilter, {
  92. title: title,
  93. content: content
  94. });
  95. //iframe 自适应
  96. ELEM.contentBox.find('iframe[data-id=' + globalTabIdIndex + ']').each(function () {
  97. $(this).height(ELEM.contentBox.height());
  98. });
  99. if (that.config.closed) {
  100. //监听关闭事件
  101. ELEM.titleBox.find('li').children('i.layui-tab-close[data-id=' + globalTabIdIndex + ']').on('click', function () {
  102. element.tabDelete(ELEM.tabFilter, $(this).parent('li').index()).init();
  103. });
  104. };
  105. //切换到当前打开的选项卡
  106. element.tabChange(ELEM.tabFilter, ELEM.titleBox.find('li').length - 1);
  107. } else {
  108. element.tabChange(ELEM.tabFilter, tabIndex);
  109. }
  110. };
  111. Tab.prototype.on = function (events, callback) {
  112. }
  113. var tab = new Tab();
  114. exports(mod_name, function (options) {
  115. return tab.set(options);
  116. });
  117. });