Tutorial jQuery UI misalnya - Zoom (Resizable) Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari Fungsi standar,animasi,Membatasi area zoom,mulai tertunda,asisten,Maksimum / ukuran minimum,Mempertahankan aspek rasio,Snap ke Grid,sinkron Zoom,text Box,umpan balik visual,
Menggunakan mouse untuk mengubah ukuran elemen.
Untuk rincian lebih lanjut tentang interaksi resizable, lihat dokumentasi API widget resizable (yang Resizable Widget) .
Mengaktifkan fungsi resizable pada setiap elemen DOM. Tarik mouse ke kanan atau batas bawah dengan lebar yang diinginkan atau tinggi.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> skala jQuery UI (Resizable) - Fungsi standar </ 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"> <Gaya> #resizable {width: 150px; height: 150px; padding: 0.5em;} h3 #resizable {text-align: center; margin: 0;} </ Style> <Script> $ (Fungsi () { $ ( "#resizable") .resizable (); }); </ Script> </ Kepala> <Body> <Div id = "resizable" class = "ui-widget-content"> <Class H3 = "ui-widget-header"> Zoom (Resizable) </ h3> </ Div> </ Body> </ Html>
Gunakan animate
pilihan (Boolean) memungkinkan skala perilaku animasi. Bila opsi ini diatur ke benar, garis tarik ke lokasi yang diinginkan, berhenti menyeret ketika unsur-unsur animasi untuk menyesuaikan ukuran.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> skala jQuery UI (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"> <Gaya> #resizable {width: 150px; height: 150px; padding: 0.5em;} h3 #resizable {text-align: center; margin: 0;} Ui-resizable-helper {border: abu-abu putus-putus 1px;} </ Style> <Script> $ (Fungsi () { $ ( "#resizable") .resizable ({ bernyawa: true }); }); </ Script> </ Kepala> <Body> <Div id = "resizable" class = "ui-widget-content"> <Class H3 = "ui-widget-header"> Animasi </ h3> </ Div> </ Body> </ Html>
Didefinisikan batas scaling. Gunakan containment
pilihan untuk menentukan orangtua DOM elemen atau pemilih jQuery, seperti 'dokumen.'.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> skala jQuery UI (Resizable) - membatasi wilayah 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"> <Gaya> #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> $ (Fungsi () { $ ( "#resizable") .resizable ({ containment: "#container" }); }); </ Script> </ Kepala> <Body> <Div id = "container" class = "ui-widget-content"> <Class H3 = "ui-widget-header"> batas </ h3> <Div id = "resizable" class = "ui-negara-aktif"> <Class H3 = "ui-widget-header"> Zoom (Resizable) </ h3> </ Div> </ Div> </ Body> </ Html>
Dengan delay
delay milidetik mulai opsi scaling. Dengan distance
opsi ditekan dan tarik kursor ke pixel ditentukan sebelum mengizinkan scaling.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> skala jQuery UI (Resizable) - tertunda 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"> <Gaya> #resizable, # resizable2 {width: 150px; height: 150px; padding: 0.5em;} h3 #resizable, # resizable2 h3 {text-align: center; margin: 0;} </ Style> <Script> $ (Fungsi () { $ ( "#resizable") .resizable ({ delay: 1000 }); $ ( "# Resizable2") .resizable ({ Jarak: 40 }); }); </ Script> </ Kepala> <Body> <Class H3 = "docs"> Waktu Delay (ms): </ h3> <Div id = "resizable" class = "ui-widget-content"> <Class H3 = "ui-widget-header"> Waktu </ h3> </ Div> <Class H3 = "docs"> jarak delay (px): </ h3> <Div id = "resizable2" class = "ui-widget-content"> <Class H3 = "ui-widget-header"> jarak </ h3> </ Div> </ Body> </ Html>
Dengan menetapkan helper
pilihan untuk kelas CSS, ketika diperbesar untuk menampilkan hanya unsur kontur.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> skala jQuery UI (Resizable) - asisten </ 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"> <Gaya> #resizable {width: 150px; height: 150px; padding: 0.5em;} h3 #resizable {text-align: center; margin: 0;} Ui-resizable-helper {border: 2px dotted # 00F;} </ Style> <Script> $ (Fungsi () { $ ( "#resizable") .resizable ({ helper: "ui-resizable-helper" }); }); </ Script> </ Kepala> <Body> <Div id = "resizable" class = "ui-widget-content"> <Class H3 = "ui-widget-header"> Asisten </ h3> </ Div> </ Body> </ Html>
Gunakan maxHeight
, maxWidth
, minHeight
dan minWidth
opsi membatasi elemen maksimum atau minimum tinggi resizable atau lebar.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> skala jQuery UI (Resizable) - Maksimum / ukuran minimum </ 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"> <Gaya> #resizable {width: 200px; height: 150px; padding: 5px;} h3 #resizable {text-align: center; margin: 0;} </ Style> <Script> $ (Fungsi () { $ ( "#resizable") .resizable ({ maxHeight: 250, MaxWidth: 350, minHeight: 150, MinWidth: 200 }); }); </ Script> </ Kepala> <Body> <Div id = "resizable" class = "ui-widget-content"> <Class H3 = "ui-widget-header"> Zoom In / Out </ h3> </ Div> </ Body> </ Html>
Mempertahankan rasio aspek saat ini atau menetapkan batas baru untuk skala rasio aspek. Pengaturan aspectRatio
pilihan adalah benar, dan secara opsional memberikan tingkat baru (misalnya, 4/3).
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> skala jQuery UI (Resizable) - Menjaga rasio aspek </ 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"> <Gaya> #resizable {width: 160px; height: 90px; padding: 0.5em;} h3 #resizable {text-align: center; margin: 0;} </ Style> <Script> $ (Fungsi () { $ ( "#resizable") .resizable ({ aspectRatio: 16/9 }); }); </ Script> </ Kepala> <Body> <Div id = "resizable" class = "ui-widget-content"> <Class H3 = "ui-widget-header"> Menjaga rasio aspek </ h3> </ Div> </ Body> </ Html>
elemen resizable selaras ke grid. Dengan grid
ukuran pilihan untuk mengatur sel-sel grid (piksel tinggi dan lebar).
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> skala jQuery UI (Resizable) - Snap ke Grid </ 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"> <Gaya> #resizable {width: 150px; height: 150px; padding: 0.5em;} h3 #resizable {text-align: center; margin: 0;} </ Style> <Script> $ (Fungsi () { $ ( "#resizable") .resizable ({ jaringan: 50 }); }); </ Script> </ Kepala> <Body> <Div id = "resizable" class = "ui-widget-content"> <Class H3 = "ui-widget-header"> Grid </ h3> </ Div> </ Body> </ Html>
Dengan mengklik dan menyeret unsur tepi untuk mengubah ukuran beberapa elemen secara bersamaan. Untuk alsoResize
Pilihan melewati pemilih bersama.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> skala jQuery UI (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"> <Gaya> #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> $ (Fungsi () { $ ( "#resizable") .resizable ({ alsoResize: "#also" }); $ ( "#also") .resizable (); }); </ Script> </ Kepala> <Body> <Div id = "resizable" class = "ui-widget-header"> <Class H3 = "ui-negara-aktif"> Zoom </ h3> </ Div> <Div id = "juga" class = "ui-widget-content"> <Class H3 = "ui-widget-header"> Zoom sync </ h3> </ Div> </ Body> </ Html>
kotak teks scalable.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> skala 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"> <Gaya> Ui-resizable-se { bottom: 17px; } </ Style> <Script> $ (Fungsi () { $ ( "#resizable") .resizable ({ menangani: "se" }); }); </ Script> </ Kepala> <Body> <Textarea id = "resizable" rows = "5" cols = "20"> </ textarea> </ Body> </ Html>
Dengan menetapkan ghost
pilihan adalah benar, elemen dapat ditampilkan dalam tembus selama zooming, bukan menampilkan elemen yang sebenarnya.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> skala jQuery UI (Resizable) - umpan balik visual </ 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"> <Gaya> #resizable {width: 150px; height: 150px; padding: 0.5em;} h3 #resizable {text-align: center; margin: 0;} Ui-resizable-hantu {border: abu-abu putus-putus 1px;} </ Style> <Script> $ (Fungsi () { $ ( "#resizable") .resizable ({ hantu: true }); }); </ Script> </ Kepala> <Body> <Div id = "resizable" class = "ui-widget-content"> <Class H3 = "ui-widget-header"> Ghost </ h3> </ Div> </ Body> </ Html>