Najlepszy samouczek Instancja jQuery UI - zoom (Resizable) W 2024 r. W tym samouczku możesz dowiedzieć się Domyślną funkcją,ożywienie,Ograniczyć obszar powiększenia,Opóźnienie startu,asystent,Maksymalna / minimalna wielkość,Zachowaj proporcje,Przyciągaj do siatki,synchroniczne zoom,Pole tekstowe,wizualnej,
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) .
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>
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>
Zdefiniowane granice skalowania. Użyj containment
możliwość określenia nadrzędnego DOM element lub selektor jQuery, takich jak "dokumentu"pl
<! 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>
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>
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>
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>
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>
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>
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 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>
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>