javascript - 如何限制用户最多打开 5 个 Bootstrap Tab-Panes？

Question

尽管有多个选项卡按钮可用，但用户需要被限制为只能打开 5 个选项卡 Pane (最多)。单击第 6 个选项卡后，需要提醒用户。

function addTab(title, url){
    var tabs=$(".tabs"),
    tabsContent=tabs.children("a");
        if(tabsContent.find(".easyui-linkbutton").length===4)   
        {
            alert("Maximum 5 Tabs are allowed");

        }
        else 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
            });
        }
    }

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<div style="margin-bottom:10px" class="tabs">
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab1','http://jquery.com/')">tab1</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab2','http://jquery.com/')">tab2</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab3','http://jeasyui.com/')">tab3</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab4','http://jeasyui.com/')">tab4</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab5','http://jeasyui.com/')">tab5</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab6','http://jeasyui.com/')">tab6</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab7','http://jeasyui.com/')">tab7</a>
</div>
<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
    <div title="Home">
    </div>
</div>

尽管用户尝试使用第 6 个按钮打开，但预计只会打开 5 个选项卡 Pane 。需要用消息提醒用户。

Answer 1

您的代码有一个小改动

我改变了这一行

if($('.tabs-wrap').find('ul').children().length===4)

对此

if($('.tabs-wrap').find('ul').children().length > 5)

成功了

这是你的例子

function addTab(title, url) {
  var tabs = $(".tabs"),
    tabsContent = tabs.children("a");
  if ($('.tabs-wrap').find('ul').children().length > 5)
    alert("Maximum 5 Tabs are allowed");
  else 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
    });
  }
}

  <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <div style="margin-bottom:10px" class="tabs">
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab1','http://jquery.com/')">tab1</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab2','http://jquery.com/')">tab2</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab3','http://jeasyui.com/')">tab3</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab4','http://jeasyui.com/')">tab4</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab5','http://jeasyui.com/')">tab5</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab6','http://jeasyui.com/')">tab6</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('tab7','http://jeasyui.com/')">tab7</a>
  </div>
  <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
    <div title="Home">
    </div>
  </div>

希望它有用