如何限制用户打开最多5个的Bootstrap选项卡窗格？

Question

用户需要被限制为只能打开5个选项卡窗格(最多)，尽管有多个选项卡按钮可用。单击第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>

​

尽管用户尝试使用第六个按钮打开，但预计只有5个选项卡窗格打开。用户需要收到一条消息提醒。

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>

​

希望它能起作用