从元素中移除jQuery imgareaselect插件

Question

我正在使用这个很棒的jQuery插件http://odyniec.net/projects/imgareaselect/。它很好用，但我是在使用jQuery UI的回调函数（对话框）来触发它的，并且我需要在对话框关闭后移除选择。

function initialize_selection() {
$('#image_area').imgAreaSelect({ x1: 10, y1: 10, x2: $('#image_area').width()-10, y2: $('#image_area').height()-10 , fadeSpeed: 400, handles: true});
}

$(function() {
$('#image_edit').click(function(){
    $('#edit_image_dialog').load('actions.php?action=edit_temp_image', function(){
            $('#edit_image_dialog').dialog({
                modal: true,
                resizable: false,
                width: 480,
                    buttons: {
            Ok: function() {
                        //foo_bar                                                                        
            },
                        Cancel: function() {
                        //foo_bar
            }
                    },
                    beforeclose: function(){
                    //What should i put here ???
                    ;}
            });
    initialize_selection();
        });
    });
});

我很想得到一些提示，因为我是jquery新手，自己无法解决这个问题。

谢谢

- votnii

---

不确定，但是对于分享一个非常酷的jQuery插件，我给这个问题点赞！ - Chris Clark

Answer 1

http://odyniec.net/projects/imgareaselect/usage.html

$('#image_area').imgAreaSelect({remove:true});

应该可以工作，但不确定

- Daniele Cruciani

Answer 2

我发现唯一能够去除选择区域的方法如下：

"Close": function() { 
  $(".imgareaselect-selection").parent().remove();
  $(".imgareaselect-outer").remove();
  $(this).dialog("close"); 
},

以下内容对我没有用（在Wordpress 3.0.5中的jquery和jqueryui元素中）

$(selector).imgAreaSelect( {remove: true} );

- Michael Reed

---

$(selector).imgAreaSelect( {remove: true} ); 对我没起作用。 - Krishna Prasad Varma

Answer 3

这是我的解决方案：

var $ias = $('#imageArea').imgAreaSelect({
    instance: true
});

$('#clearBtn2').click(function() {
    $ias.cancelSelection();
});

- jrt

---

如果您想重新打开对话框并再次选择图像区域，那么这是更好的答案。@Daniele的答案将完全从您的元素中删除/销毁插件，但这只会删除可视化选择框和背景。 - monty

Answer 4

根据HomeimgAreaSelect文档中有关选项的说明：

$('#image_area').imgAreaSelect( {remove: true} );

能解决问题

- Gabriele Petrioli

Answer 5

$('#image_area').imgAreaSelect({remove:true}); //For hiding the imagearea
$('#image_area').imgAreaSelect({remove:false}); //For resetting the imagearea

第一条语句隐藏了imgareaselect，第二条语句有助于在下次加载模态时重新加载裁剪功能。

我在从模态返回到主窗口时使用了这两个语句，以便下次加载裁剪功能时没有问题。

- KiranD

Answer 6

根据文档：http://odyniec.net/projects/imgareaselect/usage.html {remove: true} 实际上会完全删除 imgAreaSelect 的特性。如果你只想要一个带有边框和灰色区域的框，（但允许用户稍后拖动新框），你需要 {hide: true}。

$('#image_area').imgAreaSelect( {hide: true} );

- xbakesx

Answer 7

是的，它确实有效，但在执行-->$('#image_area').imgAreaSelect({remove:true}); 之后，无法在标记其他照片上工作。

- ng.