jQuery-UI：可调整大小 - 如何增加可拖动边缘的大小？

I am using jQuery-UI's resizable edges to increase the height of a table. I am wondering how to create a thicker bottom border which can be dragged? Increasing the border around the table doesn't make a difference.

我使用jQuery-UI的可调整大小的边来增加表的高度。我想知道如何创建一个可以拖动的较厚的底部边框？增加桌子周围的边界并没有什么区别。

3 个解决方案

#1

With calling $(...).resize(), you're able to set any child-element as handle. Take a look at this example:

通过调用$（...）。resize（），您可以将任何子元素设置为句柄。看看这个例子：

$( "#resizeDiv" ).resizable({handles: {'s': '#handle'}});

It enables resizing for the #resizeDiv at the bottom edge, assigning the #handle element as the active dragging area.

它可以在底边调整#resizeDiv的大小，将#handle元素指定为活动拖动区域。

#2

You can achieve that by changing a bit of CSS:

你可以通过改变一点CSS来实现这一点：

CSS ^{classes present on the Jquery UI style sheet}

Jquery UI样式表中存在CSS类

/* handle on the bottom */
.ui-resizable-s {
    height: 15px;
}

/* handle on the right */
.ui-resizable-e {
    width: 15px;
}
/* handle icon (corner) */
.ui-resizable-se {
    width: 15px;
    height: 15px;
}

On this Fiddle Example you can see it in action!

在这个小提琴示例中，您可以看到它在行动！

Note:

注意：

You don't really need to change anything on the jQuery UI Style Sheet, just declare the news css values after the inclusion of the jQuery UI Style Sheet!

您不需要在jQuery UI样式表上更改任何内容，只需在包含jQuery UI样式表后声明新闻css值！

#3

http://jsfiddle.net/89v9U/1/

You will need a new image for the resize handler, but heres something you can work with, its just CSS!

你需要一个新的图像用于resize处理程序，但是你可以使用它，它只是CSS！

#1