Cambiando el tamaño de los elementos en jQuery. Trabajar con el ancho del elemento. Restricción de límites permisibles para cambiar el tamaño de los elementos.

La antigua tarea de rastrear el caso de cambiar el tamaño de un elemento arbitrario en la página. En realidad, al crear una estructura independiente modular para ajustar los tamaños y otros atributos de CSS del elemento deseado en una página, en particular bloques con una carga periódica AJAX (por ejemplo: Noticias). Normalmente se resuelve a través del tiempo y la encuesta periódica del tamaño del elemento. Una nueva variante, sin usar una encuesta basada en el tiempo.

Truco: Dentro del elemento inserte un marco en blanco con la posición: absoluta y 100% (s), dé la partición: elemento relativo; . Y track frame.onresize:

Código de prueba:

Bajo spoiler

Teniendo en cuenta los deseos, - Código más implementado:

Código avanzado

El código:

Devoluciones, establece el ancho del elemento.

• versión Añadido: 1.0 .ancho ()

  Devoluciones: Entero

  Obtiene el ancho del elemento

• versión Añadido: 1.0 .width (valor)

  Un tipo: Cadena o número

  Devoluciones: jQuery.

  Un entero que representa el número de píxeles, o un número con una unidad de medida en forma de una cadena.

• versión Añadido: 1.4.1 .width (función (índice, ancho))

  función (índice, ancho)

  Un tipo: Función

  Devoluciones: jQuery.

  La función que devuelve el ancho para instalar una nueva. Obtiene el índice de posición del elemento en el conjunto y el valor del ancho anterior. La función se refiere al elemento actual.

La diferencia entre. CSS ("Ancho") y. ANTERIOR () al hecho de que este método devuelve un valor excepcionalmente numérico (por ejemplo, 400 y no 400px). MÉTODO.THIDH () Se recomienda usar cuando el valor obtenido debe usarse en cálculos matemáticos.

Este método se puede utilizar para obtener el ancho del documento y la ventana.

$ (Ventana). Ancho (); $ (documento). ancho ();

Tenga en cuenta que Methody.Width () siempre devuelve el ancho del contenido, sin tener en cuenta el valor de la propiedad CSS Box-Tamsing. Comenzando con JQUERY 1.8, debe obtener el valor de la propiedad de tamaño de la caja, luego tome el tamaño del marco y los guiones. Todo esto en el caso de que la propiedad de tamaño de la caja: la propiedad de la caja fronteriza se aplica al artículo. Para evitar estos cálculos, use.css ("ancho").

Para transferir al método.Thidth (valor), puede tanto la cadena como el número. Si solo se transmite el número, JQUERY agrega automáticamente "PX". Si una cadena debe verse así: 100px, 50% o Auto. Tenga en cuenta que en Modern Buders, el ancho no incluye los postes de sangría y los valores de marco.

Ejemplos:

Ejemplo: Mostrar diferencias en los valores de ancho de elementos. Dado que los artículos están en iframe, estos tamaños pueden ser ligeramente diferentes.

Obtenga un ancho de párrafo. Obtener el ancho del documento. Obtener el ancho de la ventana.

Muestra el párrafo para probar el ancho

Ejemplo: Establezca un ancho diferente al hacer clic en DIV elementos.

Elementos de escala (interacción modificada)

Interacción cambiante Se suma a los manipuladores del elemento, moviéndose, que, el usuario puede escalar el artículo cambiando su tamaño. Algunos navegadores proporcionan automáticamente una oportunidad de las áreas de texto, pero la interacción de resistible proporciona la posibilidad de una escala similar para cualquier elemento en el documento. Un ejemplo de aplicar este tipo de interacción que se implementa utilizando método resistible ()mostrado a continuación:

Ejemplo

En este ejemplo, se crean dos elementos DIV, cada uno de los cuales contiene un elemento de IMG y texto. En el escenario, se selecciona uno de ellos, y se aplica el método resistible () (utilizando el parámetro Alsoresize, que se describirá a continuación). La librería jQuery UI añade un manipulador al elemento seleccionado, lo que le permite cambiar el tamaño vertical y horizontal del elemento, como puede verse en la figura. En la figura, el elemento está representado con una mayor altura y reduce anchura:

