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，否则模糊事件将无效。

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

元素仅在jquery上单击时可调整大小

3 个答案: