элемент только изменяемый размер, когда элемент был нажат на jquery

Question

В настоящее время у меня есть несколько элементов на странице, и они все изменяемы по размеру.

Чтобы остановить все изменяемый размер ручки не показывались все время я в настоящее время установлен на значение

$("#selector").resizable({autoHide:true}); 

Это делает изменяемые размер ручек спрятаны, если элемент не имеет событие наведения курсора мыши.

Что мне нужно, это изменяемый размер ручки, чтобы показывать только когда элемент был щелкнули на, а затем ручки исчезнуть «ONBLUR»

Я не могу найти что-нибудь в JQuery для этого.

Должен ли я создать новое изменяемое событие для каждого события onclick?

Я ищу простой лайнер или аналогичный.

Может ли кто-нибудь помочь указать мне в правильном направлении?

Заранее спасибо

Answer 1

Вы можете использовать следующий фрагмент:

$('#selector') 
    .attr('tabindex', -1) 
    .css('outline', 0) 
    .resizable({ 
    autoHide: true 
}).off('mouseenter mouseleave').on({ 
    focus: function() { 
     $(this).find('.ui-resizable-handle').show(); 
    }, 
    blur: function() { 
     $(this).find('.ui-resizable-handle').hide(); 
    } 
}); 

Answer 2

Вот способ сделать это

$('#a').on({ 
    mouseenter : function(){ 
    $(this).resizable(); 
    }, mouseleave : function(){ 
    $(this).resizable('destroy'); 
    } 
}); 

Demo

Answer 3

Я надеюсь, что это поможет вам http://jsfiddle.net/Rt2Zd/1/

$(function() { 

    $(document).on('click',"#resizable",function(){ 
    $("#resizable").resizable(); 
    }); 

    $('#resizable').blur(function(){ 
     $('#resizable').resizable('destroy'); 
    }); 

    }); 

добавить tabindex в div else событие размытия не будет работать.

<div id="resizable" class="ui-widget-content" tabindex="1"> 
    <h3 class="ui-widget-header">Resizable</h3> 
    </div>