Fatal编程技术网
  • jquery/
  • jQuery Resizeable仅适用于第一个元素

jQuery Resizeable仅适用于第一个元素

jquery jquery-ui

jQuery Resizeable仅适用于第一个元素,jquery,jquery-ui,resizable,jquery-ui-resizable,jquery-resizable,Jquery,Jquery Ui,Resizable,Jquery Ui Resizable,Jquery Resizable,我的页面上有一个控件，该控件将包含多个需要调整大小的多行文本框。 我正在尝试使用jQuery Resizeable函数来完成此任务。我只需要我的文本框可以垂直扩展。不幸的是，我只能让可调整大小的函数为第一个div工作 以下是我的代码示例： <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Page_jQuery_Resizable.aspx.vb" Inherits="jQueryTest.Page_jQuery_

我的页面上有一个控件，该控件将包含多个需要调整大小的多行文本框。
我正在尝试使用jQuery Resizeable函数来完成此任务。我只需要我的文本框可以垂直扩展。不幸的是，我只能让可调整大小的函数为第一个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>


jQuery测试-第2页
table.textboxTable td
{
填充：15px；
填充底部：30px；
边框：2件纯蓝；
}
.不可调整大小
{
高度：60px；
宽度：470px；
}
.不可调整大小的文本区域
{
身高：95%；
宽度：100%；
}
.ui可调整大小的句柄
{
高度：8px；
宽度：474px；
背景：#eeeeeeurl（'Images/gripie.png'）无重复滚动中心；
边框颜色：#DDDDDD；
边框样式：实心；
边框宽度：0pt 1px 1px；
光标：s-调整大小；
}
$（函数（）
{
$（“div.imresizeable”）。可调整大小(
{
身高：25，
最大高度：85，
最小宽度：470，
最大宽度：470，
句柄：{s'：$（“div.ui-resizeable-handle”）}
});
});

您正在寻找函数。

请更正以上内容。您需要迭代类的每个元素，并指定子元素或相关句柄，就像您现在所做的那样，将div.ui-resizeable-handle的泛型类指定为div.imresizeable的泛型类元素的句柄。它们之间没有1对1的匹配。

您可以使用$。每个元素都使用$，然后迭代元素。像这样：

$("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") }
    });
});
基本上，如果一次要将Resizeable应用于多个对象，则只需为要用作句柄的子元素传递一个选择器。此外，在要应用可调整大小的每个元素中，这必须相同

引自jQueryUI网站。为强调起见，增加了粗体

对象： 支持以下键：{n，e，s，w，ne，se，sw，nw}。任何指定的值都应该是与要用作该句柄的可调整大小的子元素相匹配的jQuery选择器。如果句柄不是可调整大小的子对象，则可以直接传入domeElement或有效的jQuery对象。注意：生成自己的句柄时，每个句柄必须具有ui可调整大小的句柄类以及相应的ui可调整大小的{direction}类。例如，ui-Resizeable-s

HTML:

我不太熟悉jQuery.each函数，你能给我一个如何将它合并到我的解决方案中的例子吗？$（“div.ImResizable”）.each（function（）{$（this.resizable（）；}）；我想我有点明白了，但是我真的可以用一个代码示例来帮助你解释清楚。谢谢！非常感谢。非常感谢。这正是我所需要的！我很感激所有其他“彼此”的建议，但代码是我小小的大脑真正需要的！ 
<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>

$(function ()
{
    $("div.ImResizable").resizable(
    {
        minHeight: 25,
        maxHeight: 85,
        minWidth: 470,
        maxWidth: 470,
        handles: { 's': "div.ui-resizable-handle" }
    });
});