Portable CSS3 Button Generator

Sekedar memperbaharui Generator Tombol CSS3 Saya. Sekarang Saya buat menjadi lebih sederhana namun dengan sistem otomatisasi yang lebih baik. Fitur hold hover session sudah digantikan dengan otomatisasi berdasarkan posisi pointer terhadap editor warna pada kolom :hover. Memperbaiki beberapa kesalahan, dan mencoba untuk menangani bug Opera dan IE9 yang tidak bisa menjalankan widget JQuery UI Slider pada versi JQuery UI lama. Kabar baiknya, alat ini bukan hanya bisa digunakan sebagai alat perancang tombol CSS3, tapi juga bisa digunakan sebagai generator CSS3 Gradient yang kompatibel.

Lihat Demo Unduh Berkas

Karena beberapa proses revisi yang Saya lakukan, alat ini sudah tidak bisa diunduh lagi. Tapi jika Anda tetap ingin mengunduh, Anda bisa melakukan itu dengan mudah, yaitu dengan cara mengeklik kanan pada halaman demo, kemudian pilih perintah Save as... ⇒ Web Page Complete

Saya sudah mengetes alat ini pada peramban versi terakhir dari Opera, Firefox and Chrome. Termasuk IE9 dan Safari.

Konfigurasi JQuery UI Dialog

JQuery UI Dialog digunakan untuk menangani hal-hal yang berhubungan dengan komunikasi antarmuka antara aplikasi dengan pengguna. Karena tidak mungkin jika sebuah aplikasi bisa berbicara dan menyarankan sesuatu untuk dilakukan oleh pengguna, kotak dialog menjadi salah satu cara yang bisa digunakan untuk berkomunikasi.

Dasar Penggunaan

Buat sebuah elemen divisi sembarang, kemudian isi elemen tersebut dengan sesuatu. Seleksi elemen tersebut dengan JQuery, kemudian terapkan metode .dialog():

HTML

<div id="dialog">
    Konten di sini...
</div>

JQuery UI

$('#dialog').dialog();

Lihat Demo

Konfigurasi JQuery UI Dialog

Opsi	Nilai	Deskripsi
title	"Judul Dialog"	Menentukan judul kotak dialog.
autoOpen	true	Jika bernilai true, maka kotak dialog akan tampil pada saat halaman pertama kali diakses. Jika bernilai false, kotak dialog tidak akan tampil saat halaman diakses sampai sebuah pemicu memerintahkan kotak dialog tersebut untuk tampil. Pemicu biasanya berupa tombol atau suatu aksi (default: true)
	false
width	100, 200, 300, …	Menentukan lebar kotak dialog (default: 300)
height	100, 200, 300, …	Menentukan tinggi kotak dialog (default: "auto")
maxWidth	100, 200, 300, …	Menentukan lebar maksimal kotak dialog (default: false)
maxHeight	100, 200, 300, …	Menentukan tinggi maksimal kotak dialog (default: false)
minWidth	100, 200, 300, …	Menentukan lebar minimal kotak dialog (default: 150)
minHeight	100, 200, 300, …	Menentukan tinggi minimal kotak dialog (default: 150)
show	"fade", "slide", ... (efek JQuery UI)	Menentukan efek khusus saat kotak dialog tampil (default: null)
hide	"fade", "slide", ... (efek JQuery UI)	Menentukan efek khusus saat kotak dialog ditutup (default: null)
closeText	"close", "tutup", ...	Menentukan teks pada tombol penutup kotak dialog di sebelah kanan atas. Secara umum tidak terlihat karena opsi ini memang tidak terlalu penting. Bahkan, dalam tema JQuery UI, teks ini juga tidak akan ditampilkan: .ui-dialog-titlebar-close span {display:none} (default: "close")
modal	true	Pilihan untuk menampilkan tabir transparan saat kotak dialog muncul. (default: false)
	false
draggable	true	Pilihan untuk menentukan apakah kotak dialog dapat diseret (drag) atau tidak. (default: true)
	false
resizable	true	Pilihan untuk menentukan apakah kotak dialog dapat diubah ukurannya atau tidak. (default: true)
	false
buttons	{   "Tombol1": function() {},   "Tombol2": function() {},   "Tombol3": function() {} }	Menambahkan tombol di dalam kotak dialog. Bagian ini biasanya yang sedikit rumit, karena selain menampilkan tombol, Anda juga harus bisa membuat tombol tersebut berfungsi sehingga kotak dialog bisa hidup.

Contoh Penerapan

autoOpen:false

Menentukan opsi autoOpen:false akan membuat kotak dialog tidak muncul pada saat pertama kali halaman diakses dan hanya akan muncul jika diperintah.

Kita buat sebuah elemen divisi sebagai kotak dialog dan sebuah tombol sebagai pemicunya:

HTML

<div id="dialog">
    Konten di sini...
</div>
<button id="open">Buka Dialog</button>

JQuery UI

$('#dialog').dialog({
    autoOpen: false
});

$('#open').button({
    icons: {
        primary: "ui-icon-folder-open"
    }
}).click(function() {
    $('#dialog').dialog("open");
});

Lihat Demo

.dialog("open") dan .dialog("close") adalah metode yang digunakan untuk menampilkan dan menyembunyikan kotak dialog. Selain menggunakan opsi autoOpen:false, menghilangkan kotak dialog juga bisa dilakukan dengan cara yang lebih sederhana yaitu dengan CSS atau dengan fungsi .hide():

#dialog {display:none}

$('#dialog').hide();

title:"Kotak Dialog", width:250, height:200

Menambahkan judul “Kotak Dialog” dan menentukan lebar kotak dialog sebesar 250 piksel dan tinggi kotak dialog sebesar 200 piksel:

