JQuery UI Part 14 : Membuat Resizable Dengan JQuery UI
Membuat Resizable Dengan JQuery UI – Resizable() adalah sebuah fungsi/function yang di sediakan oleh jquery ui. untuk membuat interaksi yang mampu membuat resize(mengubah ukuran element) pada sebuah element dengan cursor mouse. oke langsung aja kita masuk ke tahap membuat resize element dengan function resizable() di jquery ui.
Membuat Resizable Dengan JQuery UI
untuk membuat resize pada sebuah element dengan jquery ui kita bisa menggunakan fungsi resizable(). oh iya jika teman-teman belum membaca tutorial jquery ui sebelumnya di www.malasngoding.com silahkan teman-teman baca dulu tutorial jquery ui sebelumnya. karena kita telah membahas tentang membuat interaksi draggable dan droppable dengan jquery ui. kembali ke pembahasan resize pada jquery ui.
Cara Membuat Resize Pada Element HTML
resizable.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title>JQuery UI Part 14 : Membuat Resizable Dengan JQuery UI</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Membuat Resizable Dengan JQuery UI | www.malasngoding.com</h1> <div id="kotak"> <p>Resize element ini | www.malasngoding.com</p> </div> </body> <script type="text/javascript"> $(document).ready(function(){ $( "#kotak" ).resizable(); }); </script> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body{ font-family: sans-serif; } h1{ text-align: center; } #kotak{ width: 400px; height: 400px; padding: 20px; background: blue; color: #fff; } |
membuat interaksi resizable dengan jquery ui
Sangat mudah kan. pertama hubungkan dulu dengan jquery dan jquery ui nya.
|
1 2 3 |
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css"> |
teman-teman hanya perlu membuat sebuah element html yang di beri class atau id tentunya.
|
1 2 3 4 5 |
<h1>Membuat Resizable Dengan JQuery UI | www.malasngoding.com</h1> <div id="kotak"> <p>Resize element ini | www.malasngoding.com</p> </div> |
dan selanjutnya berikan fungsi resizable() pada element yang sudah di beri id dan class tersebut.
|
1 2 3 4 5 |
<script type="text/javascript"> $(document).ready(function(){ $( "#kotak" ).resizable(); }); </script> |
contoh di atas hanya contoh sederhana nya saja yg saya buat. teman-teman bisa mengembangkan nya lagi dengan mambaca panduan dari website jqueryui.com . untuk membuat interaksi resize pada jquery ui. baiklah sekian dulu tutorial jquery ui part 14 yang membahas tentang interactions resize element. selanjutnya akan kita bahas tentang cara membuat interaksi sortable dengan jquery ui di tutorial jquery ui part 15.
Incoming search terms:
- arti dari resizable
- arti resizable
- Arti resiza
- Cara Mengubah Ukuran Font Dengan JQuery
- fungsi dari website malasngoding com
- javascript untuk memperbesar dan memperkecil text
- membuat box handle resize drag css
- Resizable Adalah
- Rezisable adalah
Produk
Toko Kami
TUTORIAL MENARIK LAINNYA
JQuery UI Part 15 : Interaksi Selectable dan Sortable di JQuery UI
JQuery Part 13 : Membuat Interaksi Droppable Dengan JQuery UI
JQuery UI Part 12 : Membuat Interaksi Draggable Dengan JQuery UI
JQuery UI Part 11 : Membuat Tooltip Dengan JQuery UI
Diskusi
Tidak Ada Komentar