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

Question

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

Answer 1

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

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;
}

在这个Fiddle Example上你可以看到它的实际效果！

注意：

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

Answer 2

通过调用$(...).resize()，您可以将任何子元素设置为句柄。 Take a look at this example：

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

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

Answer 3

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

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