jQuery изменяемый размер работает только на первом элементе - PullRequest
Новая
       64

jQuery изменяемый размер работает только на первом элементе

1 голос
/ 09 ноября 2010

У меня есть элемент управления на моей странице, который будет содержать несколько многострочных текстовых полей, размер которых необходимо изменить.
Я пытаюсь использовать функцию изменения размера 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>

alt text

Ответы [ 4 ]

3 голосов
/ 09 ноября 2010

Вы можете использовать $ .each и перебирать элементы. Как это: 

$("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") }
    });
});
0 голосов
/ 23 июня 2014

Как правило, если вы применяете Resizable к нескольким объектам одновременно, вам нужно просто передать селектор для дочернего элемента, который должен использоваться в качестве дескриптора.Также это должно быть одинаковым в каждом из элементов, к которым должен применяться изменяемый размер.

Пример

Цитата с сайта jQueryUI.Жирный шрифт для акцента.http://api.jqueryui.com/resizable/#option-handles

Объект: Поддерживаются следующие ключи: {n, e, s, w, ne, se, sw, nw}.Значение любого указанного должно быть селектором jQuery, соответствующим дочернему элементу изменяемого размера для использования в качестве этого дескриптора.Если дескриптор NOT является дочерним для изменяемого размера, вы можете напрямую передать DOMElement или действительный объект jQuery.Примечание. При создании собственных дескрипторов каждый дескриптор должен иметь класс ui-resizable-handle, , а также соответствующий класс ui-resizable- {direction}, .eg, 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" }
    });
});
0 голосов
/ 09 ноября 2010

правильно выше. вам нужно будет перебрать каждый элемент класса и назначить дочерний или связанный дескриптор, то, как вы это делаете сейчас, вы назначаете универсальный класс div.ui-resizable-handle как дескриптор универсальный элемент класса div.ImResizable. их нет однозначного соответствия.

0 голосов
/ 09 ноября 2010

Вы ищете функцию jQuery.each .

...