元素仅在单击 jquery 时才可调整大小答案

【问题标题】：element only resizable when element has been clicked on jquery元素仅在单击 jquery 时才可调整大小
【发布时间】：2013-11-25 09:53:16
【问题描述】：

目前我在页面上有多个元素，它们都可以调整大小。

为了阻止所有可调整大小的句柄一直显示，我目前将它们设置为

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

这会隐藏可调整大小的句柄，除非元素有鼠标悬停事件。

我需要的是可调整大小的手柄，仅在单击元素时显示，然后手柄消失'onblur'

我似乎在 jquery 中找不到任何东西。

我是否必须为每个“onclick”事件创建一个新的可调整大小的事件？

我正在寻找一个简单的单班轮或类似的。

谁能帮我指出正确的方向？

提前致谢

【问题讨论】：

制作小提琴以便触发问题。
jsfiddle.net/LsK8L

标签： jquery jquery-ui-resizable

【解决方案1】：

您可以使用以下 sn-p:

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

【讨论】：

【解决方案2】：

这是一种方法

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

Demo

【讨论】：

我希望元素在 mouseclick 上调整大小而不是在 mouseover 上所以更像这样只有模糊不起作用 $('#a').on({ click : function(){ $(this).resizable (); }, 模糊 : function(){ $(this).resizable('destroy'); } });

【解决方案3】：

希望对你有帮助http://jsfiddle.net/Rt2Zd/1/

   $(function() {

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

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

  });

将 tabindex 添加到 div 否则模糊事件将不起作用。

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

【讨论】：

需要在模糊时丢失可调整大小的句柄
@BarryWatts : 我做了修改可以看看。
是的，效果很好，谢谢，但我已经实现了@A.Wolff 的答案