EasyUI 动态添加标签页（Tabs）

• 2019 年 10 月 8 日
• 筆記

步骤 1：创建 Tabs

<div style="margin-bottom:10px">          <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>          <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>          <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>      </div>      <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">          <div title="Home">          </div>      </div>

步骤 2：实现 'addTab' 函数

function addTab(title, url){          if ($('#tt').tabs('exists', title)){              $('#tt').tabs('select', title);          } else {              var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';              $('#tt').tabs('add',{                  title:title,                  content:content,                  closable:true              });          }      }

我们使用 'exists' 方法来判断 tab 是否已经存在，如果已存在则激活 tab。如果不存在则调用 'add' 方法来添加一个新的 tab 面板