$('#dialog').dialog({
    title: "Kotak Dialog",
    width: 250,
    height: 200
});

Lihat Demo

show:"blind", hide:"puff"

Menciptakan efek blind pada saat kotak dialog ditampilkan dan efek puff pada saat kotak dialog ditutup:

HTML

<div id="dialog" style="display:none;">
    Konten di sini...
</div>
<button id='open'>Buka Dialog</button>

JQuery UI

$('#open').button({
    icons: {
        primary: "ui-icon-folder-open"
    }
}).click(function() {
    $('#dialog').dialog({
        title: "Kotak Dialog",
        show: "blind",
        hide: "puff"
    });
});

Lihat Demo

modal:true

Menentukan opsi modal:true akan menciptakan tabir di belakang kotak dialog saat kotak dialog ditampilkan:

$('#dialog').dialog({
    title: "Kotak Dialog",
    modal: true
});

$('#open').button({
    icons: {
        primary: "ui-icon-folder-open"
    }
}).click(function() {
    $('#dialog').dialog("open");
});

Lihat Demo

draggable:false, resizable:false

Menentukan opsi draggable:false dan resizable:false akan menonaktifkan fitur draggable dan resizable pada kotak dialog:

$('#dialog').dialog({
    title: "Kotak Dialog",
    draggable: false,
    resizable: false
});

draggable:true, resizable:true

Lihat Demo

Menghidupkan Kotak Dialog

Tombol dalam kotak dialog dengan kemampuan untuk menjalankan perintah akan menghidupkan kotak dialog dan tidak hanya sekedar berakhir sebagai kotak peringatan. Anda bisa menciptakan kotak dialog yang dapat memerintahkan elemen lain untuk melakukan sesuatu.

Pada dasarnya, opsi buttons dapat dituliskan seperti ini:

buttons: {
    "OK": function() {
        // Fungsi yang akan bekerja jika
        // tombol `OK` diklik dibuat di sini...
    },
    "Cancel": function() {
        // Fungsi yang akan bekerja jika
        // tombol `Cancel` diklik dibuat di sini...
    }
}

Sebagai contoh, kita akan membuat dua buah tombol dalam kotak dialog untuk mengendalikan elemen yang berada di luar kotak dialog:

HTML

<div id="dialog"></div>
<div id="kotak">Kendalikan Saya!</div>

CSS

#kotak {
  width:170px;
  height:200px;
  background:#4AB847;
  border:2px solid #369834;
  padding:10px;
  font-size:16px;
  font-weight:bold;
  color:white;
  cursor:pointer;
}

JQuery UI

$('#dialog').dialog({
    title: "Tombol dalam Dialog",
    autoOpen: false,
    buttons: {
        "SlideUp": function() {
            $('#kotak').slideUp(1000);
        },
        "SlideDown": function() {
            $('#kotak').slideDown(1000);
        }
    }
});

// Tampilkan kotak dialog saat `#kotak` didekati pointer
$('#kotak').mouseenter(function() {
    $('#dialog').dialog("open");
});

Lihat Demo

Modal Konfirmasi

Sebenarnya cara kerjanya sangat sederhana. Saat sebuah tombol diklik, itu akan memicu sebuah fungsi untuk menampilkan kotak konfirmasi. Salah satu tombol di dalam kotak konfirmasi merupakan perintah sebenarnya dari tombol yang diklik tadi. Sedangkan tombol yang Anda kira sebagai pemicu utama untuk menjalankan perintah sebenarnya hanyalah tombol untuk menampilkan kotak dialog konfirmasi:

Modal konfirmasi dengan JQuery UI

HTML

<div class="separator">
    <img class="item" alt="" src="my-image.jpg">
    <button id="delete">Hapus Gambar!</button>
</div>

<div id="confirm-box">
    <span class="ui-icon ui-icon-alert" style="float:left;margin:0 10px 50px 0;"></span>Apakah Anda yakin akan menghapus gambar ini? Hal ini tidak bisa dibatalkan dan gambar ini akan terhapus selamanya.
</div>

CSS

.separator {
  position:relative;
  float:left;
}

.separator button {
  position:absolute;
  top:10px;
  left:10px;
}

JQuery UI

$('#confirm-box').dialog({
    modal: true,
    autoOpen: false,
    title: "Konfirmasi",
    buttons: {
        "Ya": function() {
            $('img.item').parent().hide("explode", {
                pieces: 36
            }, 1000);
            $(this).dialog("close");
        },
        "Batal": function() {
            $(this).dialog("close");
        }
    }
});

// Tampilkan kotak dialog konfirmasi saat tombol hapus diklik
$('#delete').button({
    icons: {
        primary: "ui-icon-trash"
    }
}).click(function() {
    $('#confirm-box').dialog("open");
});

Lihat Demo

Lipsum-UI :: A JQuery UI Lorem Ipsum Generator

Lipsum-UI is a light weight Lorem Ipsum generator. This generator wil generate Lorem Ipsum text for use as dummy texts on webpages. Just do what you want in the options panel and you'll see the magic. Say thank's to Mottie who have helped me to complete this project and to resolve my problems about my limited JavaScript capabilities :p

Demo & Download

You can view the demo and download it by clicking the button below:

View Demo Download Files

Because of some revisions that I have done, this tool may not be downloaded anymore. But, if you still want to download, you can still do it easily by right clicking on the demo page, then choose Save as… ⇒ Web Page Complete

Individual Effect Settings for JQuery UI Dialog: show/hide

$('#dialog').dialog({
    show:{effect:"fade", duration:250},
    hide:{effect:"pulsate", duration:200, times:2}
});

