Instancja jQuery UI - zoom (Resizable)
Użyj myszki, aby zmienić rozmiar elementu.
Aby uzyskać więcej informacji na temat resizable interakcji można znaleźć w dokumentacji API skalowalne widżety (the Resizable Widget) .
Domyślną funkcją
Włącz resizable funkcji na dowolnym elemencie DOM. Przeciągnij myszą w prawo lub w dolnej granicy do żądanej szerokości lub wysokości.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI skalowanie (Resizable) - Domyślna funkcja </ 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 = "skalowalne" class = "ui-widget-content">
<H3 class = "ui-widget-header"> zoom (Resizable) </ h3>
</ Div>
</ Body>
</ Html>
ożywienie
Korzystanie animate opcja (Boolean) umożliwia skalowanie zachowanie animacji. Gdy ta opcja jest ustawiona na wartość true, przeciągnij Zarys do żądanej lokalizacji, przystanek przeciągając gdy elementy są animowane, aby dostosować rozmiar.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI skalowanie (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-skalowalny pomocniczych {border: 1px przerywaną szarości;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
animowanie: true
});
});
</ Script>
</ Head>
<Body>
<Div id = "skalowalne" class = "ui-widget-content">
<H3 class = "ui-widget-header"> animacji </ h3>
</ Div>
</ Body>
</ Html>
Ograniczyć obszar powiększenia
Zdefiniowane granice skalowania. Użyj containment możliwość określenia nadrzędnego DOM element lub selektor jQuery, takich jak "dokumentu"..
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> Skalowanie jQuery UI (Resizable) - ograniczają obszar powiększenia </ 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: top left; width: 150px; height: 150px;}
#resizable, #container {padding: 0.5em;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
powstrzymywanie: "#container"
});
});
</ Script>
</ Head>
<Body>
<Div id = "container" class = "ui-widget-content">
<H3 class = "ui-widget-header"> Limit </ h3>
<Div id = "skalowalne" class = "ui-state-aktywny">
<H3 class = "ui-widget-header"> zoom (Resizable) </ h3>
</ Div>
</ Div>
</ Body>
</ Html>
Opóźnienie startu
Przez delay milisekund opóźnienia zaczynają opcję skalowania. Przez distance opcją jest wciśnięty, a następnie przeciągnij kursor do określonego piksela przed zezwoleniem skalowania.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI skalowanie (Resizable) - opóźniony 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 ({
Opóźnienie: 1000
});
$ ( "# Resizable2") .resizable ({
odległość: 40
});
});
</ Script>
</ Head>
<Body>
<h3 class = "Docs"> opóźnienie czasowe (MS): </ h3>
<Div id = "skalowalne" class = "ui-widget-content">
<H3 class = "ui-widget-header"> czas </ h3>
</ Div>
<H3 class = ""> docs opóźnienia odległość (px): </ h3>
<Div id = "resizable2" class = "ui-widget-content">
<H3 class = "ui-widget-header"> odległość </ h3>
</ Div>
</ Body>
</ Html>
asystent
Poprzez ustawienie helper opcję klasy CSS, po powiększeniu, aby wyświetlić tylko te elementy konturu.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI skalowanie (Resizable) - asystent </ 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-skalowalny pomocniczych {border: 2px przerywana # 00F;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
pomocnika "ui-skalowalny pomocniczych"
});
});
</ Script>
</ Head>
<Body>
<Div id = "skalowalne" class = "ui-widget-content">
<H3 class = "ui-widget-header"> asystent </ h3>
</ Div>
</ Body>
</ Html>
Maksymalna / minimalna wielkość
Użyj maxHeight , maxWidth , minHeight i minWidth opcja ogranicza maksymalną lub minimalną wysokość elementu zmienny rozmiar lub szerokość.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI skalowanie (Resizable) - Maksymalna / minimalna wielkość </ 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 = "skalowalne" class = "ui-widget-content">
<H3 class = "ui-widget-header"> Zoom In / Out </ h3>
</ Div>
</ Body>
</ Html>
Zachowaj proporcje
Utrzymanie bieżące proporcje lub ustawić nowy limit na skalowanie proporcji. Ustawianie aspectRatio opcja jest prawdziwa, i ewentualnie dostarczyć nowy kurs (na przykład 4/3).
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI skalowanie (Resizable) - Zachowaj proporcje </ 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 = "skalowalne" class = "ui-widget-content">
<H3 class = "ui-widget-header"> Zachowaj proporcje </ h3>
</ Div>
</ Body>
</ Html>
Przyciągaj do siatki
Elementy Resizable wyrównane do siatki. Przez grid opcji, aby ustawić rozmiar komórki siatki pikseli (wysokość i szerokość).
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI skalowanie (Resizable) - Przyciągaj do siatki </ 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 ({
Siatka: 50
});
});
</ Script>
</ Head>
<Body>
<Div id = "skalowalne" class = "ui-widget-content">
<H3 class = "ui-widget-header"> Siatka </ h3>
</ Div>
</ Body>
</ Html>
synchroniczne zoom
Klikając i przeciągając element krawędzi do rozmiaru wielu elementów jednocześnie. Do alsoResize opcje przekazywane wspólny selektor.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI skalowanie (Resizable) - synchroniczna 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: 120 pikseli; padding: 0.5em;}
#resizable h3, #also h3 {text-align: center; margin: 0;}
#also {margin-top: 1 em;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
alsoResize: "#also"
});
$ ( "#also") .resizable ();
});
</ Script>
</ Head>
<Body>
<Div id = "skalowalne" class = "ui-widget-header">
<H3 class = "ui-state-aktywny"> Powiększenie </ h3>
</ Div>
<Div id = "również" class = "ui-widget-content">
<H3 class = "ui-widget-header"> Powiększenie sync </ h3>
</ Div>
</ Body>
</ Html>
Pole tekstowe
Pole tekstowe skalowalne.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> Skalowanie jQuery UI (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-skalowalny-se {
bottom: 17px;
}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
uchwyty: "se"
});
});
</ Script>
</ Head>
<Body>
<Textarea id = "resizable" rows = "5" cols = "20"> </ textarea>
</ Body>
</ Html>
wizualnej
Poprzez ustawienie ghost opcji jest prawdą, że element może być wyświetlany w przezroczyste podczas powiększania, zamiast wyświetlać rzeczywisty element.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI skalowanie (Resizable) - wizualne sprzężenie </ 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-skalowalny-duch {border: 1px przerywaną szarości;}
</ Style>
<Script>
$ (Function () {
$ ( "#resizable") .resizable ({
Duch: true
});
});
</ Script>
</ Head>
<Body>
<Div id = "skalowalne" class = "ui-widget-content">
<H3 class = "ui-widget-header"> Duch </ h3>
</ Div>
</ Body>
</ Html>