hplus-tab.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. function addTabs(options) {
  2. var dataUrl = options.url,
  3. dataIndex = options.id,
  4. menuName = options.title,
  5. flag = true;
  6. if (dataUrl == undefined || $.trim(dataUrl).length == 0)return false;
  7. // 选项卡菜单已存在
  8. $('.J_menuTab').each(function () {
  9. if ($(this).data('id') == dataUrl) {
  10. if (!$(this).hasClass('active')) {
  11. $(this).addClass('active').siblings('.J_menuTab').removeClass('active');
  12. scrollToTabDefined(this);
  13. // 显示tab对应的内容区
  14. $('.J_mainContent .J_iframe').each(function () {
  15. if ($(this).data('id') == dataUrl) {
  16. $(this).show().siblings('.J_iframe').hide();
  17. return false;
  18. }
  19. });
  20. }
  21. flag = false;
  22. return false;
  23. }
  24. });
  25. // 选项卡菜单不存在
  26. if (flag) {
  27. var str = '<a href="javascript:;" class="active J_menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
  28. $('.J_menuTab').removeClass('active');
  29. // 添加选项卡对应的iframe
  30. var str1 = '<iframe class="J_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
  31. $('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);
  32. //显示loading提示
  33. var loading = layer.load();
  34. $('.J_mainContent iframe:visible').load(function () {
  35. //iframe加载完成后隐藏loading提示
  36. layer.close(loading);
  37. });
  38. // 添加选项卡
  39. $('.J_menuTabs .page-tabs-content').append(str);
  40. scrollToTabDefined($('.J_menuTab.active'));
  41. }
  42. //刷新Tab
  43. var target = $('.J_iframe[data-id="' + dataUrl + '"]');
  44. target.attr('src', dataUrl)
  45. return false;
  46. };
  47. //计算元素集合的总宽度
  48. function calSumWidth(elements) {
  49. var width = 0;
  50. $(elements).each(function () {
  51. width += $(this).outerWidth(true);
  52. });
  53. return width;
  54. }
  55. //滚动到指定选项卡
  56. function scrollToTabDefined(element) {
  57. var marginLeftVal = calSumWidth($(element).prevAll()), marginRightVal = calSumWidth($(element).nextAll());
  58. // 可视区域非tab宽度
  59. var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
  60. //可视区域tab宽度
  61. var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
  62. //实际滚动宽度
  63. var scrollVal = 0;
  64. if ($(".page-tabs-content").outerWidth() < visibleWidth) {
  65. scrollVal = 0;
  66. } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
  67. if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
  68. scrollVal = marginLeftVal;
  69. var tabElement = element;
  70. while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
  71. scrollVal -= $(tabElement).prev().outerWidth();
  72. tabElement = $(tabElement).prev();
  73. }
  74. }
  75. } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
  76. scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
  77. }
  78. $('.page-tabs-content').animate({
  79. marginLeft: 0 - scrollVal + 'px'
  80. }, "fast");
  81. }
  82. //update-begin--Author:zhoujf Date:20170707 for:TASK #2003 【UI改进】列表加载慢的时候会出现白板--------------------
  83. function hiddenloading(){
  84. $("#panelloadingDiv").hide();
  85. }
  86. function showloading(){
  87. $("#panelloadingDiv").show();
  88. }
  89. //update-end--Author:zhoujf Date:20170707 for:TASK #2003 【UI改进】列表加载慢的时候会出现白板--------------------