ejemplos - tooltip jquery
¿Cómo cambiar el tamaño SOLO horizontal o verticalmente con jQuery UI de tamaño variable? (7)
La única solución que he encontrado es establecer la altura o el ancho máximo y mínimo con el valor actual.
Ejemplo:
foo.resizable({
maxHeight: foo.height(),
minHeight: foo.height()
});
Pero esto es realmente feo, especialmente si tengo que cambiar la altura del elemento mediante programación.
La solución es configurar su redimensionamiento para que cancele los cambios de la dimensión que no desea.
aquí hay un ejemplo de cambio de tamaño verticalmente:
foo.resizable({
resize: function(event, ui) {
ui.size.width = ui.originalSize.width;
}
});
Mientras que el póster pedía principalmente un cambio de tamaño horizontal, la pregunta también pide vertical.
La carcasa vertical tiene un problema especial: es posible que haya establecido un ancho relativo (por ejemplo, 50%) que desea conservar incluso cuando se cambie el tamaño de la ventana del navegador. Sin embargo, jQuery UI establece un ancho absoluto en px una vez que primero cambia el tamaño del elemento y se pierde el ancho relativo.
Si encuentra el siguiente código para trabajar para este caso de uso:
$("#resizable").resizable({
handles: ''s'',
stop: function(event, ui) {
$(this).css("width", '''');
}
});
Consulte también http://jsfiddle.net/cburgmer/wExtX/ y jQuery UI redimensionable: altura automática cuando se usa este manejador solo
Para mí, las soluciones con ambos controladores y el controlador de cambio de resize funcionaron bien, por lo que el usuario ve el control pero puede cambiar el tamaño solo horizontalmente, una solución similar debería funcionar para la vertical. Sin usuario de la parte inferior derecha, el usuario puede ignorar que puede cambiar el tamaño del elemento.
Cuando se utiliza ui.size.height = ui.originalSize.height; no funcionará correctamente si el elemento cambió su tamaño desde el estado inicial.
foo.resizable({
// Handles left right and bottom right corner
handles: ''e, w, se'',
// Remove height style
resize: function(event, ui) {
$(this).css("height", '''');
}
});
Para un mejor rendimiento $(this) podría eliminarse:
var foo = jQuery(''#foo'');
foo.resizable({
// Handles left right and bottom right corner
handles: ''e, w, se'',
// Remove height style
resize: function(event, ui) {
foo.css("height", '''');
}
});
Quería permitir el cambio de tamaño del ancho cuando el navegador cambia el tamaño, pero no cuando el usuario cambia el tamaño del elemento, esto funcionó bien:
foo.first().resizable({
resize: function(event, ui) {
ui.element.css(''width'',''auto'');
},
});
Una solución muy simple:
$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical
Esto también funciona para draggable (). Ejemplo: http://jsfiddle.net/xCepm/
Successfully working div position Vertically and horizontally
-------------------------------------------------------------
<head>
<style>
.resizable {
height: 100px;
width: 500px;
background: #09C;
}
.resizable-x {
height: 100px;
width: 500px;
background: #F60;
}
</style>
<script>
$(function() {
$( ".resizable" ).resizable({
grid: [10000, 1]
});
$( ".resizable-x " ).resizable({
grid: [1, 10000]
});
$( ".resizable" ).draggable();
});
});
</script>`enter code here`
</head>
<body>
<div class="resizable"></div>
<div class="resizable-x"></div>
</body>