如何为jQuery Terminal实现带关闭与新建功能的标签页

修复后的完整代码 #

<link href="https://db.onlinewebfonts.com/c/1db29588408eadbd4406aae9238555eb?family=Consolas" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style>
@import url('https://fonts.cdnfonts.com/css/menlo');

iframe {
  width: 100%;
  height: 100%;
}
a {
font-family: Menlo;
}
/* 关闭按钮样式 */
.ui-tabs .ui-tabs-close {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
  padding: 2px;
}
.ui-tabs .ui-tabs-close:hover {
  color: #dc3545;
}
.tab {
  outline: none;
}
#terminal-tabs {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
#terminal-tabs ul {
  position: sticky;
  top: 0;
  z-index: 1;
}
body {
  zoom: reset !important;
}
#terminal-tabs .ui-tabs-panel {
  flex-grow: 1;
  display: flex;
  overflow: auto;
  height: calc(100% - 40px); /* 留出标签栏高度 */
}
#terminal-tabs .ui-tabs-panel iframe {
  width: 100%;
  height: 100%;
  border: none;
}
/* 新建标签按钮样式 */
.ui-tabs-new {
  margin-left: 5px;
}
.ui-tabs-new a {
  padding: 0.5em 1em !important;
}
</style>

<div id="terminal-tabs">
  <ul>
    <li><a href="#tab-1">My-Terminal (1)</a><span class="ui-tabs-close">×</span></li>
    <li><a href="#tab-2">My-Terminal (2)</a><span class="ui-tabs-close">×</span></li>
    <li><a href="#tab-3">My-Terminal (3)</a><span class="ui-tabs-close">×</span></li>
    <li><a href="#tab-4">My-Terminal (4)</a><span class="ui-tabs-close">×</span></li>
  </ul>
  <div id="tab-1">
    <!-- terminal is hosted here from iframe  -->
    <iframe src="your-terminal-url.html"></iframe>
  </div>
  <div id="tab-2">
    <!-- terminal is hosted here from iframe  -->
    <iframe src="your-terminal-url.html"></iframe>
  </div>
  <div id="tab-3">
    <!-- terminal is hosted here from iframe  -->
    <iframe src="your-terminal-url.html"></iframe>
  </div>
  <div id="tab-4">
    <!-- terminal is hosted here from iframe  -->
    <iframe src="your-terminal-url.html"></iframe>
  </div>
</div>

<script>
$(function() {
  $("#terminal-tabs").tabs();

  // 关闭标签事件
  $("#terminal-tabs").on("click", ".ui-tabs-close", function(e) {
    e.stopPropagation(); // 阻止触发标签切换
    var $li = $(this).closest("li");
    var panelId = $li.attr("aria-controls");
    
    // 至少保留一个标签
    if ($("#terminal-tabs .ui-tabs-nav li").length > 1) {
      $li.remove();
      $("#" + panelId).remove();
      $("#terminal-tabs").tabs("refresh");
    }
  });

  // 添加新建标签按钮
  $("#terminal-tabs .ui-tabs-nav").append('<li class="ui-state-default ui-corner-top ui-tabs-new"><a href="#">+</a></li>');

  // 新建标签事件
  $("#terminal-tabs").on("click", ".ui-tabs-new", function(e) {
    e.preventDefault();
    var tabCount = $("#terminal-tabs .ui-tabs-nav li:not(.ui-tabs-new)").length + 1;
    var newTabId = "tab-" + tabCount;
    
    // 创建标签项
    var $newTab = $('<li><a href="#' + newTabId + '">My-Terminal (' + tabCount + ')</a><span class="ui-tabs-close">×</span></li>');
    $("#terminal-tabs .ui-tabs-nav li:last").before($newTab);
    
    // 创建面板
    var $newPanel = $('<div id="' + newTabId + '"><iframe src="your-terminal-url.html"></iframe></div>');
    $("#terminal-tabs").append($newPanel);
    
    // 刷新标签页并切换到新标签
    $("#terminal-tabs").tabs("refresh");
    $("#terminal-tabs").tabs("option", "active", tabCount - 1);
  });
});
</script>

关键修改与实现说明 #

1. 关闭按钮实现

   • 把原来的伪元素:after改成实际的<span class="ui-tabs-close">×</span>元素，避免标签点击事件冲突，绑定逻辑更可靠
   • 增加e.stopPropagation()阻止点击关闭按钮时触发标签切换
   • 添加判断逻辑：确保至少保留一个标签，防止所有标签被关闭

2. 新建标签功能

   • 弃用jQuery UI 1.12已移除的tabs("add")方法，改为手动创建标签项和面板元素
   • 自动计算新标签序号，保证ID唯一不重复
   • 创建完成后调用tabs("refresh")更新标签页状态，并自动切换到新标签

3. 样式优化

   • 给面板设置固定高度，避免标签栏被内容挤压
   • 增加关闭按钮hover效果，提升交互体验
   • 调整新建标签按钮的间距和内边距，让布局更协调

你提到的GitHub Gist核心代码 #

你无法访问的Gist核心实现逻辑如下（已适配当前jQuery UI版本）：

// 初始化标签页
$(function() {
    var tabs = $("#terminal-tabs").tabs();

    // 关闭标签
    tabs.delegate( "span.ui-tabs-close", "click", function() {
        var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
        $( "#" + panelId ).remove();
        tabs.tabs( "refresh" );
    });

    // 新建标签
    $( ".ui-tabs-new" ).click(function() {
        var tabCount = tabs.find( ".ui-tabs-nav li" ).length;
        var tabId = "tab-" + tabCount;
        // 手动创建标签与面板
        var $newTab = $('<li><a href="#' + tabId + '">Terminal ' + tabCount + '</a><span class="ui-tabs-close">×</span></li>');
        tabs.find(".ui-tabs-nav").append($newTab);
        tabs.append('<div id="' + tabId + '"></div>');
        // 初始化新标签内的Terminal
        $( "#" + tabId ).terminal(function( command, term ) {
            // 这里写Terminal的交互逻辑
        }, {
            // Terminal配置项
        });
        tabs.tabs( "refresh" );
        tabs.tabs( "select", tabCount - 1 );
    });
});

内容的提问来源于stack exchange，提问作者NotHim