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

Question

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

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

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

就像脸书标签一样。

Answer 1

You need a var that will toggle a Boolean value initially set to false.
Return your image clicks if that value is false :)
here is how to do it:

jsBin demo (with basic button functionality)

var tagEditing = false; // create this line

than add a button somewhere like:

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

than add into this an if statement:

$('#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.
  // ............

});

Now you just need to toggle your tagEditing var, button text and image cursor style:

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

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

and also on upload :

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

    tagEditing = false;

});

Additionally if var tagEditing == false you'd like to change the image cursor style from crosshair to default (look in the demo to see how)