Configurando la interacción modificada.

Para configurar la interacción de tamaño variable, se utilizan las propiedades descritas en la siguiente tabla. La interacción cambiante depende de la interacción de Draggable. Esto significa que, además de los ajustes indicados en la tabla, puede utilizar la configuración de interacción se pueden arrastrar, incluyendo aquellos tales como retardo, la distancia, la rejilla y la contención.

Propiedades de la interacción resistible

Propiedad	Descripción
alsoresizando	El selector utiliza para seleccionar elementos cuyas dimensiones deben cambiarse simultáneamente con las dimensiones del elemento al que se aplica la interacción de tamaño variable. El valor predeterminado es falso, significa que la ausencia de tales elementos
aspectratio.	Si el valor de esta opción es verdadero, el cambio en el tamaño del elemento se producirá con la preservación de la proporción de la relación de aspecto. Valor predeterminado - verdadero
auto-escondite.	Si el valor de esta opción es verdadero, entonces los manipuladores se vuelven visibles solo cuando el puntero del mouse se encuentra sobre el elemento. Valor predeterminado - Falso
fantasma.	Si el valor de esta opción es verdadero, cuando cambia el tamaño del elemento, los contornos translúcidos serán visibles, mostrando nuevas dimensiones de elementos. Valor predeterminado - verdadero
manejas.	Determina dónde se ubicarán los manipuladores. Los valores admitidos se dan más adelante.
altura máxima	Determina la altura máxima a la que puede cambiar el tamaño del elemento. El valor predeterminado es nulo, no significa ninguna restricción.
anchura máxima.	Determina el ancho máximo al que puede cambiar el tamaño del elemento. Valor predeterminado - NULL
minheight
minwidth.	Determina la altura mínima a la que puede cambiar el tamaño del elemento.

Cambio simultáneo en el tamaño de otros elementos.

En mi opinión, el más común al configurar la interacción resistible es la opción Alsoria. Con él, puede definir elementos adicionales cuyas dimensiones se cambiarán simultáneamente con las dimensiones del elemento al que se aplicó el método resistible (). Utilizo esta opción principalmente para garantizar un cambio síncrono en el tamaño de los elementos junto con el tamaño de sus elementos principales.

Ya hemos utilizado esta función en el ejemplo anterior, definiendo el cambio simultáneo en el tamaño de los elementos IMG y DIV. En primer lugar, veamos qué sucede si la opción Alsoresize no se usa. El código correspondiente se da en el siguiente ejemplo:

$ (Función () ($ ("# astor"). Resistible ();));

Si la opción de alsoria no se usa, solo se cambian las dimensiones del elemento div. Las dimensiones de los elementos contenidas en él permanecen sin cambios. Lo que sucede se muestra en la Figura:

A veces, es precisamente tal resultado y se requiere que obtenga, pero personalmente utilizo la opción AlsToresize en casi todos los casos de aplicar una interacción modificada. En este parámetro, me gusta el hecho de que la elección de elementos adecuados no se limita a los contenidos de los cuales se cambian las dimensiones. Con esta opción, puede especificar cualquier otro elemento como se muestra en el siguiente ejemplo:

