¿Cómo puedo personalizar los manejadores de cambio de tamaño con jquery ui?

Estoy usando jquery interfaz de usuario para que mi página de elementos a ser de tamaño variable, pero me gustaría configurar de forma personalizada las manijas. He probado lo que yo creo que debería funcionar, pero no es así.

El html básico es:

 <div id="element_x" class="resizable">
  <div id="overlay_x" class="element_buttons">
   <div id="resize_element_x" class="resize_element ui-resizable-handle ui-resizable-se"><img src="images/site/handle_resize.png" border=0 title="Resize this element" /></div>
  </div>
 </div>

Lo configuro como este:

   var reposition = '';
   $(function() {
    $( ".resizable" ).resizable({
     containment: "#viewPage",
     handles: {"e,s,se" : { e: '.ui-resizable-e', s: '.ui-resizable-s', se: '.ui-resizable-se'}},
     resize: function(event, ui){
       reposition = ui.position;
     }
    });
   });

Esto produce el identificador correcto en el lugar correcto, pero cuando intento cambiar el tamaño, simplemente no hacer nada! Nadie puede ver lo que está mal, o sugerir una manera mejor de hacer esto?

Gracias!

Está usted recibiendo algún error en la consola?
No, nada en la consola

OriginalEl autor Sharon | 2011-04-15

2 Kommentare

  1. 2

    La solución no es mía, sino que muestra exactamente lo que el problema y la solución es:

    <p><a href="http://bugs.jqueryui.com/ticket/4310">jQuery UI #4310</a> - Custom resizable handles do not work unless the ui-resizable-xy and ui-resizable-handle classes are added.</p>
    
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    
    
    <div class="container">
        <div class="border bottom_right ui-resizable-se ui-resizable-handle"></div>
    </div>
    
    <script>
        $(function() {
            $('.container').resizable({
               handles: { se: '.bottom_right' } 
            });
        });
    </script>

    Para mí funciona! 🙂

    http://jsfiddle.net/tj_vantoll/pFfKz/

    OriginalEl autor Combine

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea