jQuery可调整大小仅适用于第一个元素 [英] jQuery resizable only works on first element
本文介绍了jQuery可调整大小仅适用于第一个元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的页面上有一个控件，其中包含多个需要调整大小的多行文本框.
我正在尝试使用jQuery可调整大小的功能来完成此任务.我只需要我的文本框可以垂直扩展即可.不幸的是，我只能将可调整大小的功能用于第一格.
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.
这是我的代码示例:
<%@ 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并遍历元素.像这样:
You could use $.each and iterate over the elements. Like this:
$("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可调整大小仅适用于第一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
