jQuery UI-Instanz - Zoom (Resizable)

Zurück: jQuery UI Beispiel - Ort (Dropfähig)

Next: jQuery UI Beispiel - select (wählbar)

Verwenden Sie die Maus, um die Größe des Elements zu ändern.

Weitere Details über die veränderbare Interaktion, die API - Dokumentation veränderbare Widgets (die Resizable das Widget) .

Die Standardfunktion

Aktivieren der Größe veränderbar Funktion auf jedem DOM-Element. Ziehen Sie die Maus nach rechts oder unteren Rand auf die gewünschte Breite oder Höhe.

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Skalierung (Resizable) - Die Standardfunktion </ 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;}
  #resizable h3 {text-align: center; margin: 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ();
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "resizable" class = "ui-Widget-content">
  <H3 class = "ui-Widget-header"> Zoom (Resizable) </ h3>
</ Div>
 
 
</ Body>
</ Html>

Animation

Verwenden animate Option (Boolean) ermöglicht das Verhalten der Animation Skalierung. Wenn diese Option auf true gesetzt ist, der Umriss ziehen, um die gewünschte Position, ziehen zu stoppen, wenn die Elemente animiert werden, um die Größe anzupassen.

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Skalierung (Resizable) - 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;}
  #resizable h3 {text-align: center; margin: 0;}
  .ui-resizable-Helfer {border: 1px gepunkteten grau;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      animieren: true
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "resizable" class = "ui-Widget-content">
  <H3 class = "ui-Widget-header"> Animation </ h3>
</ Div>
 
 
</ Body>
</ Html>

Begrenzen Sie den Zoombereich

Definierte Skalierungsgrenzen. Verwenden Sie containment ein Elternteil DOM - Element oder einen jQuery - Selektor, wie angeben "Dokument"..

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Skalierung (Resizable) - Begrenzung der Zoombereich </ 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: oben links; width: 150px; height: 150px;}
  #resizable, #container {padding: 0.5em;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      Haltung: "#container"
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "container" class = "ui-Widget-content">
  <H3 class = "ui-Widget-header"> Grenze </ h3>
  <Div id = "resizable" class = "ui-state-aktiv">
    <H3 class = "ui-Widget-header"> Zoom (Resizable) </ h3>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Verzögerter Start

Durch die delay Verzögerung Millisekunden beginnen Skalierung Option. Mit distance Option wird der Cursor auf das angegebene Pixel gedrückt und ziehen Sie vor Skalierung ermöglicht.

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Skalierung (Resizable) - verzögerten Start </ 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;}
  #resizable h3, # resizable2 h3 {text-align: center; margin: 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      Verzögerung: 1000
    });
 
    $ ( "# Resizable2") .resizable ({
      Entfernung: 40
    });
  });
  </ Script>
</ Head>
<Body>
 
<H3 class = "docs"> Zeitverzögerung (ms): </ h3>
<Div id = "resizable" class = "ui-Widget-content">
  <H3 class = "ui-Widget-header"> Zeit </ h3>
</ Div>
 
<H3 class = "docs"> Entfernung Verzögerung (px): </ h3>
<Div id = "resizable2" class = "ui-Widget-content">
  <H3 class = "ui-Widget-header"> Abstand </ h3>
</ Div>
 
 
</ Body>
</ Html>

Assistent

Durch die Einstellung der helper auf eine CSS - Klasse Option, wenn nur die Konturelemente angezeigt werden gezoomt.

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Skalierung (Resizable) - Assistent </ 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;}
  #resizable h3 {text-align: center; margin: 0;}
  .ui-resizable-Helfer {border: 2px gepunkteten # 00F;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      Helfer: "ui-resizable-Helfer"
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "resizable" class = "ui-Widget-content">
  <H3 class = "ui-Widget-header"> Assistent </ h3>
</ Div>
 
 
</ Body>
</ Html>

Maximum / Minimum Größe

Verwenden Sie maxHeight , maxWidth , minHeight und minWidth Option begrenzt die maximalen oder minimalen Element veränderbare Höhe oder Breite.

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Skalierung (Resizable) - Maximal / Minimalgröße </ 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;}
  #resizable h3 {text-align: center; margin: 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      maxHeight: 250,
      maxWidth: 350,
      minHeight: 150,
      minWidth: 200
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "resizable" class = "ui-Widget-content">
  <H3 class = "ui-Widget-header"> Zoom In / Out </ h3>
</ Div>
 
 
</ Body>
</ Html>

Seitenverhältnis beibehalten

Pflegen Sie die aktuelle Seitenverhältnis oder einen neuen Grenzwert auf das Seitenverhältnis Skalierung. Einstellung aspectRatio Option wahr ist , und gegebenenfalls eine neue Rate liefern (zum Beispiel 4/3).

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Skalierung (Resizable) - Seitenverhältnis beibehalten </ 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;}
  #resizable h3 {text-align: center; margin: 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      aspectratio: 16/9
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "resizable" class = "ui-Widget-content">
  <H3 class = "ui-Widget-header"> Seitenverhältnis beibehalten </ h3>
</ Div>
 
 
</ Body>
</ Html>

Am Raster ausrichten

Resizable Elemente am Raster ausgerichtet. Durch die grid Option können Sie die Gitterzellen (Pixel Höhe und Breite).

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Skalierung (Resizable) - Am Raster ausrichten </ 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;}
  #resizable h3 {text-align: center; margin: 0;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      Gitter: 50
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "resizable" class = "ui-Widget-content">
  <H3 class = "ui-Widget-header"> Grid </ h3>
</ Div>
 
 
</ Body>
</ Html>

Synchrone Zoom

Durch Klicken und Ziehen ein Element der Kante mehrere Elemente gleichzeitig zu ändern. Um alsoResize Optionen übergeben einen gemeinsamen Selektor.

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Skalierung (Resizable) - 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;}
  #resizable h3, #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 = "resizable" class = "ui-Widget-header">
  <H3 class = "ui-state-aktiv"> Zoom </ h3>
</ Div>
 
<Div id = "auch" class = "ui-Widget-content">
  <H3 class = "ui-Widget-header"> Zoom Sync </ h3>
</ Div>
 
 
</ Body>
</ Html>

Textfeld

Skalierbare Textfeld ein.

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Skalierung (Resizable) - 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-resizable-se {
    bottom: 17px;
  }
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      Griffe: "se"
    });
  });
  </ Script>
</ Head>
<Body>
 
<Textarea id = "resizable" rows = "5" cols = "20"> </ textarea>
 
 
</ Body>
</ Html>

visuelles Feedback

Durch Einstellen des ghost Option wahr ist, kann das Element während des Zoomens, anstelle des Anzeigens eines tatsächlichen Elementes in einem durchscheinenden angezeigt.

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Skalierung (Resizable) - visuelles Feedback </ 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;}
  #resizable h3 {text-align: center; margin: 0;}
  .ui-resizable-ghost {border: 1px gepunkteten grau;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#resizable") .resizable ({
      Geist: true
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div id = "resizable" class = "ui-Widget-content">
  <H3 class = "ui-Widget-header"> Ghost </ h3>
</ Div>
 
 
</ Body>
</ Html>