Question

你可以帮我找出已经在div中打开了多少个标签，因为我必须将打开的标签限制为2.如果打开标签计数为2并尝试再添加一个标签，则需要提醒（'最大允许标签超出，首先关闭一个标签'）？

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <title>jQuery EasyUI Demo</title>
    <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>
    <script>
        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
                });
            }
        }
    </script>
</head>
<body>
    <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://yahoo.com')">easyui</a>
    </div>
    <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
        <div title="Home">
        </div>
    </div>
</body>
</html>

Answer 1

目前还不清楚主页标签是否属于2个允许的标签之一，但这样做可以根据需要更改(count > 2)。

＆＃13;

$('[data-title]').click(function() {
  var $this = $(this);
  var title = $this.data('title');
  var url = $this.data('url');
  var count = $('#tt .panel').length;
  var $container = $('#tt');
  if ($container.tabs('exists', title)) $container.tabs('select', title);
  else {
    if (count > 2) {
      alert('maximum allowed tabs exceed, close one tab first');
    } 
    else {
      var content = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
      $container.tabs('add', {
        title: title,
        content: content,
        closable: true
      });
    }
  }
});

＆＃13;

<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">
  <a href="#" class="easyui-linkbutton" data-title="google" data-url="http://www.google.com">google</a>
  <a href="#" class="easyui-linkbutton" data-title="jquery" data-url="http://jquery.com/">jquery</a>
  <a href="#" class="easyui-linkbutton" data-title="easyui" data-url="http://yahoo.com">easyui</a>
</div>
<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
  <div title="Home">
  </div>
</div>

＆＃13;

打开标签计数 - Jquery

1 个答案: