从 jquery UI 可调整大小的元素中删除句柄图像

Removing handle image from jquery UI resizable element

本文关键字：元素 删除 句柄 图像 jquery UI 可调整      更新时间：2023-09-26

如何删除可调整大小元素的默认southeast (se)句柄图像并添加我自己的图像？

我总是在我的.css文件中这样做

.ui-dialog .ui-resizable-se {
    background-image: url("");
}

它一直有效:)

您有两个选择：

  1. 您可以覆盖ui-resizable-handle或ui-resizable-se，如最底部的jQuery站点所述。
  2. 您可以更改图像文件"ui-icons_222222_256x240.png"，Google在此处托管了该示例。

您还可以在 resizeable（） 中指定所需的句柄，例如仅针对"e"句柄

$("#id").resizable({
    handles: "e"
});

http://api.jqueryui.com/resizable/#option-handles

您也可以在"创建"选项中解决此问题：

$('#element').resizable({
   create: function(event, ui) {
     $('.ui-icon-gripsmall-diagonal-se').remove();
   }
})
在带有

类 ui-resizable 的div 内部，您需要将div 的背景图像替换为类 ui-icon-gripsmall-diagonal-se

您可以执行以下操作：

$(".ui-icon-gripsmall-diagonal-se").css("background-image", "url(someImage.png)")

这篇文章中的说明对我有用：

http://forum.jquery.com/topic/how-to-make-the-se-grip-handle-larger-for-a-jquery-ui-resizeable

使用此 css：

.ui-widget-content .ui-icon.ui-icon-gripsmall-diagonal-se {
      width: 32px;
      height: 32px;
      background: url(<insert your image url here>) left top no-repeat;
}

我希望这对你有用：

.ui-resizable-handle { 
    z-index: auto !important;
    background-image: url('');
 }

如果您需要完全删除手柄图标，只需将背景图像设置为无即可。

.ui-resizable-handle { 
    background-image: none;
 }

$('.ui-icon-gripsmall-diagonal-se').css("background-image", "url('')");

我删除了调整大小手柄，永久更改了css，如下所示：

<style>
   .ui-icon, .ui-widget-content .ui-icon
   {
      background-image : none;
   }
</style>

它对我有用。

相关文章：