从元素中删除jquery imgareaselect插件

时间:2010-03-05 13:26:43

标签: jquery jquery-ui-dialog img-area-select-jquery

所以即时使用这个整洁的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的新手,我不能自己解决这个问题。

谢谢

7 个答案:

答案 0 :(得分:21)

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

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

应该有效,但不确定

答案 1 :(得分:5)

我发现去除选择治疗区域的唯一方法如下:

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

以下内容对我不起作用(在Wordpress 3.0.5中的jquery和jqueryui元素中)

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

答案 2 :(得分:4)

这对我有用:

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

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

答案 3 :(得分:3)

根据HomeimgAreaSelect Documentation

的选项文档
$('#image_area').imgAreaSelect( {remove: true} );

会做的伎俩

答案 4 :(得分:1)

根据文件:http://odyniec.net/projects/imgareaselect/usage.html

{remove:true}实际上会完全删除imgAreaSelect-y-ness。如果您想要做的只是框和灰色区域,(但允许用户稍后拖动一个新框),您需要{hide:true}。

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

答案 5 :(得分:0)

你真的有效但是在> $('#image_area')之后.imgAreaSelect({remove:true}); 它不能用于标记其他照片

答案 6 :(得分:0)

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

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

我从模态返回主窗口时使用了这两个语句,这样下次加载裁剪功能就没有问题了。