JQuery UI Resizable

.resizable() akan membuat elemen menjadi mudah 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 dapat diseleksi seperti biasanya mengikuti sintaks JQuery:

Kerangka

<div id='area'>
    ...
<div>

CSS

#area {
  background-color:#E86C0A;
  width:170px;
  height:140px;
}

JQuery UI

$('#area').resizable();

Lihat Demo

---

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 agar 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 saat elemen sedang diubah ukurannya. Wujud helper tidak mutlak, tergantung dari kode 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 tentang easing JQuery di sini
alsoResize	"#saya-juga" ... (selektor)	Opsi ini akan membuat elemen lain ikut berubah jika elemen target diubah ukurannya. (default: false) Dalam hal ini, elemen pengikut yang dimaksud adalah #saya-juga.
delay	100, 200 ... (milidetik)	Menentukan waktu penundaan perubahan elemen. Saat opsi ini diterapkan, maka elemen akan berubah ukuran saat waktu delay telah habis.
distance	20, 30 ... (piksel)	Menentukan penundaan perubahan elemen berdasarkan jarak. Saat opsi ini diterapkan, maka elemen akan berubah ukuran setelah handle elemen digeser pada jarak tertentu.

Contoh Penerapan

minWidth:120, minHeight:110, maxWidth:500, maxHeight:350

Dengan menentukan opsi tinggi/lebar minimal dan tinggi/lebar maksimal, Anda bisa membatasi perubahan ukuran terkecil dan ukuran terbesar elemen sesuai kehendak:

$('#area').resizable({
    minWidth:120,
    minHeight:110,
    maxWidth:500,
    maxHeight:350
});

Lihat Demo

aspectRatio:3/2

Menentukan aspectRatio akan menjaga perbandingan lebar dan tinggi elemen agar tetap konsisten/ideal. Biasanya ini diperlukan untuk objek berupa gambar:

$('img').resizable({aspectRatio:3/2});

Lihat Demo

grid:50

Menentukan grid sebesar 50 akan mengubah langkah perubahan ukuran pada kelipatan 50 piksel. Tidak boleh kurang, tidak boleh lebih:

$('#area').resizable({grid:50});

Lihat Demo

containment:"#kontainer"

Membatasi pembesaran ukuran elemen juga dapat diatur berdasarkan 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"});

Lihat Demo

helper:"garis-bantu"

Tentukan nama kelas helper secara bebas, kemudian buat dimensinya dalam CSS. Opsi helper digunakan untuk memberikan indikator perubahan ukuran elemen:

