instância jQuery UI - Zoom (redimensionável)
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) .
A função padrão
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>
animação
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>
Limitar a área de zoom
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>
início retardado
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>
assistente
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>
tamanho máximo / mínimo
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 proporção
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>
Alinhar à grade
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>
Synchronous Zoom
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
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>
feedback visual
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>