Как ограничить пользователя от открытия вкладок Bootstrap с максимум 5?

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 панелей вкладок, хотя пользователь пытается открыть их с помощью 6-й кнопки.Пользователь должен быть предупрежден с сообщением.

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>

надеюсь, что это работает