Блог

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

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

#javascript #php #jquery #css #bootstrap-4

#javascript #php #jquery ( jquery ) #css — код #начальная загрузка-4

Вопрос:

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

Ответ №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>

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

Метки: