jQuery resizable only works on first element
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;
}
.ImResizab开发者_StackOverflow社区le
{
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>
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") }
});
});
You are looking for jQuery.each function.
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.
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
Object: The following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is NOT a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly. Note: When generating your own handles, each handle must have the ui-resizable-handle class, as well as the appropriate ui-resizable-{direction} class, .e.g., ui-resizable-s.
HTML:
<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 ui-resizable-s" />
</div>
</td>
</tr>
</table>
Javascript:
$(function ()
{
$("div.ImResizable").resizable(
{
minHeight: 25,
maxHeight: 85,
minWidth: 470,
maxWidth: 470,
handles: { 's': "div.ui-resizable-handle" }
});
});
加载中,请稍侯......
精彩评论