我的页面上有一个控件将包含多个需要调整大小的多行文本框。
我正在尝试使用 jQuery 可调整大小函数来完成此任务。我只需要我的文本框可以垂直扩展。不幸的是，我只能让可调整大小的函数适用于第一个 div。
这是我的代码示例:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Page_jQuery_Resizable.aspx.vb"
Inherits="jQueryTest.Page_jQuery_Resizable" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Test - Page 2</title>
<script src="Scripts/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">
table.textboxTable td
{
padding: 15px;
padding-bottom: 30px;
border: 2px solid blue;
}
.ImResizable
{
height: 60px;
width: 470px;
}
.ImResizable textarea
{
height: 95%;
width: 100%;
}
.ui-resizable-handle
{
height: 8px;
width: 474px;
background: #EEEEEE url('Images/grippie.png') no-repeat scroll center;
border-color: #DDDDDD;
border-style: solid;
border-width: 0pt 1px 1px;
cursor: s-resize;
}
</style>
<form id="form1" runat="server">
<table class="textboxTable">
<tr>
<td>
<div class="ImResizable">
<asp:TextBox runat="server" TextMode="MultiLine" />
<div class="ui-resizable-handle" />
</div>
</td>
</tr>
<tr>
<td>
<div class="ImResizable">
<asp:TextBox runat="server" TextMode="MultiLine" />
<div class="ui-resizable-handle" />
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript">
$(function ()
{
$("div.ImResizable").resizable(
{
minHeight: 25,
maxHeight: 85,
minWidth: 470,
maxWidth: 470,
handles: { 's': $("div.ui-resizable-handle") }
});
});
</script>
最佳答案
您可以使用 $.each 并迭代元素。像这样:
$("div.ImResizable").each(function() {
var $this = $(this);
$this.resizable({
minHeight: 25,
maxHeight: 85,
minWidth: 470,
maxWidth: 470,
handles: { 's': $this.find("div.ui-resizable-handle") }
});
});
关于jQuery 可调整大小仅适用于第一个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4134768/