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

回答1:

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

回答2:

You are looking for jQuery.each function.

回答3:

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.

回答4:

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

来源：https://stackoverflow.com/questions/4134768/jquery-resizable-only-works-on-first-element

标签

jquery

jquery-ui

resizable

jquery-ui-resizable

jquery-resizable