O melhor tutorial instância jQuery UI - Zoom (redimensionável) em 2024. Neste tutorial você pode aprender A função padrão,animação,Limitar a área de zoom,início retardado,assistente,tamanho máximo / mínimo,Manter proporção,Alinhar à grade,Synchronous Zoom,Caixa de texto,feedback visual,
Com o rato para alterar o tamanho do elemento.
Para mais detalhes sobre a interação redimensionável, consulte a documentação da API de widgets redimensionáveis (a redimensionáveis o Widget) .
Habilitar a função redimensionável em qualquer elemento DOM. Arraste o mouse para a direita ou borda inferior à largura ou altura desejada.
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> escalonamento jQuery UI (redimensionável) - A função padrão </ 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; height: 150px; padding: 0.5em;} h3 #resizable {text-align: center; margin: 0;} </ Style> <Script> $ (Function () { $ ( "#resizable") .resizable (); }); </ Script> </ Head> <Body> <Div id = "redimensionável" class = "ui-widget-content"> <H3 class = "ui-widget-header"> Zoom (redimensionável) </ h3> </ Div> </ Body> </ Html>
Use animate
opção (Boolean) permite comportamento da animação de escala. Quando esta opção é definida como true, o contorno arraste para o local desejado, parar de arrastar quando os elementos são animados para ajustar o tamanho.
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> escalonamento jQuery UI (redimensionável) - 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; height: 150px; padding: 0.5em;} h3 #resizable {text-align: center; margin: 0;} .ui-redimensionável-helper {border: 1px cinza pontilhada;} </ Style> <Script> $ (Function () { $ ( "#resizable") .resizable ({ animar: true }); }); </ Script> </ Head> <Body> <Div id = "redimensionável" class = "ui-widget-content"> <H3 class = "ui-widget-header"> Animation </ h3> </ Div> </ Body> </ Html>
limites de escala definida. Use containment
opção para especificar um pai elemento DOM ou um seletor jQuery, como "documento. '.
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> jQuery UI escalonamento (redimensionável) - limitar a área 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; height: 300px;} h3 #container {text-align: center; margin: 0; margin-bottom: 10px;} #resizable {background-position: top left; width: 150px; height: 150px;} #resizable, #container {padding: 0.5em;} </ Style> <Script> $ (Function () { $ ( "#resizable") .resizable ({ contenção: "#container" }); }); </ Script> </ Head> <Body> <Div id = "container" class = "ui-widget-content"> <H3 class = "ui-widget-header"> limit </ h3> <Div id = "redimensionável" class = "-ui-estado ativo"> <H3 class = "ui-widget-header"> Zoom (redimensionável) </ h3> </ Div> </ Div> </ Body> </ Html>
Por delay
milissegundos de atraso começam opção de escala. Por distance
opção é pressionado e arraste o cursor para o pixel especificado antes de permitir o escalonamento.
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> escalonamento jQuery UI (redimensionável) - início retardado </ 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; height: 150px; padding: 0.5em;} h3 #resizable, # resizable2 h3 {text-align: center; margin: 0;} </ Style> <Script> $ (Function () { $ ( "#resizable") .resizable ({ delay: 1000 }); $ ( "# Resizable2") .resizable ({ distância: 40 }); }); </ Script> </ Head> <Body> <h3 class = "docs"> tempo de espera (MS): </ h3> <Div id = "redimensionável" class = "ui-widget-content"> <H3 class = "ui-widget-header"> Tempo </ h3> </ Div> <H3 class = "docs"> atraso distância (px): </ h3> <Div id = "resizable2" class = "ui-widget-content"> <H3 class = "ui-widget-header"> distância </ h3> </ Div> </ Body> </ Html>
Ao definir o helper
opção para uma classe CSS, quando ampliada para exibir apenas os elementos de contorno.
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> jQuery UI escalonamento (redimensionável) - assistente </ 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; height: 150px; padding: 0.5em;} h3 #resizable {text-align: center; margin: 0;} .ui-redimensionável-helper {border: 2px pontilhada # 00F;} </ Style> <Script> $ (Function () { $ ( "#resizable") .resizable ({ helper: "ui-redimensionável-helper" }); }); </ Script> </ Head> <Body> <Div id = "redimensionável" class = "ui-widget-content"> <H3 class = "ui-widget-header"> Assistente </ h3> </ Div> </ Body> </ Html>
Use maxHeight
, maxWidth
, minHeight
e minWidth
opção limita o elemento máximo ou mínimo a altura ou a largura redimensionável.
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> jQuery UI escalonamento (redimensionável) - Máximo / tamanho 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; height: 150px; padding: 5px;} h3 #resizable {text-align: center; margin: 0;} </ Style> <Script> $ (Function () { $ ( "#resizable") .resizable ({ maxHeight: 250, maxWidth: 350, minHeight: 150, minWidth: 200 }); }); </ Script> </ Head> <Body> <Div id = "redimensionável" class = "ui-widget-content"> <H3 class = "ui-widget-header"> Zoom In / Out </ h3> </ Div> </ Body> </ Html>
Manter a proporção atual ou definir um novo limite para o dimensionamento relação de aspecto. Definir aspectRatio
opção é verdadeira, e, opcionalmente, entregar uma nova taxa (por exemplo, 4/3).
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> escalonamento jQuery UI (redimensionável) - Manter proporção </ 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; height: 90px; padding: 0.5em;} h3 #resizable {text-align: center; margin: 0;} </ Style> <Script> $ (Function () { $ ( "#resizable") .resizable ({ aspectRatio: 16/9 }); }); </ Script> </ Head> <Body> <Div id = "redimensionável" class = "ui-widget-content"> <H3 class = "ui-widget-header"> Manter proporção </ h3> </ Div> </ Body> </ Html>
elementos redimensionáveis alinhados com a grelha. Por grid
opção de tamanho para definir as células da grade (pixels de altura e largura).
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> escalonamento jQuery UI (redimensionável) - Encaixar na grade </ 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; height: 150px; padding: 0.5em;} h3 #resizable {text-align: center; margin: 0;} </ Style> <Script> $ (Function () { $ ( "#resizable") .resizable ({ grade: 50 }); }); </ Script> </ Head> <Body> <Div id = "redimensionável" class = "ui-widget-content"> <H3 class = "ui-widget-header"> Grade </ h3> </ Div> </ Body> </ Html>
Clicando e arrastando um elemento de borda para redimensionar vários elementos simultaneamente. Para alsoResize
opções passou um seletor compartilhada.
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> jQuery UI escalonamento (redimensionável) - 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: top left;} #resizable, #also {width: 150px; height: 120px; padding: 0.5em;} h3 #resizable, #also h3 {text-align: center; margin: 0;} #also {margin-top: 1em;} </ Style> <Script> $ (Function () { $ ( "#resizable") .resizable ({ alsoResize: "#also" }); $ ( "#also") .resizable (); }); </ Script> </ Head> <Body> <Div id = "redimensionável" class = "ui-widget-header"> <H3 class = "ui-state-ativo"> Zoom </ h3> </ Div> <Div id = "também" class = "ui-widget-content"> <H3 class = "ui-widget-header"> Zoom sync </ h3> </ Div> </ Body> </ Html>
caixa de texto escalável.
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> jQuery UI escalonamento (redimensionável) - 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-redimensionável-se { bottom: 17px; } </ Style> <Script> $ (Function () { $ ( "#resizable") .resizable ({ lida: "se" }); }); </ Script> </ Head> <Body> <Textarea id = linhas "redimensionáveis" = "5" cols = "20"> </ textarea> </ Body> </ Html>
Ao definir o ghost
opção é verdade, o elemento pode ser exibido em um translúcido durante a ampliação, em vez de exibir um elemento real.
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> escalonamento jQuery UI (redimensionável) - feedback 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; height: 150px; padding: 0.5em;} h3 #resizable {text-align: center; margin: 0;} .ui-redimensionável-fantasma {border: 1px cinza pontilhada;} </ Style> <Script> $ (Function () { $ ( "#resizable") .resizable ({ fantasma: true }); }); </ Script> </ Head> <Body> <Div id = "redimensionável" class = "ui-widget-content"> <H3 class = "ui-widget-header"> Ghost </ h3> </ Div> </ Body> </ Html>