Controles personalizables personalizables en JQuery UI

Question

He estado intentando crear un cuadro de texto de tamaño variable (ASP.NET multiline TextBox/HTML textarea) y uso la interfaz de usuario de JQuery para hacer que se pueda cambiar el tamaño, pero parece que se está ejecutando maneja.

La documentación de JQuery en el método Resizable (específicamente en la opción handles) sugiere que puedo establecer cualquiera de los identificadores para usar un elemento HTML personalizado. He logrado que el textbox redimensionable funcione perfectamente usando los identificadores de tamaño variable predeterminados, pero al tratar de establecer los personalizados (es decir, un elemento HTML que he definido en el marcado) crea el siguiente problema: el contenedor de tamaño variable deja la cantidad correcta de espacio para el identificador div en la parte inferior (para el controlador Sur), pero deja el espacio vacío y muestra el elemento debajo (fuera de) del contenedor redimensionable (verificado mediante Firebug).

Aquí es mi margen de beneficio (ASP.NET/XHTML) y el código JavaScript:

<asp:TextBox runat="server" ID="codeTextBox" TextMode="MultiLine" Wrap="false" Rows="15"> 
</asp:TextBox> 
<div class="resizable-s" style="width: 100%; height: 22px; background: red;"> 
</div> 

<script type="text/javascript"> 

    $(function() { 
     var codeTextBox = $("#<%= codeTextBox.ClientID %>"); 

     codeTextBox.resizable({ 
      handles: { s : $(".resizable-s") }, 
      minHeight: 80, 
      maxHeight: 400 
     }); 
    }); 

</script> 

Por supuesto, no puedo hacer que el div mango de tamaño variable (clase resizable-s) un niño de la TextBox/textarea, pero esto no debería ser un problema según los documentos de JQuery.

A juzgar por la búsqueda que he hecho, no soy la única persona que ha tenido este problema. (Desafortunadamente, los documentos de JQuery no dan un ejemplo del uso de identificadores de tamaño variable personalizados, por lo que no todos estamos seguros del código correcto). Si alguien puede sugerir una solución a esto, o la confirmación de que se trata de un error de JQuery, eso sería muy apreciado.

Answer 1

Por un poco de excavación que hice en el código jquery-ui, creo que puedo confirmar que un identificador personalizado fuera del elemento redimensionable no funciona.

El problema es que los eventos del mouse se inicializan para el elemento redimensionable (o un elemento contenedor en el caso de textarea). Si el identificador no es un elemento secundario de los eventos del mouse, no desencadenará el evento mousedown en el identificador, por lo que no lo hará arrastrable.

Como una prueba de concepto, reparé un poco en jquery-ui hasta que conseguí cosas para (algo así como) trabajar. No hay garantías sobre el código, pero debe señalar qué tipo de cambios tendrían que suceder para que funcione.

alrededor de la línea 140 en ui.resizable.js I cambiado:

this._handles = $('.ui-resizable-handle', this.element) 
    .disableSelection(); 

a

this._handles = $('.ui-resizable-handle') 
    .disableSelection(); 

Luego he añadido el siguiente código (parte de mouseInit de ui.core.js, probablemente debería utilizar toda la función) en ui.resizable.js (alrededor de la línea 180) después de la mouseInit se llama para el elemento de tamaño variable:

... 
    //Initialize the mouse interaction 
    this._mouseInit(); 

    // Add mouse events for the handles as well - ylebre 
    for (i in this.handles) { 
     $(this.handles[i]).bind('mousedown.resizable', function(event) { 
     return self._mouseDown(event); 
     }); 
    } 

Esto me permite hacer un manejador de cambio de tamaño que no es un elemento secundario del elemento de tamaño variable. Mi identificador es un div con id 'sur' y está unido al elemento redimensionable. Aquí está el snippit HTML:

<textarea id="resizable" class="ui-widget-content"> 
    <h3 class="ui-widget-header">Resizable</h3> 
</textarea> 
<div id="south" class="ui-resizable-handle">south</div> 

Y el código javascript:

$("#resizable").resizable(
     {handles: {s: document.getElementById("south")}} 
    ); 

Espero que esto ayude!

Answer 2

Sí, parece un error para mí. He aquí una muestra completa, para los que tratan de forma local:

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="http://jqueryui.com/latest/themes/base/ui.all.css" type="text/css"/> 
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/jquery-1.3.2.js" type="text/javascript"></script> 
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.core.js" type="text/javascript"></script> 
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.resizable.js" type="text/javascript"></script> 
    <style type="text/css"> 
    #resizable { width: 100px; height: 100px; background: silver; } 
    #southgrip { width: 100px; height: 10px; background-color: blue; } 
    </style> 
    <script type="text/javascript"> 
    $(function() { 
     $('#resizable').resizable({ 
     handles: { 's': $('#southgrip') }, 
     minHeight: 80, 
     maxHeight: 400 
     }); 
    }); 
    </script> 
</head> 
<body> 

<div id="resizable"></div> 
<div id="southgrip"></div> 

</body> 
</html> 

This jQuery UI bug pueden estar relacionados.

Otras cosas que me trataron:

• Reemplazar 'última' con '1.6' y 'jquery-1.3.2' con 'jquery-1.2.6' para tratar con una versión anterior de jQuery UI para ver si es una regresión. No se ve así.
• Agregue ui-resizable-s y/o ui-resizable-handle clases CSS a #southgrip. No dados. Sin embargo,, si #southgrip está dentro de #resizable, funciona. Pero, esto no resuelve tu problema.
• Usando { 's': $('#southgrip').get(0) } para la opción handles. No dados.

Answer 3

Tuve el mismo problema 4 años después. Es bueno que nunca arreglaron eso. Pensé en usar Interface pero no tenía ninguna actualización desde 2007. Así que decidí solucionar el error por mi cuenta y hacer una solicitud de extracción en el proyecto jQuery UI en Github. https://github.com/jquery/jquery-ui/pull/1134 Espero que lo acepten y lo fusionen pronto. Agregué una prueba, así que estoy seguro de que funcionará en cualquier caso porque todas las pruebas de redimensionamiento de Jquery UI funcionan con esta modificación.

Empecé a usar el código de ylebre pero no funcionó. Así que hice algunos pequeños cambios.

Answer 4

Finalmente encontramos una solución extremadamente efectiva después de horas de tratar de superar este molesto error. Simplemente, agregue su elemento de control en la clase ui. La función siguiente ha sido probada y funciona bien con los controles Sur y Oeste. ¡Espero que ayude!

function resizables(element, handle, type){ 

var height = handle.height(); 
var place = type =="s"? "bottom":"top"; 
var css = {}; 
     css["height"] = height+"px"; 
     css[place] = -height+"px"; 


element.resizable({handles: type}); 
var jqclass = element.find(".ui-resizable-"+type); 

     handle.css({"cursor": type+"-resize"}); 
     jqclass.append(handle); 
     jqclass.css(css); 
} 

Cuando llame a la función siguiente, su identificador personalizado se colocará en la ubicación correcta y funcionará probablemente. PD: la función funciona con los manejadores 'n' y 's'.

resizables($("#draggable"), $("#handle"), 's'); 

Answer 5

tuve un problema similar, pero mi necesidad era establecer los hadlers dinámicamente a varios elementos:

  $.each($(".imagecontainer"),function() { 
       $(this).resizable({ 
        handles: {se: $(this).closest(".spaciator").find(".ui-resizable-se")} 
       }); 
      };