.garis-bantu {border:1px dotted #666;}

$('img').resizable({helper:"garis-bantu"});

Lihat Demo

ghost:true

Menentukan nilai ghost menjadi true akan memberikan indikator perubahan ukuran elemen berupa duplikat elemen transparan:

$('img').resizable({ghost:true});

Lihat Demo

Opsi helper dan ghost

animate:true

Menentukan nilai animate menjadi true akan memberikan efek animasi pada saat ukuran elemen sedang berubah:

.garis-bantu {border:1px dotted #666;}

$('img').resizable({
    animate:true,
    helper:"garis-bantu"
});

Lihat Demo

animate:true, animateDuration:1000, animateEasing:"easeOutElastic"

Setelah menentukan opsi animate:true, opsi lain seperti penentuan kecepatan animasi dan tipe easing juga bisa diterapkan:

.garis-bantu {border:1px dotted #666;}

$('img').resizable({
    animate:true,
    animateDuration:1000,
    animateEasing:"easeOutElastic",
    helper:"garis-bantu"
});

Lihat Demo Tentang Easing JQuery

alsoResize:".saya-juga"

Opsi ini akan membuat elemen .saya-juga ikut berubah jika elemen target 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"});

Lihat Demo

delay:1000

Menuliskan opsi delay:1000 akan menunda perubahan ukuran elemen selama 1000ms ke depan sejak pertama kali handle digeser:

$('#area').resizable({delay:1000});

distance:40

Menuliskan opsi distance:40 akan menunda perubahan ukuran elemen sampai handle digeser sejauh 40 piksel:

$('#area').resizable({distance:40});

Lihat Demo

Gambar: Projekt Eureka » Animepaper.net

Konfigurasi JQuery UI Slider

Slider adalah elemen UI berbentuk variabel klasik. Untuk mendapatkan nilai, Anda harus menggeser slider ke kanan atau ke kiri, ke atas dan ke bawah. Meskipun metodenya terlihat klasik, namun sangat menarik untuk ukuran antarmuka berupa objek digital.

---

Dasar Penggunaan

Mengubah elemen tertentu menjadi Slider dilakukan dengan cara menerapkan fungsi .slider() pada elemen yang diseleksi:

$('#slider').slider();

Lihat Demo

Konfigurasi JQuery UI Slider

Opsi	Nilai	Deskripsi
value	0, 1, 2, 3, ... (numerik)	Menentukan letak slider handle saat pertama kali halaman terakses/dikunjungi. (default: 0)
step	0, 1, 2, 3, ... (numerik)	Menentukan nilai step dengan bilangan tertentu akan membuat slider handle bergeser dengan akurat pada loncatan sebesar nilai step. (default: 1)
min	0, 1, 2, 3, ... (numerik)	Menentukan nilai terendah Slider. (default: 0)
max	0, 1, 2, 3, ... (numerik)	Menentukan nilai tertinggi Slider. (default: 100)
range	"min"	Nilai "min" akan memberikan dekorasi berupa warna tertentu (sesuai tema) pada sisa jarak di belakang slider handle, sedangkan "max" akan memberikan dekorasi warna pada sisa jarak di depan slider handle. Ini hanya untuk keperluan antarmuka. Nilai true agak rumit untuk dijelaskan. Intinya adalah, nilai ini digunakan untuk menyatakan bahwa Anda akan menerapkan dua buah slider handle pada satu bar. Ini adalah syarat pertama untuk membuat slider berganda. (default: false)
	"max"
	true
values	[1, 20] (Array)	Saat Anda menuliskan opsi ini, maka opsi value sudah tidak diperlukan lagi. Opsi ini hanya digunakan jika Anda akan menciptakan dua buah slider handle dalam satu bar, yaitu setelah Anda menyatakan range:true. Angka pertama menyatakan letak slider handle pertama dan angka ke dua menyatakan letak slider handle ke dua. (default: null)
orientation	"horizontal"	Pilihan untuk menentukan orientasi Slider. "horizontal" akan memposisikan Slider secara horizontal, "vertical" akan memposisikan Slider secara vertikal. (default: "horizontal")
	"vertical"
slide	function(event, ui) {}	ini adalah opsi terpenting. Opsi ini digunakan untuk mengambil data dari Slider.

Contoh Penerapan

Secara normal, betapapun lebar dan tinggi jarak/range Slider, nilai akan selalu dimulai dari 0 dan berakhir pada 100. Ini adalah sistem persentase. Jadi, Saya rasa Anda tidak akan kesulitan untuk mengimajinasikannya.

value:30

Menentukan nilai value sebesar 30 akan menempatkan slider handle pada jarak 30% dari keseluruhan lebar bar:

$('#slider').slider({value:30});

Lihat Demo

step:10

Menentukan nilai step sebesar 10 akan membuat langkah slider handle lebih tegas dan terukur. Ini diperlukan jika Anda menginginkan nilai yang akurat sehingga akan mempermudah perhitungan selanjutnya:

$('#slider').slider({step:10});

Lihat Demo

range:"min" dan range:"max"

Menentukan nilai range:"min" akan memberikan dekorasi berupa warna tertentu sesuai dengan temanya pada sisa jarak di belakang slider handle.

Menentukan nilai range:"max" akan memberikan dekorasi berupa warna tertentu sesuai dengan temanya pada sisa jarak di depan slider handle:

$('#slider1').slider({range:"min"});
$('#slider2').slider({range:"max"});

JQuery UI Slider - Range

Lihat Demo

Pengambilan Data

Pengambilan data dapat dilakukan dengan menambahkan opsi slide. Nilainya berupa fungsi JQuery UI Slider yang secara umum dapat dituliskan seperti ini:

slide:function(event, ui) {
    $('#data-1').val(ui.value);
}

ui.value adalah variabel bawaan dari JQuery UI Slider. Nilainya bisa berubah-ubah sesuai dengan pergerakan slider handle. Di sini Saya menggunakan .val() untuk menyisipkan data karena elemen yang akan disisipi adalah elemen <input>. Jika elemen yang akan Anda gunakan berupa elemen biasa dan bukan merupakan elemen-elemen formulir, Anda bisa menggunakan alternatif .text() atau .html() (pelajari di sini).

Kita buat dua buah elemen. Elemen pertama akan menjadi Slider UI dan elemen ke dua akan menjadi pencatat nilai:

<div id='slider'></div>
<input type='text' id='data-1'>

Kemudian kita buat slidernya seperti ini:

$('#slider').slider({
    slide:function(event, ui) {
        $('#data-1').val(ui.value);
    }
});

Kode di atas akan menyisipkan data ui.value ke dalam elemen <input type='text' id='data-1'> setiap kali slider handle digerakkan:

Lihat Demo

min:30 dan max:1000

Menentukan nilai min:30 akan mengubah nilai minimal Slider yang secara normal adalah 0 menjadi 30. Menentukan nilai max:1000 akan mengubah nilai maksimal Slider yang secara normal adalah 100 menjadi 1000.

$('#slider').slider({
    min:30,
    max:1000,
    slide:function(event, ui) {
        $('#data-1').val(ui.value);
    }
});

Manipulasi Nilai Minimal dan Maksimal JQuery UI Slider

Lihat Demo

orientation:"vertical"

orientation:"vertical" digunakan jika Anda menginginkan Slider dengan orientasi vertikal. Slider horizontal memiliki kemampuan melebarkan diri karena memang itulah sifat dasar elemen blok. Namun Slider vertikal tidak bisa begitu. Anda harus menentukan tinggi Slider vertikal sendiri dengan perantara .height() atau cukup mendeklarasikan tinggi dengan nilai tertentu pada selektor CSS elemen yang dimaksud:

Perantara .height()

$('#slider').slider({orientation:"vertical"}).height(300);

Mendeklarasikannya dalam CSS

#slider {height:300px}

$('#slider').slider({orientation:"vertical"})

Lihat Demo

---

Menggabungkan Beberapa Opsi

<h1 id='data-1'>Berat badan Anda?</h1>
<div id='slider'></div>

$('#slider').slider({
    range:"min",
    value:10,
    min:10,
    max:1000,
    slide:function(event, ui) {
        $('#data-1').text(ui.value + ' Kg');
    }
});

Lihat Demo

Slider Berganda

Dalam satu Slider dapat diterapkan lebih dari satu slider handle. Hal ini biasanya digunakan untuk keperluan menentukan nilai minimal dan maksimal. Syarat pertama untuk menciptakan slider berganda adalah dengan menentukan opsi range:true, setelah itu tentukan nilai values berupa dua buah range dalam array.

Opsi value sudah tidak diperlukan lagi di sini karena telah digantikan oleh values. Variabel Slider tidak lagi berupa ui.value namun berubah menjadi ui.values[0] untuk handle pertama dan ui.values[1] untuk handle ke dua.

<div id='slider'></div>
<label for='dataMin'>Minimal: </label><input type='text' id='dataMin' />
<label for='dataMax'>Maksimal: </label><input type='text' id='dataMax' />

$('#slider').slider({
    range:true,
    values:[10, 70],
    slide:function(event, ui) {
        $('#dataMin').val(ui.values[0]);
        $('#dataMax').val(ui.values[1]);
    }
});

Lihat Demo

Konfigurasi JQuery UI Accordion

Salah satu kemampuan JQuery UI yang cukup mengesankan adalah tentang begitu mudahnya kita membangun objek hanya dengan menerapkan fungsi pada elemen yang diinginkan. Di sini Saya akan menjelaskan sedikit (atau lumayan banyak?) mengenai JQuery UI Accordion.

---

Dasar Penggunaan

Sebelum menerapkan fungsi .accordion() pada elemen, pertama-tama Anda buat dulu kerangka objeknya yang secara umum diciptakan dari elemen-elemen berupa header, link dan divisi:

<div id='accordion'>
    <h3><a href='#'>Pemicu 1</a></h3>
    <div>
        ...
    </div>
    <h3><a href='#'>Pemicu 2</a></h3>
    <div>
        ...
    </div>
    <h3><a href='#'>Pemicu 3</a></h3>
    <div>
        ...
    </div>
</div> <!-- end accordion -->

Setelah itu Anda cukup menyeleksi elemen induknya saja kemudian terapkan fungsi .accordion() dan selesai sudah:

$(function() {
    $('#accordion').accordion();
});

Lihat Demo

---

Konfigurasi JQuery UI Accordion

Opsi	Nilai	Deskripsi
active	0, 1, 2, 3, ...	Menentukan panel urutan ke berapa yang akan terbuka saat pertama kali. Urutan pertama dimulai dari 0. (default: 0)
header	"h3"	Tentukan header akordion. Nilainya berupa selektor. (default: otomatis ditentukan oleh script. Elemen pertama akan menjadi header/pemicu dan elemen ke dua akan menjadi panel. Selebihnya akan disusun mengikuti pola tadi secara otomatis)
	"div.header"
fillSpace	true	Pilihan untuk mengatur tinggi akordion agar memenuhi ruangan secara vertikal. (default: false)
	false
icons	{header:"nama-ikon-1", headerSelected:"nama-ikon-2"}	Mengubah ikon default dari widget akordion. header digunakan untuk mengubah ikon pada pemicu dalam keadaan normal, headerSelected digunakan untuk megubah ikon pada pemicu yang sedang aktif. (default: header:"ui-icon-triangle-1-e", headerSelected:"ui-icon-triangle-1-s") Lihat semua nama ikon JQuery UI 1.8.16 »
autoHeight	true	Pilihan untuk menentukan apakah panel-panel akordion akan mengatur tinggi mereka sesuai dengan rata-rata ukuran tinggi terkecil dan ukuran tinggi terbesar atau membiarkan panel mengikuti ukuran konten yang ada di dalamnya. (default: true)
	false
event	"mouseover"	Menentukan bagaimana cara Anda membuka panel (default: click) Pelajari event-event dasar JQuery »

---

Contoh Penerapan

Membuka Panel ke Empat saat Awal Pertama Kunjungan

Urutan panel dimulai dari 0. Menentukan pembukaan panel ke empat sama artinya dengan menuliskan nilai active:3

$('#accordion').accordion({active:3});

Lihat Demo

Menciptakan Header dengan Elemen Lain

Header akordion tidak harus selalu dibuat dengan elemen <h3>. Header juga bisa dibuat dengan elemen lain. Misalnya seperti ini:

<div id='accordion'>
    <div class='header'><a href='#'>Pemicu 1</a></div>
    <div>
        ...
    </div>
    <div class='header'><a href='#'>Pemicu 2</a></div>
    <div>
        ...
    </div>
    <div class='header'><a href='#'>Pemicu 3</a></div>
    <div>
        ...
    </div>
</div> <!-- end accordion -->

$('#accordion').accordion({header:"div.header"});

Opsi ini sebenarnya tidak begitu penting dituliskan, karena script widget accordion sudah bisa menemukan sendiri elemen mana yang akan menjadi header/pemicu dan elemen mana yang akan menjadi panel.

fillSpace:true

Menentukan fillSpace:true akan membuat tinggi akordion menyesuaikan diri dengan tinggi elemen induk. Lebar akordion tidak disertakan ke dalam opsi karena tanpa JavaScript-pun semua elemen blok secara default akan melebarkan diri sesuai dengan lebar elemen induk:

$('#accordion').accordion({fillSpace:true});

Lihat Demo

autoHeight:false

Menentukan autoHeight:false akan membuat tinggi panel akordion menyesuaikan diri dengan konten yang ada di dalamnya. autoHeight:true akan membuat tinggi panel akordion menyesuaikan diri dengan tinggi rata-rata tiap panel akordion:

$('#accordion').accordion({autoHeight:false});

Opsi autoHeight pada UI Accordion

Lihat Demo

Modifikasi Ikon

Caranya sama persis dengan modifikasi ikon pada JQuery UI Button:

$('#accordion').accordion({
    icons: {
        header:"ui-icon-arrowthick-1-e",
        headerSelected:"ui-icon-arrowthick-1-s"
    }
});

Kustomisasi Ikon pada Pemicu Panel Akordion

Lihat Demo Lihat Daftar Ikon

Modifikasi Event

Misalnya, jika Anda menuliskan event:"mouseover" pada braket opsi, maka panel akordion akan terbuka berdasarkan aksi mouseover:

$('#accordion').accordion({event:"mouseover"});

Lihat Demo

Plugin Easing dalam JQuery UI

Sedikit informasi bahwa di dalam framework JQuery UI sudah terdapat plugin Easing 1.3 dan plugin JQuery animate color. Jadi, jika selama ini Anda telah memasang plugin easing JQuery dan animasi warna dan hendak menerapkan JQuery UI (dikhususkan untuk paket lengkap, bukan pecahan-pecahan efek), Anda bisa membuang script Easing dan animasi warna dari lembar kerja:

JQuery UI Sudah Dilengkapi dengan Plugin Easing 1.3

Artikel Terkait

• JQuery UI
• Efek-Efek JQuery UI
• Easing JQuery
• Perkenalan JQuery

JQuery UI Button

JQuery UI Button digunakan untuk memanipulasi elemen menjadi tombol. Target bisa berupa <button>, <a>, <input>, <span> dan <div>. Namun elemen-elemen yang umum dimanipulasi adalah <button>, <a> dan <input>:

Lihat Demo

---

Dasar Penggunaan

Memanipulasi elemen menjadi tombol:

$('#elemen').button();

$('input:submit').button();

$('input:radio').button();

$('a.tombol').button();

Menambahkan konfigurasi:

$('#elemen').button({disabled:true, text:true});

---

Konfigurasi JQuery UI Button

Opsi	Nilai	Deskripsi
disabled	true	Pilihan untuk menonaktifkan tombol. (default: false)
	false
text	true	Pilihan untuk menghilangkan teks jika hanya ingin menampilkan ikon. (default: true)
	false
icons	{primary:"nama-ikon-1", secondary:"nama-ikon-2"}	Menambahkan ikon di samping teks/label tombol. primary digunakan untuk menambahkan ikon sebelum label, secondary digunakan untuk menambahkan ikon setelah label. Lihat semua nama ikon JQuery UI 1.8.16 »
label	"nama label baru"	Memanipulasi nama tombol/label dengan JQuery. Ini akan membuat teks yang tadinya tertulis sebagai nama tombol menjadi berganti dengan teks yang telah ditentukan dalam opsi label

Format Tombol-Tombol JQuery UI Secara Umum

Gambar 1: Dasar

$('#elemen').button();

Gambar 2: Menambahkan Ikon Primer

$('#elemen').button({
    icons:{primary:"ui-icon-locked"}
});

Gambar 3: Menambahkan Ikon Primer dan Menghilangkan Label

$('#elemen').button({
    icons:{primary:"ui-icon-locked"},
    text:false
});

Gambar 4: Menambahkan Ikon Primer dan Sekunder

$('#elemen').button({
    icons:{
        primary:"ui-icon-locked",
        secondary:"ui-icon-carat-2-n-s"
    }
});

Gambar 5: Menambahkan Ikon Primer dan Sekunder dan Menghilangkan Label

$('#elemen').button({
    icons:{
        primary:"ui-icon-locked",
        secondary:"ui-icon-carat-2-n-s"
    },
    text:false
});

Tombol JQuery UI Nonaktif dan dengan Label Baru

Tombol 1: Menonaktifkan Tombol

$('#elemen').button({disabled:true});

Tombol 2: Memanipulasi Label Tombol

$('#elemen').button({label:"Nama Baru"});

JQuery UI .buttonset()

Digunakan untuk mengelompokkan beberapa elemen dalam sebuah elemen induk menjadi sebuah grup tombol:

Lihat Demo

Memanipulasi elemen-elemen Radio dan CheckBox menjadi Grup Tombol

HTML

<!-- Grup Input Radio -->
<form action='...' name='g'>
    <div id='radio'>
        <input id='radio1' name='radio' type='radio' /><label for='radio1'>Opsi 1</label>
        <input checked='checked' id='radio2' name='radio' type='radio' /><label for='radio2'>Opsi 2</label>
        <input id='radio3' name='radio' type='radio' /><label for='radio3'>Opsi 3</label>
    </div>
</form>

<!-- Grup Input Check Box -->
<div id='grup-format'>
    <input type='checkbox' id='check1' /><label for='check1'>B</label>
    <input type='checkbox' id='check2' /><label for='check2'>I</label>
    <input type='checkbox' id='check3' /><label for='check3'>U</label>
</div>

JQuery UI .buttonset()

$(function() {
    //memanipulasi elemen-elemen radio
    $('#radio').buttonset();

    //memanipulasi elemen-elemen checkbox
    $('#grup-format').buttonset();
});

Memanipulasi Elemen Radio dan CheckBox hanya dengan .button()

$(function() {
    $('input:radio, input:checkbox').button();
});

Efek-Efek JQuery UI

Mengingat bahwa JQuery UI adalah plugin, maka sintaks JQuery UI tidak sama dengan sintaks efek dalam JQuery. Bisa dibilang, JQuery UI hanya menyisipkan dirinya di dalam efek JQuery yang umum digunakan.

.show(), .hide() dan .toggle() adalah tiga bagian pokok yang akan selalu Anda pakai saat menjalankan efek JQuery UI. Selain itu ada satu lagi fungsi khusus untuk JQuery UI yaitu .effect()

Berbeda dengan .show(), .hide() dan .toggle() yang dapat mengubah visibilitas elemen, .effect() hanya berfungsi untuk membantu JQuery UI menjalankan animasi tanpa mengubah visibilitas elemen. (Biasanya digunakan untuk efek-efek emosional yang tidak memerlukan penghilangan/pemunculan elemen).

Dasar Penggunaan

Saat Anda menyembunyikan elemen dengan fungsi .hide(), maka Anda akan menuliskannya seperti ini:

$('div').hide(1000);

Sekarang Anda ingin menambahkan efek blind pada elemen yang akan Anda sembunyikan, maka Anda bisa menambahkan efek JQuery UI dengan cara seperti ini:

$('div').hide("blind", 1000);

Setiap efek memiliki beberapa opsi di dalamnya. Misalnya, secara default efek blind akan menutup elemen secara horizontal. Jika Anda ingin menciptakan efek penutupan secara vertikal, Anda tinggal menentukan opsi direction: "vertical" pada parameter opsi. Bagian opsi dibuat setelah nama efek dan dikelompokkan di dalam braket objek:

$('div').hide("blind", {
    direction: "vertical"
}, 1000);

Hal yang sama juga bisa dilakukan untuk .show(), .toggle() dan .effect(). .effect() hanya berguna jika diterapkan pada efek-efek emosional yang tidak memerlukan perubahan visibilitas elemen.

JQuery

$('div').hide(durasi);

JQuery UI

$('div').hide("nama_efek", {opsi1, opsi2, opsi3}, durasi);

Lihat Semua Demo

Lihat semua efeknya terlebih dahulu sebelum mempelajari ini:

Lihat Demo

Efek-Efek JQuery UI

blind

Efek JQuery UI ini tidak jauh berbeda dengan .slideDown() dan .slideUp(). Keistimewaannya adalah dapat diarahkan secara horizontal. Sesuatu yang selama ini tidak bisa dilakukan oleh .slideDown() dan .slideUp()

Opsi	Nilai	Deskripsi
direction	"vertical"	Membuka/menutup elemen secara vertikal
	"horizontal"	Membuka/menutup elemen secara horizontal

$('div').toggle("blind", {
    direction: "horizontal"
}, 1000);

bounce

Efek ini akan membuat elemen bergetar sebanyak opsi yang ditentukan dan akan mengarahkan getaran sesuai dengan arah direksinya.

Opsi	Nilai	Deskripsi
times	1, 2, 3, …	Menentukan jumlah getaran
direction	"up"	Menggetarkan elemen ke atas
	"down"	Menggetarkan elemen ke bawah
	"left"	Menggetarkan elemen ke kiri
	"right"	Menggetarkan elemen ke kanan

$('div').effect("bounce", {
    direction: "up",
    times: 10
}, 1000);

clip

Efek ini akan menutup elemen menuju garis pusat atau membuka elemen dari garis pusat.

Opsi	Nilai	Deskripsi
direction	"horizontal"	Membuka/Menutup elemen dengan gerakan horizontal (garis pusat berupa garis vertikal)
	"vertical"	Membuka/Menutup elemen dengan gerakan vertikal (garis pusat berupa garis horizontal)

$('div').toggle("clip", {
    direction: "horizontal"
}, 1000);

drop

Efek ini akan menampilkan/menyembunyikan elemen dengan efek memudar bersamaan dengan perubahan letak sesuai dengan direksinya.

Opsi	Nilai	Deskripsi
direction	"up"	Perubahan tingkat transparasi dan perpindahan posisi elemen menuju ke atas
	"down"	Perubahan tingkat transparasi dan perpindahan posisi elemen menuju ke bawah
	"left"	Perubahan tingkat transparasi dan perpindahan posisi elemen menuju ke kiri
	"right"	Perubahan tingkat transparasi dan perpindahan posisi elemen menuju ke kanan

$('div').hide("drop", {
    direction: "up"
}, 1000);

explode

Ini adalah efek favorit Saya. Efek ini akan meledakkan elemen!

Opsi	Nilai	Deskripsi
pieces	1, 2, 3, …	Menentukan jumlah potongan (default: 9)

$('div').hide("explode", {
    pieces: 36
}, 1000);

fold

Elemen akan dikenai efek melipat. Batas akhir lipatan bisa ditentukan dalam opsi. Default arah lipatan adalah vertikal kemudian horizontal.

Opsi	Nilai	Deskripsi
size	1, 2, 3, …	Menentukan batas terkecil lipatan (default: 15)
	"10%", "50%" …
horizFirst	true	Menentukan apakah efek akan dimulai dari horizontal terlebih dahulu atau vertikal terlebih dahulu
	false

$('div').hide("fold", {
    size: 10
}, 1000);

highlight

Elemen akan dikenai efek sorotan. Warna sorotan bisa ditentukan dalam opsi. Efek bisa berupa sorotan saja atau berupa sorotan kemudian menghilangkannya.

Opsi	Nilai	Deskripsi
color	"#990000", "#ffa500", …	Menentukan warna sorotan (default: #ffff99)
	"red", "green", …
	"rgb(0, 0, 0)", "rgb(255, 255, 255)" …
mode	"show"	Menentukan apakah setelah elemen dikenai sorotan akan menghilang atau tetap seperti apa adanya (default: show)
	"hide"

$('div').effect("highlight", {
    color: "#990000",
    mode: "hide"
}, 1000);

pulsate

Elemen akan dikenai efek berdenyut. Jumlah denyutan bisa ditentukan dalam opsi.

Opsi	Nilai	Deskripsi
times	1, 2, 3, …	Menentukan banyaknya denyutan

$('div').effect("pulsate", {
    times: 2
}, 1000);

puff

Elemen akan dikenai efek embusan (membesar dan memudar). Besar elemen dapat ditentukan dalam opsi (persentase).

Opsi	Nilai	Deskripsi
percent	300, 400, 450, …	Menentukan persentase perubahan ukuran elemen (default: 150)

$('div').hide("puff", {
    percent: 300
}, 1000);

scale

Efek ini akan menutup elemen dengan efek mengecil/membuka elemen dengan efek membesar.

Opsi	Nilai	Deskripsi
origin	["top", "left"]	Elemen akan mengecil menuju kiri atas/membesar dari kiri atas (default: menuju ke tengah)
	["top", "right"]	Elemen akan mengecil menuju kanan atas/membesar dari kanan atas
	["bottom", "left"]	Elemen akan mengecil menuju kiri bawah/membesar dari kiri bawah
	["bottom", "right"]	Elemen akan mengecil menuju kanan bawah/membesar dari kanan bawah

$('div').toggle("scale", {
    origin: ["top", "left"]
}, 1000);

size

Efek ini akan mengubah ukuran elemen berdasarkan opsi yang telah ditentukan.

Opsi	Nilai	Deskripsi
to	{width: 200, height: 300} // numerik	Ukuran elemen akan berubah sesuai dengan ukuran yang telah ditentukan
	{width: "50%", height: "20%"} // persentase
	{width: "50%", height: 300} // kombinasi

$('div').effect("size", {
    to: {
        width: "50%",
        height: "20%"
    }
}, 1000);

shake

Elemen akan dikenai efek goncangan. Jumlah goncangan dan arah goncangan dapat ditentukan dalam opsi.

Opsi	Nilai	Deskripsi
times	1, 2, 3, …	Menentukan jumlah goncangan
direction	"up"	Goncangan cenderung mengarah ke atas
	"down"	Goncangan cenderung mengarah ke bawah
	"left"	Goncangan cenderung mengarah ke kiri
	"right"	Goncangan cenderung mengarah ke kanan

$('div').effect("shake", {
    times: 7
}, 1000);

slide

Sepintas efeknya tampak sama dengan blind, tetapi sebenarnya ada sebuah perbedaan jika Anda memperhatikannya dengan teliti. blind akan menghilangkan elemen dimulai dari tempat awal gerakan, sedangkan slide akan menghilangkan elemen dimulai dari tempat terakhir gerakan:

Perbedaan Blind dengan Slide.

Opsi	Nilai	Deskripsi
direction	"up"	Bergeser ke atas
	"down"	Bergeser ke bawah
	"left"	Bergeser ke kiri
	"right"	Bergeser ke kanan

$('div').toggle("slide", {
    direction: "left"
}, 1000);

transfer

Efek ini hanya digunakan untuk menunjukkan bahwa sesuatu saling berkaitan. Saat sebuah aksi dilakukan, maka elemen seolah-olah akan menuju ke suatu tempat yang telah ditentukan. Target bisa berupa objek elemen (kelas/ID) dalam selektor JQuery.

Opsi	Nilai	Deskripsi
to	"#foo"	Elemen akan ditransfer menuju elemen dengan ID foo
	".bar"	Elemen akan ditransfer menuju elemen dengan kelas bar

$('div').effect("transfer", {
    to: "#foo"
}, 1000);

JQuery UI

JQuery UI merupakan plugin komponen user interface (hal-hal yang berhubungan dengan antarmuka pengguna) berupa interaksi, widget berfitur lengkap dan efek animasi yang berada di bawah framework JQuery. Setiap komponen dibangun sesuai dengan arsitektur kerja JQuery (menemukan sesuatu, kemudian memanipulasinya) dan memiliki kemampuan untuk menerima tema yang bermacam-macam sesuai dengan keperluan desain — JQuery UI

Sejauh yang Saya pelajari selama ini, dibandingkan dengan kemampuannya sebagai pendukung efek-efek animasi baru yang tidak ada di dalam JQuery, peran JQuery UI lebih mendominasi ke dalam hal-hal yang berhubungan dengan penciptaan aplikasi online dengan standar yang sangat baik:

JQuery UI ThemeRoller

JQuery UI ThemeRoller

Slider, button, dialog box, accordion, tooltip, tabs, date picker, progressbar dan masih banyak lagi. Bahkan juga autocomplete seperti dalam fitur HTML5.

Semuanya begitu lengkap hingga sangat mudah sebenarnya ketika seorang pengembang menemukan konsep aplikasi online, JQuery UI bisa mengatasi beberapa masalah yang tersisa seperti tema, objek, variabel dan termasuk dukungan peramban penuh (setidaknya selalu diusahakan begitu sampai sekarang).

CSS3 Button Generator merupakan salah satu aplikasi yang dibuat dengan JQuery UI.

Contoh Instalasi JQuery UI dalam Bidang Kerja

<link href='jqueryui-theme.css' type='text/css' rel='stylesheet'>
<script src='jquery.js' type='text/javascript'></script>
<script src='jqueryui-1.8.1.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {

  // Lakukan sesuatu di sini...

});
</script>

Google Ajax Libraries API (CDN)

JQuery UI siap pakai dari Google yang dapat digunakan:

Framework JQuery UI

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js'></script>
...
...

dan seterusnya sampai versi terakhir di tahun 2011…

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>

CSS

Revisi CSS mengikuti revisi Framework JQuery UI:

<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/base/jquery-ui.css'>
...
...
<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css'>

Dokumentasi

Perpustakaan ini bergantung kepada JQuery. Anda juga harus memuat JQuery sebelum memuat modul ini. Versi 1.8.3 tidak didokumentasikan karena jangka waktu revisi yang pendek:

Saat Anda mencoba mengakses JQuery UI 1.8.3, yang keluar adalah JQuery UI 1.8.4

Mulai Belajar JQuery UI »

Referensi

• JQuery UI
• Google Libraries API
• Google Libraries API - JQuery UI