1

ここにある写真のタグ付けスクリプトを使用しています

http://www.bryantan.info/jquery/5非常に単純なコード。

うまく機能しますが、常にタグが有効なモードです。「写真にタグを付ける」ボタンを実装するにはどうすればよいですか。クリックするとタグ付けが有効になり、それ以外の場合はタグ付けが無効になります。また、タグ付けが完了したら、このボタンをクリックしてタグ付けをオフにすることができます。

Facebookのタグ付けのように。

4

1 に答える 1

0

最初にに設定された値varを切り替えるaが必要です。 その値が:)の場合は、画像のクリック数を返します。その 方法は次のとおりです。Booleanfalse
false

jsBinデモ（基本的なボタン機能付き）

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次に、変数、ボタンテキスト、画像カーソルのスタイルを切り替える必要があります。

$('#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方法についてはデモをご覧ください）

于 2013-01-09T00:52:35.260 に答える