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事件有关，Plz帮助我。

Answer 1

除了Quangdao提到的空格之外，您可能还需要根据their documentation将jQuery设置为无冲突模式。此外，您应该将init移动到ready方法，而不是将其与body的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 ：要从localstorage保存和重新加载，您需要为onAnnotationRemoved，onAnnotationCreated和onAnnotationUpdated添加事件处理程序以将其存储到创建/修改/删除注释时的localstorage。要在页面加载时加载注释，我必须在从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与localstorage的问题，这不会在SO的代码片段中运行，所以这里有一个小提琴：https://jsfiddle.net/jo6hmc7q/

多个标签不能同时工作

1 个答案: