jQuery redimensionnable ne fonctionne que sur le premier élément

J'ai un contrôle sur ma page contiendra plusieurs zones de texte multiligne qui doivent être redimensionnables.
J'essaie d'utiliser la fonction redimensionnable jQuery pour accomplir cette tâche. J'ai seulement besoin que mes zones de texte soient extensibles verticalement. Malheureusement, je peux seulement obtenir la fonction redimensionnable pour travailler pour le premier div.jQuery redimensionnable ne fonctionne que sur le premier élément

Voici un échantillon de mon 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>

alt text

Source

2010-11-09 Airn5475

Vous pouvez utiliser $ .each et parcourir les éléments. Comme ceci:

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

Source

2010-11-09 15:06:52

Merci! Je vous remercie! Je vous remercie! Cela fonctionne exactement comme j'en ai besoin! J'apprécie toutes les autres suggestions, mais le code est ce dont mon petit cerveau avait vraiment besoin! – Airn5475

Vous recherchez jQuery.each fonction.

Source

2010-11-09 14:35:55 Vikash

Je ne suis pas familier réel avec la fonction jQuery.each, pourriez-vous me donner un exemple de la façon d'intégrer dans ma solution ? – Airn5475

$ ("div.ImResizable"). Each (function() { \t $ (this) .resizable(); }); – Vikash

correct ci-dessus. vous devez parcourir chaque élément de la classe et affecter l'enfant ou le handle associé, comme vous le faites maintenant, vous affectez la classe générique de div.ui-resizable-handle l'élément de classe générique de div.ImResizable. il n'y a pas de correspondance 1-à-1 d'entre eux.

Source

2010-11-09 14:42:43 FatherStorm

Je pense que je suis en quelque sorte, mais pourrait vraiment utiliser un exemple de code pour aider à épeler les choses. – Airn5475

Fondamentalement, si vous postulez redimensionnable à plus d'un objet à la fois que vous avez besoin de passer juste un sélecteur pour l'élément enfant qui doit être utilisé comme la poignée. De plus, cela doit être le même dans chacun des éléments auxquels il est possible de redimensionner.

Example

Citation du site jQueryUI. Gras ajouté pour l'emphase. http://api.jqueryui.com/resizable/#option-handles

Objet: Les touches suivantes sont prises en charge: {n, e, s, w, ne, se, sw, nw}. La valeur de tout élément spécifié doit être un sélecteur jQuery correspondant à l'élément enfant de la taille redimensionnable à utiliser comme indicateur. Si le handle est NOT un enfant de la redimensionnable, vous pouvez passer le DOMElement ou un objet jQuery valide directement. Remarque: Lors de la génération de vos propres handles, chaque handle doit avoir la classe ui-resizable-handle, ainsi que la classe ui-resizable- {direction} appropriée, par exemple, 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" } 
    }); 
});

Source

2014-06-23 18:03:44 David

jQuery redimensionnable ne fonctionne que sur le premier élément

Répondre

Questions connexes