ejemplos - Asas personalizables de tamaño variable en JQuery UI

tooltip html

Question

He estado intentando crear un cuadro de texto redimensionable ( TextBox / HTML textarea multilínea ASP.NET) y usar JQuery UI para hacerlo redimensionable, pero parece que se está ejecutando en algunos problemas relacionados con los controles de arrastre personalizados.

La documentación de JQuery sobre el método de Resizable (específicamente la opción de los handles ) sugiere que puedo configurar cualquiera de los controladores para usar un elemento HTML personalizado. Logré que el cuadro de texto redimensionable funcionara perfectamente bien usando los controladores predeterminados de tamaño variable, pero al intentar configurar 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 controlador div en la parte inferior (para el controlador sur), deja el espacio vacío y muestra el elemento debajo (fuera de) el contenedor de tamaño variable (verificado mediante Firebug).

Aquí está mi código de marcado (ASP.NET/XHTML) y 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 la división de tamaño variable div (clase resizable-s ) sea hija de 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 de uso de controladores de tamaño variable personalizados, por lo que todos estamos inseguros del código correcto). Si alguien puede sugerir una solución a esto, o incluso la confirmación de que es un error de JQuery, Eso sería muy apreciado.

Answer 1

De un poco de excavación que hice en el código jquery-ui, creo que puedo confirmar que un identificador personalizado fuera del elemento de tamaño variable no funciona.

El problema es que los eventos del mouse se inicializan para el elemento de tamaño variable (o un elemento de envoltura en el caso de textarea). Si el controlador no es un elemento secundario del lugar donde se controlan los eventos del mouse, no activará el evento mousedown en el controlador, por lo que no se puede arrastrar.

Como prueba de concepto, me puse un poco en jquery-ui hasta que logré que las cosas funcionaran. No hay garantías sobre el código, pero debería indicar qué tipo de cambios deberían ocurrir para que funcione.

Alrededor de la línea 140 en ui.resizable.js cambié:

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

a

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

Luego agregué el siguiente código (parte de mouseInit de ui.core.js, probablemente debería usar toda la función) en ui.resizable.js (alrededor de la línea 180) después de llamar al mouseInit 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 identificador de cambio de tamaño que no es un elemento secundario del elemento de tamaño variable. Mi identificador es un div con id ''south'' y se adjunta al elemento de tamaño variable. Aquí está el fragmento de código 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

Finalmente, encontré una solución extremadamente efectiva después de horas de intentar superar este molesto error. Simplemente, agregue su elemento de mango en la clase ui. La siguiente función ha sido probada y funciona bien con los mangos 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 como se muestra a continuación, su identificador personalizado se colocará en la ubicación correcta y probablemente funcionará. PD: la función trabaja con ''n'' y ''s'' manejadores.

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

Answer 3

Sí, me parece un error. Aquí hay una muestra completa, para aquellos que intentan localmente:

<!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>

Este error de jQuery UI puede estar relacionado.

Otras cosas que probé:

• Reemplace ''latest'' con ''1.6'' y ''jquery-1.3.2'' con ''jquery-1.2.6'' para probar con una versión anterior de jQuery UI para ver si es una regresión. No lo parece.
• Agregue clases CSS de ui-resizable-s y / o ui-resizable-handle 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 de handles . No dados.

Answer 4

Tuve el mismo problema 4 años después. Sames que nunca arreglaron eso. Pensé en usar Interface pero no tenía ninguna actualización desde 2007. Así que decidí arreglar el error por mi cuenta y hacer una solicitud 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 redimensionable de Jquery UI funcionan con esta modificación.

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

Answer 5

Tuve un problema similar, pero mi necesidad era configurar dinámicamente a los hadlers a múltiples elementos:

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