esempio jQuery UI - Zoom (ridimensionabile)
Usa il mouse per modificare le dimensioni dell'elemento.
Per maggiori dettagli su l'interazione ridimensionabile, consultare la documentazione API widget ridimensionabili (il ridimensionabili il Widget) .
La funzione di default
Abilitare la funzione ridimensionabile su qualsiasi elemento DOM. Trascinare il mouse a destra oa bordo inferiore alla larghezza o l'altezza desiderata.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> ridimensionamento jQuery UI (ridimensionabile) - La funzione di default </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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 = "ridimensionabile" class = "ui-widget di-content">
<H3 class = "ui-widget di-header"> Zoom (ridimensionabile) </ h3>
</ Div>
</ Corpo>
</ Html>
animazione
Usa animate opzione (booleano) consente di scalare il comportamento dell'animazione. Quando questa opzione è impostata su true, la resistenza contorno nella posizione desiderata, interrompere il trascinamento quando gli elementi sono animati per regolare le dimensioni.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> ridimensionamento jQuery UI (ridimensionabile) - Anime </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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-ridimensionabile-helper {border: 1px grigio punteggiato;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
animare: true
});
});
</ Script>
</ Head>
<Body>
<Div id = "ridimensionabile" class = "ui-widget di-content">
<H3 class = "ui-widget di-header"> Animazione </ h3>
</ Div>
</ Corpo>
</ Html>
Limitare l'area di zoom
confini di scala definiti. Utilizzare containment opzione per specificare un genitore elemento DOM o un selettore jQuery, come 'documento.'.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> ridimensionamento jQuery UI (ridimensionabile) - limitare l'area di zoom </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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;}
#container h3 {text-align: center; margin: 0; margin-bottom: 10px;}
#resizable {background-position: in alto a sinistra; width: 150px; height: 150px;}
#resizable, #container {padding: 0.5em;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
contenimento: "#container"
});
});
</ Script>
</ Head>
<Body>
<Div id = "contenitore" class = "ui-widget di-content">
<H3 class = "ui-widget di-header"> Limite </ h3>
<Div id = "ridimensionabile" class = "ui-stato-attivo">
<H3 class = "ui-widget di-header"> Zoom (ridimensionabile) </ h3>
</ Div>
</ Div>
</ Corpo>
</ Html>
partenza ritardata
Con delay millisecondi di ritardo cominciano opzione di scala. Con distance opzione viene premuto e trascinare il cursore al pixel specificato prima di consentire il ridimensionamento.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> ridimensionamento jQuery UI (ridimensionabile) - partenza ritardata </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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 ({
Ritardo: 1000
});
$ ( "# Resizable2") .resizable ({
distanza: 40
});
});
</ Script>
</ Head>
<Body>
<h3 class = "doc"> ritardo (ms): </ h3>
<Div id = "ridimensionabile" class = "ui-widget di-content">
<H3 class = "ui-widget di-header"> Ora </ h3>
</ Div>
<H3 class = "doc"> ritardo distanza (px): </ h3>
<Div id = "resizable2" class = "ui-widget di-content">
<H3 class = "ui-widget di-header"> distanza </ h3>
</ Div>
</ Corpo>
</ Html>
assistente
Impostando l' helper opzione per una classe CSS, quando ingrandita per visualizzare solo gli elementi del profilo.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> ridimensionamento jQuery UI (ridimensionabile) - assistente </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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-ridimensionabile-helper {border: 2px punteggiato # 00F;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
aiutante: "ui-ridimensionabile-helper"
});
});
</ Script>
</ Head>
<Body>
<Div id = "ridimensionabile" class = "ui-widget di-content">
<H3 class = "ui-widget di-header"> Assistente </ h3>
</ Div>
</ Corpo>
</ Html>
Dimensione massima / minima
Utilizzare maxHeight , maxWidth , minHeight e minWidth opzione limita l'elemento di massima o minima altezza o larghezza ridimensionabile.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> ridimensionamento jQuery UI (ridimensionabile) - Massima / dimensione minima </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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 = "ridimensionabile" class = "ui-widget di-content">
<H3 class = "ui-widget di-header"> Zoom In / Out </ h3>
</ Div>
</ Corpo>
</ Html>
Mantieni proporzioni
Mantenere il rapporto di aspetto attuale o fissare un nuovo termine per la scala proporzioni. Impostazione aspectRatio opzione è vero, ed eventualmente fornire un nuovo tasso (ad esempio, 4/3).
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> ridimensionamento jQuery UI (ridimensionabile) - Mantieni proporzioni </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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 = "ridimensionabile" class = "ui-widget di-content">
<H3 class = "ui-widget di-header"> Mantieni proporzioni </ h3>
</ Div>
</ Corpo>
</ Html>
Aggancia alla griglia
Elementi ridimensionabili allineati alla griglia. Con grid opzione per impostare le dimensioni delle celle della griglia (pixel altezza e larghezza).
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> ridimensionamento jQuery UI (ridimensionabile) - Aggancia alla griglia </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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 ({
griglia: 50
});
});
</ Script>
</ Head>
<Body>
<Div id = "ridimensionabile" class = "ui-widget di-content">
<H3 class = "ui-widget di-header"> Griglia </ h3>
</ Div>
</ Corpo>
</ Html>
sincrono Zoom
Cliccando e trascinando un elemento di bordo per ridimensionare più elementi contemporaneamente. A alsoResize opzioni passate un selettore condiviso.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> ridimensionamento jQuery UI (ridimensionabile) - sincrono Zoom </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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 = "ridimensionabile" class = "ui-widget di-header">
<H3 class = "ui-stato-attivo"> Zoom </ h3>
</ Div>
<Div id = "anche" class = "ui-widget di-content">
<H3 class = "ui-widget di-header"> Zoom sincronizzazione </ h3>
</ Div>
</ Corpo>
</ Html>
Casella di testo
casella di testo scalabile.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> ridimensionamento jQuery UI (ridimensionabile) - Box </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-ridimensionabile-se {
bottom: 17px;
}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
maniglie: "se"
});
});
</ Script>
</ Head>
<Body>
<Textarea id = righe "ridimensionabili" = "5" cols = "20"> </ textarea>
</ Corpo>
</ Html>
feedback visivo
Impostando il ghost opzione è vero, l'elemento può essere visualizzato in un traslucido durante lo zoom, invece di visualizzare un elemento reale.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> ridimensionamento jQuery UI (ridimensionabile) - feedback visivo </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // 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-ridimensionabile-fantasma {border: 1px grigio punteggiato;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
fantasma: true
});
});
</ Script>
</ Head>
<Body>
<Div id = "ridimensionabile" class = "ui-widget di-content">
<H3 class = "ui-widget di-header"> Ghost </ h3>
</ Div>
</ Corpo>
</ Html>