jQuery 可调整大小仅适用于第一个元素
我的页面上有一个控件将包含多个需要调整大小的多行文本框。
我正在尝试使用 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>
I have a control on my page will contain multiple multi-line text boxes that need to be resizable.
I am attempting to use the jQuery resizable function to accomplish this task. I only need my text boxes to be expandable vertically. Unfortunately I can only get the resizable function to work for the first div.
Here's a sample of my code:
<%@ 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您可以使用 $.each 并迭代元素。像这样：
You could use $.each and iterate over the elements. Like this:
您正在寻找 jQuery.each 函数。
You are looking for jQuery.each function.
上面正确。您需要迭代该类的每个元素，并分配子句柄或相关句柄，就像您现在所做的那样，您将 div.ui-ressized-handle 的通用类分配为的句柄div.ImResizable 的通用类元素。它们之间不存在一对一的匹配。
correct above. you'll need to iterate over each element of the class, and assign the child or related handle, the way you're doing it now, you're assigning the generic class of div.ui-resizable-handle to be the handle of the generic class element of div.ImResizable. there's no 1-to-1 matching of them.
基本上，如果您一次将“可调整大小”应用到多个对象，则只需为要用作句柄的子元素传递一个选择器。此外，在要应用调整大小的每个元素中，这一点都必须相同。
示例
引用自 jQueryUI 站点。加粗是为了强调。
HTML：
JavaScript：
Basically if you are applying Resizable to more than one object at a time you need to just pass a selector for the child element that is to be used as the handle. Also this must be the same in each one of the elements that resizable is to be applied to.
Example
Quote from the jQueryUI site. Bold added for emphasis. http://api.jqueryui.com/resizable/#option-handles
HTML:
Javascript: