如何添加“标记照片”按钮以开始标记/结束标记

Question

我正在使用此处找到的照片标记脚本

http://www.bryantan.info/jquery/5 非常简单的代码。

效果很好，但始终处于启用标签模式。如何实现“标记照片”按钮，单击该按钮将启用标记，否则，标记将被禁用。另外，标记完成后，可以点击此按钮关闭标记。

喜欢 facebook 标记。

Answer 1

您需要一个 var 来切换最初设置为 false 的 Boolean 值。
如果该值为false，则返回您的图片点击次数：)
这是怎么做的：

jsBin demo (with basic button functionality)

var tagEditing = false; // create this line

比在某处添加一个按钮：

<button id="startTag">Start tagging</button>

在此添加if 声明：

$('#tagit #btnsave').live('click',function(){

  if( !tagEditing ){
       return;
  }

  name = $('#tagname').val();
  counter++;
  $('#taglist ol').append('<li rel="'+counter+'"><a>'+name+'</a> (<a class="remove">Remove</a>)</li>');
  $('#imgtag').append('<div class="tagview" id="view_'+counter+'"></div>');
  $('#view_' + counter).css({top:mouseY,left:mouseX});
  $('#tagit').fadeOut();
  // add backend code here, use mouseX and mouseY for the axis and counter.
  // ............

});

现在您只需切换tagEditing var、按钮文本和图像光标样式：

$('#startTag').click(function(){
   tagEditing = !tagEditing;

   $('#imgtag').css({cursor: tagEditing? 'crosshair' : 'default' });
   $(this).text(tagEditing? 'End tagging':'Start tagging');
});

还有上传时：

$('#yourUploadButton').click(function(){

    tagEditing = false;

});

另外，如果 var tagEditing == false 您想将图像光标样式从 crosshair 更改为 default（查看演示以了解具体方法）