元素只能在jquery點擊元素時調整大小

目前我在頁面上有多個元素，它們都可以調整大小。元素只能在jquery點擊元素時調整大小

要停止所有可調整大小的手柄被顯示目前我有他們設置的所有時間

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

這使得隱藏在可調整大小的手柄，除非該元素有一個鼠標懸停事件。

我需要的是可調整大小的手柄爲只顯示當元素已被點擊，然後把手上消失「的onblur」

我似乎無法找到jQuery的這個東西。

我需要爲每個'onclick'事件創建一個新的可調整大小的事件嗎？

我正在尋找一個簡單的襯墊或類似的。

任何人都可以幫助指向正確的方向嗎？

在此先感謝

來源

2013-11-25 Barry Watts

產生小提琴，使問題可以觸發。 – Gourav

http://jsfiddle.net/LsK8L/ –

你可以使用下面的代碼片段：

$('#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(); 
    } 
});

來源

2013-11-25 10:03:09

偉大的工程只是我想要它，謝謝 –

這裏是一個辦法做到這一點

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

Demo

來源

2013-11-25 10:04:25 redV

我想要的元素可調整大小mouseclick而不是鼠標懸停更像這樣只有模糊不工作$（'＃a'）。對（{ 點擊：函數（）{$ （本）.resizable（）;} ，模糊：函數（）{$ （本）.resizable（ '摧毀'）;} }）; –

我希望這會幫助你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>

來源

2013-11-25 10:09:01 Gourav

需要失去可調整大小的模糊手柄 –

@BarryWatts：我已經做出了改變可以看看。 – Gourav

是的，這很好，謝謝，但我已經實施@ A.沃爾夫的答案 –

元素只能在jquery點擊元素時調整大小

回答

相關問題