ejemplo jQuery UI - Zoom (de tamaño variable)
Utilizar el ratón para cambiar el tamaño del elemento.
Para más detalles acerca de la interacción de tamaño variable, consulte la documentación de la API de widgets de tamaño variable (el tamaño ajustable del widget) .
La función predeterminada
Activar la función de tamaño variable en cualquier elemento DOM. Arrastrar el ratón hacia la derecha o de la frontera inferior a la anchura o la altura deseada.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de escala (de tamaño variable) - La función por defecto </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable {width: 150px; altura: 150px; padding: 0.5em;}
h3 #resizable {text-align: center; margin: 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ();
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "tamaño variable" class = "ui-Reproductor-content">
<H3 class = "ui-Reproductor-header"> Zoom (de tamaño variable) </ h3>
</ Div>
</ Body>
</ Html>
animación
Uso animate opción (booleano) permite que el comportamiento de la animación de escala. Cuando esta opción se establece en true, el arrastre de esquema para la ubicación deseada, dejar de arrastrar cuando los elementos están animados para ajustar el tamaño.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de escala (de tamaño variable) - Anime </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable {width: 150px; altura: 150px; padding: 0.5em;}
h3 #resizable {text-align: center; margin: 0;}
.ui de redimensionamiento-helper {border: 1px gris de puntos;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
animar: true
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "tamaño variable" class = "ui-Reproductor-content">
<H3 class = "ui-Reproductor-header"> Animación </ h3>
</ Div>
</ Body>
</ Html>
Limitar el área de zoom
límites de escala definidos. Utilice containment opción para especificar un elemento DOM padre o un selector de jQuery, tales como 'documento.'.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de escala (de tamaño variable) - limiten la zona de zoom </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#container {width: 300px; altura: 300px;}
h3 #container {text-align: center; margin: 0; margin-bottom: 10px;}
#resizable {background-position: arriba a la izquierda; ancho: 150px; altura: 150px;}
#resizable, #container {padding: 0.5em;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
contención: "#container"
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "contenedor" class = "ui-Reproductor-content">
<H3 class = "ui-Reproductor-header"> límite </ h3>
<Div id = "tamaño variable" class = "ui-estado activo">
<H3 class = "ui-Reproductor-header"> Zoom (de tamaño variable) </ h3>
</ Div>
</ Div>
</ Body>
</ Html>
inicio diferido
Por delay milisegundos de retardo comienzan opción de escala. Por distance opción es presionado y arrastra el cursor al elemento de imagen antes de permitir el escalado.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de escala (de tamaño variable) - comienzo retrasado </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable, # resizable2 {width: 150px; altura: 150px; padding: 0.5em;}
h3 #resizable, # resizable2 h3 {text-align: center; margin: 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
retardo: 1000
});
$ ( "# Resizable2") .resizable ({
distancia: 40
});
});
</ Script>
</ Head>
<Cuerpo>
<h3 class = "docs"> tiempo de retardo (ms): </ h3>
<Div id = "tamaño variable" class = "ui-Reproductor-content">
<H3 class = "ui-Reproductor-header"> Tiempo </ h3>
</ Div>
<H3 class = ""> documentos de retardo distancia (px): </ h3>
<Div id = "resizable2" class = "ui-Reproductor-content">
<H3 class = "ui-Reproductor-header"> Distancia </ h3>
</ Div>
</ Body>
</ Html>
asistente
Al establecer el helper opción de una clase CSS, cuando se muestra únicamente los elementos de contorno.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de escala (de tamaño variable) - asistente </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable {width: 150px; altura: 150px; padding: 0.5em;}
h3 #resizable {text-align: center; margin: 0;}
.ui de redimensionamiento-helper {border: 2px de puntos # 00F;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
ayudante: "ui-tamaño variable-ayudante"
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "tamaño variable" class = "ui-Reproductor-content">
<H3 class = "ui-Reproductor-header"> Asistente </ h3>
</ Div>
</ Body>
</ Html>
El tamaño máximo / mínimo
Utilice maxHeight , maxWidth , minHeight y minWidth opción limita el elemento máximo o mínimo de altura o anchura de tamaño variable.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de escala (de tamaño variable) - Máximo / mínimo </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable {width: 200px; altura: 150px; padding: 5px;}
h3 #resizable {text-align: center; margin: 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
maxHeight: 250,
anchoMax: 350,
minHeight: 150,
anchoMin: 200
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "tamaño variable" class = "ui-Reproductor-content">
<H3 class = "ui-Reproductor-header"> Ampliar / </ h3>
</ Div>
</ Body>
</ Html>
Mantener relación de aspecto
Mantener la relación de aspecto actual o establecer un nuevo límite a la relación de aspecto de escala. Configuración aspectRatio opción es verdad, y entregar opcionalmente una nueva tasa (por ejemplo, 4/3).
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de escala (de tamaño variable) - Mantener relación de aspecto </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable {width: 160px; altura: 90px; padding: 0.5em;}
h3 #resizable {text-align: center; margin: 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
aspectRatio: 16/9
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "tamaño variable" class = "ui-Reproductor-content">
<H3 class = "ui-Reproductor-header"> Mantener relación de aspecto </ h3>
</ Div>
</ Body>
</ Html>
Ajustar a la cuadrícula
elementos de tamaño variable alineados a la red. Por grid opción de tamaño para ajustar las celdas de la cuadrícula (píxeles altura y anchura).
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de escala (de tamaño variable) - Ajustar a la cuadrícula </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable {width: 150px; altura: 150px; padding: 0.5em;}
h3 #resizable {text-align: center; margin: 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
rejilla: 50
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "tamaño variable" class = "ui-Reproductor-content">
<H3 class = "ui-Reproductor-header"> Cuadrícula </ h3>
</ Div>
</ Body>
</ Html>
sincrónica zoom
Al hacer clic y arrastrar un elemento de borde para cambiar el tamaño de múltiples elementos a la vez. A alsoResize opciones pasaron un selector compartida.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de escala (de tamaño variable) - Synchronous zoom </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable {background-position: arriba a la izquierda;}
#resizable, #also {width: 150px; altura: 120px; padding: 0.5em;}
h3 #resizable, #also h3 {text-align: center; margin: 0;}
#also {margin-top: 1 em;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
alsoResize: "#also"
});
$ ( "#also") .resizable ();
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "tamaño variable" class = "ui-Reproductor-header">
<H3 class = "ui-estado activo"> Zoom </ h3>
</ Div>
<Div id = "también" class = "ui-Reproductor-content">
<H3 class = "ui-Reproductor-header"> Zoom sincronización </ h3>
</ Div>
</ Body>
</ Html>
Cuadro de texto
cuadro de texto escalable.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de escala (de tamaño variable) - Box </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui de redimensionamiento-se {
parte inferior: 17px;
}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
manijas: "se"
});
});
</ Script>
</ Head>
<Cuerpo>
<Textarea id = "filas de tamaño variable" = "5" cols = "20"> </ textarea>
</ Body>
</ Html>
La retroalimentación visual
Al establecer el ghost opción es verdad, el elemento se puede mostrar en un translúcido durante el zoom, en lugar de mostrar un elemento real.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI de escala (de tamaño variable) - retroalimentación visual </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#resizable {width: 150px; altura: 150px; padding: 0.5em;}
h3 #resizable {text-align: center; margin: 0;}
.ui de redimensionamiento-fantasma {border: 1px gris de puntos;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
fantasma: true
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "tamaño variable" class = "ui-Reproductor-content">
<H3 class = "ui-Reproductor-header"> Ghost </ h3>
</ Div>
</ Body>
</ Html>