.resizable() akan menciptakan elemen menjadi gampang diubah ukurannya. Saat sebuah elemen dikenai fungsi .resizable(), maka sebuah tanda berbentuk simbol ui-icon-gripsmall-diagonal-se akan disematkan di pojok kanan bawah. Selain itu, kursor pointer juga akan berubah.
Dasar Penggunaan
Buat sebuah elemen dengan lebar dan tinggi tertentu. Elemen sanggup diseleksi ibarat biasanya mengikuti sintaks jQuery:
Kerangka
<div id='area'> ... <div>CSS
#area { background-color:#E86C0A; width:170px; height:140px; }jQuery UI
$('#area').resizable();Konfigurasi jQuery UI Resizable
| Opsi | Nilai | Deskripsi |
|---|---|---|
| minWidth | 0, 1, 2, 3, ... (numerik) | Membatasi perubahan lebar terkecil elemen. (default: 10) |
| minHeight | 0, 1, 2, 3, ... (numerik) | Membatasi perubahan tinggi terkecil elemen. (default: 10) |
| maxWidth | 0, 1, 2, 3, ... (numerik) | Membatasi perubahan lebar terbesar elemen. (default: null) |
| maxHeight | 0, 1, 2, 3, ... (numerik) | Membatasi perubahan tinggi terbesar elemen. (default: null) |
| aspectRatio | 2/3, 4/2 ... (perbandingan lebar dan tinggi) | Menjaga semoga rasio/perbandingan lebar dan tinggi elemen tetap ideal. (default: false) |
| grid | 0, 1, 2, 3, ... (numerik) | Menentukan jarak langkah perubahan ukuran elemen (default: false) |
| containment | "#kontainer" ... (selektor) | Membatasi pembesaran ukuran elemen dengan batasan berupa elemen induk (default: false) |
| helper | "garis-bantu" (kelas) | Menyisipkan pembantu/indikator perubahan ukuran dikala elemen sedang diubah ukurannya. Wujud helper tidak mutlak, tergantung dari isyarat CSS yang Anda buat pada kelas helpernya. (default: false) |
| ghost | true | Tugasnya sama dengan helper. Hanya saja, ghost berwujud duplikat elemen transparan yang akan menjadi indikator perubahan ukuran elemen. (default: false) |
| false | ||
| animate | true | Berfungsi untuk menganimasikan perubahan ukuran elemen. (default: false) |
| false | ||
| animateDuration | "slow", "normal", "fast" | Mengatur kecepatan animasi. (default: "slow") |
| 1000, 2000, ... (milidetik) | ||
| animateEasing | "swing", "easeInBack", ... (nama easing) | Menentukan easing khusus pada animasi perubahan ukuran elemen. (default: "swing") Pelajari wacana easing jQuery di sini |
| alsoResize | "#saya-juga" ... (selektor) | Opsi ini akan menciptakan elemen lain ikut berubah bila elemen sasaran diubah ukurannya. (default: false) Dalam hal ini, elemen pengikut yang dimaksud yakni #saya-juga. |
| delay | 100, 200 ... (milidetik) | Menentukan waktu penundaan perubahan elemen. Saat opsi ini diterapkan, maka elemen akan berubah ukuran dikala waktu delay telah habis. |
| distance | 20, 30 ... (piksel) | Menentukan penundaan perubahan elemen menurut jarak. Saat opsi ini diterapkan, maka elemen akan berubah ukuran sehabis handle elemen digeser pada jarak tertentu. |
Contoh Penerapan
minWidth:120, minHeight:110, maxWidth:500, maxHeight:350
Dengan memilih opsi tinggi/lebar minimal dan tinggi/lebar maksimal, Anda sanggup membatasi perubahan ukuran terkecil dan ukuran terbesar elemen sesuai kehendak:
$('#area').resizable({ minWidth:120, minHeight:110, maxWidth:500, maxHeight:350 });aspectRatio:3/2
Menentukan aspectRatio akan menjaga perbandingan lebar dan tinggi elemen semoga tetap konsisten/ideal. Biasanya ini dibutuhkan untuk objek berupa gambar:
$('img').resizable({aspectRatio:3/2});grid:50
Menentukan grid sebesar 50 akan mengubah langkah perubahan ukuran pada kelipatan 50 piksel. Tidak boleh kurang, dihentikan lebih:
$('#area').resizable({grid:50});containment:"#kontainer"
Membatasi pembesaran ukuran elemen juga sanggup diatur menurut ukuran elemen induk:
Kerangka
<div id='kontainer'> <div id='area'> ... </div> </div>CSS
#kontainer { width:450px; height:500px; border:1px solid #555; } #area { width:170px; height:140px; background-color:#E86C0A; }jQuery UI
$('#area').resizable({containment:"#kontainer"});helper:"garis-bantu"
Tentukan nama kelas helper secara bebas, lalu buat dimensinya dalam CSS. Opsi helper dipakai untuk menunjukkan indikator perubahan ukuran elemen:
.garis-bantu {border:1px dotted #666;}$('img').resizable({helper:"garis-bantu"});ghost:true
Menentukan nilai ghost menjadi true akan menunjukkan indikator perubahan ukuran elemen berupa duplikat elemen transparan:
$('img').resizable({ghost:true});
animate:true
Menentukan nilai animate menjadi true akan menunjukkan efek animasi pada dikala ukuran elemen sedang berubah:
.garis-bantu {border:1px dotted #666;}$('img').resizable({ animate:true, helper:"garis-bantu" });animate:true, animateDuration:1000, animateEasing:"easeOutElastic"
Setelah memilih opsi animate:true, opsi lain ibarat penentuan kecepatan animasi dan tipe easing juga sanggup diterapkan:
.garis-bantu {border:1px dotted #666;}$('img').resizable({ animate:true, animateDuration:1000, animateEasing:"easeOutElastic", helper:"garis-bantu" });alsoResize:".saya-juga"
Opsi ini akan menciptakan elemen .saya-juga ikut berubah bila elemen sasaran diubah ukurannya:
Kerangka
<img src='eureka1.jpg' /> <div class='saya-juga'></div> <div class='saya-juga'></div> <div class='saya-juga'></div>CSS
.saya-juga { width:369px; height:246px; background:#555; margin-top:10px; }jQuery UI
$('img').resizable({alsoResize:".saya-juga"});delay:1000
Menuliskan opsi delay:1000 akan menunda perubahan ukuran elemen selama 1000ms ke depan semenjak pertama kali handle digeser:
$('#area').resizable({delay:1000});distance:40
Menuliskan opsi distance:40 akan menunda perubahan ukuran elemen hingga handle digeser sejauh 40 piksel:
$('#area').resizable({distance:40});Gambar: Projekt Eureka » Animepaper.net
Sumber https://www.dte.web.id/