#JQuery UI

JQuery UI Part 14 : Membuat Resizable Dengan JQuery UI

By Diki Alfarabi Hadi
11 February 2016
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

<!DOCTYPE html>

<html>

<head>

<title>JQuery UI Part 14 : Membuat Resizable Dengan JQuery UI</title>

</head>

<body>

<h1>Membuat Resizable Dengan JQuery UI | www.malasngoding.com</h1>

<p>Resize element ini | www.malasngoding.com</p>

</div>

</body>

$(document).ready(function(){

$( "#kotak" ).resizable();

});

</script>

</html>

style.css

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.

teman-teman hanya perlu membuat sebuah element html yang di beri class atau id tentunya.

<h1>Membuat Resizable Dengan JQuery UI | www.malasngoding.com</h1>

<p>Resize element ini | www.malasngoding.com</p>

</div>

dan selanjutnya berikan fungsi resizable() pada element yang sudah di beri id dan class tersebut.

$(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.

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.