#JQuery UI

JQuery UI Part 15 : Interaksi Selectable dan Sortable di JQuery UI

By Diki Alfarabi Hadi
12 February 2016
JQuery UI

Interaksi Selectable dan Sortable di JQuery UI – Selamat datang di tutorial jquery ui yang ke 15. di tutorial jquery UI part 15 ini akan kita bahas tentang dua buah interaksi lagi yang tersisa, setelah sebelumnya kita membahas interaksi draggable, droppable, dan resizable pada jquery ui. interaksi yang akan kita bahas di tutorial ini adalah interaction selectable dan sortable. fungsi sortable() di jquery ui memungkinkan kita untuk membuat pengurutan element html. dan selectable() memungkinkan kita untuk membuat element html dapat di select/di pilih. langsung saja kita masuk ke cara menggunakan kedua aksi interaksi ini.

Interaksi Selectable dan Sortable di JQuery UI

Yang pertama kita bahas dulu interaksi selectable. setelah ini baru kita bahas tentang interaksi sortable. silahkan perhatikan penjelasan dan contoh berikut ini untuk menggunakan fungsi selectable() dan sortable() pada jquery ui.

Pengertian dan Cara Menggunakan Fungsi Selectable JQuery UI

Fungsi selectable di jquery ui adalah sebuah fungsi yang tersedia untuk membuat interaksi select. yaitu membuat seolah-olah element html dapat di pilih dengan cara di klik. langsung saja kita masuk ke contoh nya agar tidak membingungkan.interaksi selectable di jquery ui.

selectable.html

<!DOCTYPE html>

<html>

<head>

<title>JQuery UI Part 15 : Interaksi Selectable dan Sortable di JQuery UI</title>

</head>

<body>

<h1>Interaksi Selectable dan Sortable di JQuery UI | www.malasngoding.com</h1>

<li class="ui-widget-content">Pilih Item 1</li>

<li class="ui-widget-content">Pilih Item 2</li>

<li class="ui-widget-content">Pilih Item 3</li>

<li class="ui-widget-content">Pilih Item 4</li>

<li class="ui-widget-content">Pilih Item 5</li>

<li class="ui-widget-content">Pilih Item 6</li>

<li class="ui-widget-content">Pilih Item 7</li>

</ol>

</body>

$(document).ready(function(){

$( "#selectable" ).selectable();

});

</script>

</html>

style.css

body{

font-family: sans-serif;

}

h1{

text-align: center;

}

#feedback { font-size: 1.4em; }

#selectable .ui-selecting { background: #FECA40; }

#selectable .ui-selected { background: #F39814; color: white; }

#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }

#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

bisa teman-teman perhatikan pada contoh menggunakan fungsi selectable jquery ui di atas. seperti biasa pertama kita hubungkan dulu file jquery dan jquery ui nya.

baru kemudian kita membuat element yang bisa di select. di sini kita membuat element list. dan berikan id atau class.

<li class="ui-widget-content">Pilih Item 1</li>

<li class="ui-widget-content">Pilih Item 2</li>

<li class="ui-widget-content">Pilih Item 3</li>

<li class="ui-widget-content">Pilih Item 4</li>

<li class="ui-widget-content">Pilih Item 5</li>

<li class="ui-widget-content">Pilih Item 6</li>

<li class="ui-widget-content">Pilih Item 7</li>

</ol>

terakhir tinggal memberikan fungsi selectable().

$(document).ready(function(){

$( "#selectable" ).selectable();

});

</script>

interaksi selectable dan sortable di jquery ui

interaksi selectable di jquery ui

See the Pen Interaksi selectable jquery ui by Malas Ngoding (@malasngoding) on CodePen.

Pengertian dan Cara Menggunakan Fungsi Sortable JQuery UI

Fungsi sortable adalah fungsi jquery ui yang di sediakan untuk membuat pengurutan element. misalnya teman-teman memiliki data dalam bentuk list. dan teman-teman ingin mengurutkan urutan data nya misalnya. teman-teman bisa menggunakan fungsi sortable() jquery ini. caranya juga sangat mudah. untuk mengurutkannya teman-teman tinggal drag and drop pada element yang ingin di urutkan.

sortable.html

<!DOCTYPE html>

<html>

<head>

<title>JQuery UI Part 15 : Interaksi Selectable dan Sortable di JQuery UI</title>

</head>

<body>

<h1>Interaksi Sortable di JQuery UI | www.malasngoding.com</h1>

<li class="ui-widget-content">Pilih Item 1</li>

<li class="ui-widget-content">Pilih Item 2</li>

<li class="ui-widget-content">Pilih Item 3</li>

<li class="ui-widget-content">Pilih Item 4</li>

<li class="ui-widget-content">Pilih Item 5</li>

<li class="ui-widget-content">Pilih Item 6</li>

<li class="ui-widget-content">Pilih Item 7</li>

</ol>

</body>

$(document).ready(function(){

$( "#sortable" ).sortable();

});

</script>

</html>

style.css

body{

font-family: sans-serif;

}

h1{

text-align: center;

}

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }

#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }

#sortable li span { position: absolute; margin-left: -1.3em; }

interaksi sortable di jquery ui

See the Pen interaksi sortable jquery ui by Malas Ngoding (@malasngoding) on CodePen.

Silahkan teman-teman kembangkan lagi untuk penggunaan fungsi selectable dan sortable jquery ui ini di website jquery ui. sekian tutorial JQuery UI Part 15 : Interaksi Selectable dan Sortable di JQuery UI. jika ada yang teman-teman kurang pahami atau kesalahan didalam pembuatan tutorial mohon teman-teman bisa meninggalkan komentar di bawah. terima kasih.

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.