jQuery resizable работает только с первым элементом

У меня есть элемент управления на моей странице, который будет содержать несколько многострочных текстовых полей, которые необходимо изменить.
Я пытаюсь использовать функцию jQuery resizable для выполнения этой задачи. Мне нужно, чтобы мои текстовые поля расширялись вертикально. К сожалению, я могу получить только возможность изменения размера для первого div.jQuery resizable работает только с первым элементом

Вот пример моего кода:

<%@ 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

источник

2010-11-09 Airn5475

Вы можете использовать $ .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") } 
    }); 
});

источник

2010-11-09 15:06:52

Спасибо! Спасибо! Спасибо! Это работает именно так, как мне нужно! Я ценю все другие «предложения», но код - это то, что действительно нужен моему маленькому мозгу! – Airn5475

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

источник

2010-11-09 14:35:55 Vikash

Я не очень знаком с функцией jQuery.each, могли бы вы дать мне пример того, как включить его в мое решение ? – Airn5475

$ ("div.ImResizable"). Каждый (функция() { \t $ (this) .resizable(); }); – Vikash

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

источник

2010-11-09 14:42:43 FatherStorm

Я думаю, что я как бы следую, но мог бы действительно использовать образец кода, чтобы помочь прочесть вещи. – Airn5475

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

Example

Цитата с сайта jQueryUI. Смелый добавил для акцента. http://api.jqueryui.com/resizable/#option-handles

объект: Следующие клавиши поддерживаются: {п, е, с, ш, п, как таковой, SW, NW}. Значение любого указанного должно быть селектором jQuery , соответствующим дочернему элементу изменяемого размера для использования в качестве этого дескриптора. Если дескриптор НЕ ребенок изменяемого размера, вы можете передать его непосредственно в DOMElement или действительный объект jQuery. Примечание. При создании собственных дескрипторов каждый дескриптор должен иметь класс ui-resizable-handle, , а также соответствующий класс ui-resizable- {direction}, .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" } 
    }); 
});

источник

2014-06-23 18:03:44 David

jQuery resizable работает только с первым элементом

ответ

Смежные вопросы