jQuery UI misalnya - Zoom (Resizable)
Menggunakan mouse untuk mengubah ukuran elemen.
Untuk rincian lebih lanjut tentang interaksi resizable, lihat dokumentasi API widget resizable (yang Resizable Widget) .
Fungsi standar
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>
animasi
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>
Membatasi area zoom
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>
mulai tertunda
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>
asisten
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>
Maksimum / ukuran minimum
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 aspek rasio
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>
Snap ke Grid
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>
sinkron Zoom
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>
text Box
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>
umpan balik visual
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>