par exemple jQuery UI - Zoom (redimensionnable)
Utilisez la souris pour changer la taille de l'élément.
Pour plus de détails sur l'interaction redimensionnable, consultez la documentation API widgets redimensionnables (le redimensionnables le Widget) .
La fonction par défaut
Activer la fonction redimensionnable sur un élément DOM. Faites glisser la souris vers la droite ou la bordure inférieure à la largeur ou la hauteur désirée.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI mise à l'échelle (redimensionnable) - La fonction par défaut </ 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 = classe "redimensionnable" = "ui-widget-content">
<Classe H3 = "ui-widget-tête"> Zoom (redimensionnable) </ h3>
</ Div>
</ Body>
</ Html>
animation
Utilisez animate l' option (Boolean) permet l' extension comportement de l'animation. Lorsque cette option est définie sur true, le contour glisser à l'endroit désiré, arrêtez le déplacement lorsque les éléments sont animés pour ajuster la taille.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI mise à l'échelle (redimensionnable) - 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-redimensionnable-helper {border: gris pointillé 1px;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
animer: true
});
});
</ Script>
</ Head>
<Body>
<Div id = classe "redimensionnable" = "ui-widget-content">
<Classe H3 = "ui-widget-tête"> Animation </ h3>
</ Div>
</ Body>
</ Html>
Limitez la zone de zoom
Défini les limites de mise à l'échelle. Utilisez containment option pour spécifier un élément DOM parent ou un sélecteur jQuery, comme «document.».
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI mise à l'échelle (redimensionnable) - limiter la zone 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;}
#container h3 {text-align: center; margin: 0; margin-bottom: 10px;}
#resizable {background-position: en haut à gauche; largeur: 150px; height: 150px;}
#resizable, #container {padding: 0.5em;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
confinement: "#container"
});
});
</ Script>
</ Head>
<Body>
<Div id = "container" class = "ui-widget-content">
<Classe H3 = "ui-widget-tête"> limite </ h3>
<Div id = classe "redimensionnable" = "ui-state-active">
<Classe H3 = "ui-widget-tête"> Zoom (redimensionnable) </ h3>
</ Div>
</ Div>
</ Body>
</ Html>
départ différé
En delay de retard millisecondes commencent option de mise à l' échelle. Par la distance option est enfoncé et faites glisser le curseur sur le pixel spécifié avant d' autoriser l' entartrage.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI mise à l'échelle (redimensionnable) - départ différé </ 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 ({
délai: 1000
});
$ ( "# Resizable2") .resizable ({
distance: 40
});
});
</ Script>
</ Head>
<Body>
<h3 class = "docs"> Temps de retard (ms): </ h3>
<Div id = classe "redimensionnable" = "ui-widget-content">
<Classe H3 = "ui-widget-tête"> Time </ h3>
</ Div>
<Classe H3 = "docs"> retard de distance (px): </ h3>
<Div id = "resizable2" class = "ui-widget-content">
<Classe H3 = "ui-widget-tête"> distance </ h3>
</ Div>
</ Body>
</ Html>
assistant
En réglant l' helper option pour une classe CSS, en zoom pour afficher uniquement les éléments de contour.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI mise à l'échelle (redimensionnable) - assistant </ 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-redimensionnable-helper {border: 2px pointillés # 00F;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
helper: "ui-redimensionnable-helper"
});
});
</ Script>
</ Head>
<Body>
<Div id = classe "redimensionnable" = "ui-widget-content">
<Classe H3 = "ui-widget-tête"> adjoint </ h3>
</ Div>
</ Body>
</ Html>
Taille maximale / minimale
Utilisez maxHeight , maxWidth , minHeight et minWidth option limite l'élément maximum ou minimum hauteur ou la largeur redimensionnable.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI mise à l'échelle (redimensionnable) - / taille minimale maximale </ 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 = classe "redimensionnable" = "ui-widget-content">
<Classe H3 = "ui-widget-tête"> Zoom In / Out </ h3>
</ Div>
</ Body>
</ Html>
Conserver les proportions
Maintenir le ratio d'aspect actuel ou définir une nouvelle limite au rapport d'aspect mise à l'échelle. Réglage aspectRatio option est vrai, et éventuellement délivrer un nouveau taux (par exemple, 4/3).
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI mise à l'échelle (redimensionnable) - Conserver les proportions </ 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; hauteur: 90px; padding: 0.5em;}
h3 #resizable {text-align: center; margin: 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
aspectRatio: 16/9
});
});
</ Script>
</ Head>
<Body>
<Div id = classe "redimensionnable" = "ui-widget-content">
<Classe H3 = "ui-widget-tête"> Maintenir rapport d'aspect </ h3>
</ Div>
</ Body>
</ Html>
Aligner sur la grille
éléments redimensionnables alignés sur la grille. Par grid option de taille pour définir les cellules de la grille (pixels de hauteur et largeur).
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI mise à l'échelle (redimensionnable) - Aligner sur la grille </ 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 ({
grille: 50
});
});
</ Script>
</ Head>
<Body>
<Div id = classe "redimensionnable" = "ui-widget-content">
<Classe H3 = "ui-widget-tête"> Grille </ h3>
</ Div>
</ Body>
</ Html>
synchrone Zoom
En cliquant et en faisant glisser un élément de bord pour redimensionner plusieurs éléments simultanément. To alsoResize options passées un sélecteur partagé.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI mise à l'échelle (redimensionnable) - 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: en haut à gauche;}
#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 = classe "redimensionnable" = "ui-widget-tête">
<Classe H3 = "state-ui-active"> Zoom </ h3>
</ Div>
<Div id = "également" class = "ui-widget-content">
<Classe H3 = "ui-widget-tête"> Zoom sync </ h3>
</ Div>
</ Body>
</ Html>
Text Box
Scalable zone de texte.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI mise à l'échelle (redimensionnable) - 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-redimensionnable-soi {
bottom: 17px;
}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
poignées: "se"
});
});
</ Script>
</ Head>
<Body>
<Textarea id = "lignes redimensionnables" = "5" cols = "20"> </ textarea>
</ Body>
</ Html>
La rétroaction visuelle
En réglant le ghost option est vrai, l'élément peut être affiché dans une translucide pendant le zoom, au lieu d'afficher un élément réel.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI mise à l'échelle (redimensionnable) - rétroaction visuelle </ 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-redimensionnable-ghost {border: gris pointillé 1px;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
ghost: true
});
});
</ Script>
</ Head>
<Body>
<Div id = classe "redimensionnable" = "ui-widget-content">
<Classe H3 = "ui-widget-tête"> Ghost </ h3>
</ Div>
</ Body>
</ Html>