jquery ui tamaño de la manija inferior izquierda para cambiar el tamaño

Question

Estoy usando el plugin jquery-ui-resizable en mi proyecto.

De forma predeterminada, cuando crea un objeto DOM jquery-ui-resizable, el asa redimensionable aparecerá en la esquina inferior derecha, necesito el asa de tamaño considerable en la esquina inferior izquierda.

--- --- EDITAR

Una cosa más, no se debe volver a utilizar considerable borde derecho, pero debe volver a utilizar considerable margen izquierdo.

Answer 1

Se debe utilizar la handles

supported: { n, e, s, w, ne, se, sw, nw }. 

Esto creará las asas en el ancho especificado. Los valores por defecto son

'e, s, se' 

Ejemplos de código

inicializar un tamaño variable con la opción asas especificado.

$(".selector").resizable({ handles: 'n, e, s, w' }); 

Obtener o establecer la opción de controles, después de iniciar.

//getter 
var handles = $(".selector").resizable("option", "handles"); 
//setter 
$(".selector").resizable("option", "handles", 'n, e, s, w'); 

Answer 2

adicional a la respuesta de Ahmed: jQueryUI no incluye un icono de la SW-asa y tampoco se aplica una clase icono de la SW-mango. Es posible utilizar un poco de CSS para agregar un icono:

#resizable .ui-resizable-sw{background:url(path/to/custom_icon.gif) no-repeat;} 

Answer 3

Para hacer re-dimensionamiento de todos los lados siguiente código también se puede utilizar

 var resizeOpts = { 
     handles: "all" ,autoHide:true 
    }; 
$(".selector").resizable(resizeOpts); 

y AutoHide igual verdadera significa que icono de agarre, se oculta automáticamente cuando el puntero del mouse se quita del objeto dom.

Answer 4

Estaba buscando esta solución SW. Lo que tuve que hacer para que funcione es agregar las clases ui-icon al div creado justo después de la llamada a resizable().

$("#wproof").resizable({handles: "w, sw, s"}); 
$('.ui-resizable-sw').addClass('ui-icon ui-icon-gripsmall-diagonal-sw'); 

A continuación, defina el icono tomando en imágenes/ui-icons_222222_256x240.png Es una pequeña zona de 9X9 en la parte inferior. Haga un archivo .png de él (¡con una rotación!) Y agregar el estilo a la clase dada:

<style> 
.ui-icon-gripsmall-diagonal-sw { 
    background-image: url(your 9x9 icon.png); } 
.ui-resizable-sw { 
    bottom: 1px; 
    left: 1px; 
} 
</style> 

La parte inferior izquierda y se fijan en -5px en css jquery-ui

Answer 5

parece que la propiedad cursor estándar es lo que se utiliza por el CSS IU

.ui-resizable-sw { 
cursor: sw-resize; 
height: 7px; 
width: 100%; 
top: -5px; 
left: 0; 
} 

también parece que el cursor no se muestra y de tamaño variable no está habilitado para el lado del elemento que se utiliza para el posicionamiento - por ejemplo: un div posicionado utilizando izquierda: 20px arriba: 20px no permitirá cambiar el tamaño de los lados izquierdo y superior

¡Lo descubrí después de agregar todos los controladores pero luego nunca aparecieron! Actualización: Aparentemente hay algún problema dentro de mi aplicación que está causando mi problema. Pruebas en JSFiddle todos los controladores funcionan como se esperaba usando la misma versión de JQuery ..... argggggg