多个选项卡不能同时工作

Question

我正在使用 jquery 插件进行图像注释。我在不同的选项卡中有多个图像。我为此目的使用 jquery 选项卡，但在此之前，我使用了基础选项卡并面临同样的问题。 这是我的代码

 <!doctype html>
 <html lang = "en">
  <head>
  <meta charset = "utf-8">
  <script src="libs/jquery.min.js"></script>
  <title>jQuery UI Tabs functionality</title>
  <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
  <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js">   </script>   
  <link type="text/css" rel="stylesheet" href="annotorious-0.6.4/css/annotorious.css" />
  <script type="text/javascript" src="annotorious.min.js"></script>


  <script>
     $(function() {
        $( "#tabs-1" ).tabs();
     });
  </script>

  <style>
     #tabs-1{font-size: 14px;}
     .ui-widget-header {
        background:#b9cd6d;
        border: 1px solid #b9cd6d;
        color: #FFFFFF;
        font-weight: bold;
     }
  </style>

  </head>

   <body onload="init();">
     <div id = "tabs-1">
      <ul>
        <li><a href = "#tabs-2">Tab 1</a></li>
        <li><a href = "#tabs-3">Tab 2</a></li>
        <li><a href = "#tabs-4">Tab 3</a></li>
      </ul>

       <div id = "tabs-2">
            <img id="myImage" src="pic2.jpg" style="border: 30px solid #ccc; padding:20px;" width="30%" height="30%" />
     </div>

     <div id = "tabs-3">
     <img id="myImage1" src="pic1.jpg" style="border: 30px solid #ccc; padding:20px;" width="30%" height="30%" />    
     </div>

     <div id = "tabs-4">
        <p>ed ut perspiciatis unde omnis iste natus error sit 
           voluptatem accusantium doloremque laudantium, totam rem   aperiam, 
           eaque ipsa quae ab illo inventore veritatis et quasi architecto 
           beatae vitae dicta sunt explicabo.  </p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
           nisi ut aliquip ex ea commodo consequat. </p>
     </div>

     </div>
      <script>
       function init() {

       anno.makeAnnotatable(document.getElementById('myImage1'));
       anno.makeAnnotatable(document.getElementById('myImage'));
      }
        </script>

    </body>

     </html>

我想对图像进行注释。所以这里我的 jquery 图像注释插件适用于标签 1（第一张图片），但它不适用于标签 2（第二张图片）或任何其他标签。也许这与javascript事件有关，请帮助我。

Answer 1

除了Quangdao提到的空格外，您可能还需要根据their documentation将jQuery设置为无冲突模式。此外，您应该将您的 init 移动到 ready 方法中，而不是将其与主体的 onload 混合。

编辑：看来您还需要结合使用基于 CSS 的初始化（将 class="annotatable" 添加到图像中）和 API 以在选项卡切换时重新启用注释插件.您可以利用选项卡的 activate 事件来执行此操作：

  <script>
    jQuery.noConflict();
    jQuery(function() {
      jQuery("#tabs-1").tabs({
        activate: function(event, ui) {
          jQuery('img.annotatable', ui.newPanel).each(function() {
            anno.makeAnnotatable(this);
          });
        }
      });
    });
  </script>

下面的演示：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs functionality</title>
  <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link type="text/css" rel="stylesheet" href="https://annotorious.github.io/latest/annotorious.css" />
  <script type="text/javascript" src="https://annotorious.github.io/latest/annotorious.min.js"></script>

  <style>
    #tabs-1 {
      font-size: 14px;
    }
    .ui-widget-header {
      background: #b9cd6d;
      border: 1px solid #b9cd6d;
      color: #FFFFFF;
      font-weight: bold;
    }
  </style>

</head>

<body>
  <div id="tabs-1">
    <ul>
      <li><a href="#tabs-2">Tab 1</a>
      </li>
      <li><a href="#tabs-3">Tab 2</a>
      </li>
      <li><a href="#tabs-4">Tab 3</a>
      </li>
    </ul>

    <div id="tabs-2">
      <img id="myImage" class="annotatable" src="https://unsplash.it/g/200" style="border: 30px solid #ccc; padding:20px;" width="30%" height="30%" />
    </div>

    <div id="tabs-3">
      <img id="myImage1" class="annotatable" src="https://unsplash.it/200" style="border: 30px solid #ccc; padding:20px;" width="30%" height="30%" />
    </div>

    <div id="tabs-4">
      <p>ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

  </div>
  <script>
    jQuery.noConflict();
    jQuery(function() {
      jQuery("#tabs-1").tabs({
        activate: function(event, ui) {
          jQuery('img.annotatable', ui.newPanel).each(function() {
            anno.makeAnnotatable(this);
          });
        }
      });
    });
  </script>
</body>

</html>

编辑 2：要从本地存储中保存和重新加载，您需要为 onAnnotationRemoved、onAnnotationCreated 和 onAnnotationUpdated 添加事件处理程序，以便在创建注释时将其存储到本地存储中/修改/删除。要在页面加载时加载注释，我必须在从 localstorage 添加每个注释之前调用 reset 方法。

这是我添加的：

  function saveAnnotations() {
    localStorage.setItem('annotations', JSON.stringify(anno.getAnnotations()));
  }

  // check for saved annotations
  var storedAnnotations = localStorage.getItem('annotations');
  if (storedAnnotations !== null) {
    anno.reset();  //reinitialize the annotations
    storedAnnotations = JSON.parse(storedAnnotations);

    //restore saved annotations
    storedAnnotations.forEach(function(annotation) {
      anno.addAnnotation(annotation); 
    })
  }

  anno.addHandler('onAnnotationRemoved', saveAnnotations);
  anno.addHandler('onAnnotationCreated', saveAnnotations);
  anno.addHandler('onAnnotationUpdated', saveAnnotations);

由于本地存储的 CORS 问题，这不会在 SO 的 sn-p 中运行，所以这里有一个小提琴：https://jsfiddle.net/jo6hmc7q/