$ (Función () ($ ("# astor"). Resistible ((alsoresize: "img, #lily")););

En este escenario, la selección de artículos se expande para habilitar otros elementos DIV e IMG. Por lo tanto, al cambiar los tamaños de un elemento de DIV JQuery UI cambiará el tamaño de cuatro elementos a la vez. El resultado se muestra en la Figura:

Restricción de los límites permisibles para cambiar el tamaño de los elementos

Puede limitar los límites para cambiar el tamaño de los elementos escalables mediante la aplicación de las opciones MaxHeight, MaxWidth, MinHeight y MinWidth. Los valores de estas opciones pueden ser números que expresan el número de píxeles, o NULL. Un ejemplo de usar estas configuraciones se muestra a continuación.

Anchura () .innerwidth () .OUTERWIDTH ()

Las funciones devuelven el ancho del elemento. Además, usando ANWTH (), puede establecer un nuevo valor de ancho. Hay varias opciones para usar funciones:

ancho () - Anchura del elemento de exclusión de guiones y el espesor del marco.
interno interno () - Ancho del elemento, teniendo en cuenta el tamaño de los sangrías internos (relleno).
outerwidth (IncludeMargin) - El ancho del elemento, teniendo en cuenta los guiones internos, el marco (ancho de borde) y, si es necesario, los sangrías externos (margen).

establece un nuevo valor de ancho igual valorPara todos los artículos seleccionados

establece un nuevo valor del ancho de los elementos igual al valor que devuelve la función del usuario. La función se llama por separado, para cada uno de los elementos seleccionados. Cuando se llama a sí los siguientes parámetros se transmiten: índice. - Posición del elemento en el set, valor - El valor actual del ancho del elemento.

Ejemplos de uso:

$ ("Div.content"). Ancho ()	contenido.
$ (Documento). Ancho ()	devuelve el ancho de la página.
$ (". Contenido"). Ancho (30)	establece el valor de ancho de 30 píxeles a todos los elementos con clase contenido.
$ ("Div.content"). Outerwidth ()	devuelva el ancho del primer elemento div que la clase. contenido. Los sangrías internos y el espesor del marco se incluirán en la altura.
$ ( "Div.content"). OuterWidth (True)	similar al ejemplo anterior, pero el valor de ancho también incluirá sangrías externas.

Nota 1.: Uso de la función.Width () generalmente es más conveniente que .CSS ("Ancho"), ya que el valor de retorno no contiene el final del "PX". Es decir, en el primer caso, obtendrá 30, y en el segundo "30px".

Nota 2.: Es importante tener en cuenta que usando el método.Width (Nombre) recibirá los valores de atributo del primer elemento de todos los seleccionados. Si necesita los valores de todos los artículos, se debe utilizar el diseño del tipo .map () o each ().

En acción

Ejecute el ancho de todos los elementos en la segunda línea por 10 píxeles.

~ Lt ~! DOCTYPE HTML ~ GT ~ LT ~ HTML ~ GT ~ LT ~ Head ~ GT ~ ~ LT ~ Script src \u003d "http://code.jquery.com/jquery-tentest.js" ~ gt ~~ lt ~ / script ~ ~ ~ gt lt ~ ~ estilo gt ~ ul (margen: 10px;) .Item (float: left; Altura: 20px; margen: 1px; padding: 3px; background-color: #eee; list-style -type: ninguno;) ~ lt ~ / estilo ~ gt ~ ~ lt ~ / cabeza ~ gt ~ lt ~ cuerpo ~ gt ~ ~ lt ~ ul id \u003d ~ gt ~ ~ ~ lt li class \u003d estilo "artículo" "Lista" \u003d "width: 60px" ~ gt ~ alta ~ lt ~ / li ~ gt ~ ~ lt ~ class \u003d estilo "artículo IOPE" li \u003d "width: 75px" ~ gt ~ rápido ~ lt ~ / li ~ gt ~ ~ lt ~ clase Li \u003d estilo "artículo" \u003d "width: 90px" ~ gt ~ fuerte ~ lt ~ / li ~ gt ~ ~ lt ~ / ul ~ gt ~ ~ lt ~ br ~ gt ~ ~ lt ~ Identificación ul \u003d "Lista2" ~ GT ~ ~ lt ~ li class \u003d estilo "artículo" \u003d "width: 60px" ~ gt ~ encima de ~ lt ~ / li ~ gt ~ ~ lt ~ li class \u003d estilo "artículo" \u003d "width: 75px" ~ gt ~ Faster ~ LT ~ / Li ~ GT ~ ~ Lt ~ Li class \u003d estilo "artículo" \u003d "width: 90px" ~ gt ~ fuerte ~ lt ~ / li ~ gt ~ ~ lt ~ / ul ~ gt ~ ~ lt ~ escritura ~ GT ~ $ ("# list2 .item"). Ancho (return val + 10;)); ~ lt ~ / script ~ gt ~ ~ lt ~ / body ~ gt ~ ~ lt ~ / html ~ gt ~