Catatan Hadi : Membuat Radio Menggunakan JQuery

Sebelumnya saya pernah menulis aritkel yang berjudul membuat button menggunakan jquery, kali ini kita masih berhubungan dengan button, hanya saja kali ini sebuah radio yang akan kita ubah menjadi button menggunakan jquery. Jika anda membuka suatu website yang biasanya pada pendaftaran, contohnya saja yahoo, jika kita ingin mendaftarkan diri. kadang ada beberapa pilihan yang harus kita pilih, dan kita hanya bisa memilih salah satu dari semua itu. Biasanya radio tersebut masih dalam bentuk standar. Jika anda ingin mengubah bentuk radio tersebut menjadi seperti tombol buttom. Anda bisa menggunakan trik ini.

Bukalah notepad++ anda.

dan buatlah program sederhana untuk menampilkan radio.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>jQuery UI Button - Radios</title>
 
</head>
<body bgcolor="black">
<center><h2><font color="white"> Membuat Radio Menggunakan JQuery </font></h2>
<div class="demo">

<form>
 <div id="radio">
  <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
  <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
  <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
 </div>
</form>

</div>


<div class="demo-description">
<p><font color="white">Blog Tutorial - algoritma-cyber.blogspot.com </font></p>
</div>
</body>
</html>

Jika anda jalankan program tersebut.

akan keluar output seperti gambar dibawah ini:

Selanjutnya anda membutuhkan beberapa library jquery dan kode css.

jika anda malas membuat cssnya.

anda bisa download css tersebut + jquerynya dilink dibawah ni:

DOWNLOAD DISINI

Setelah itu tambahakn skrip berikut untuk memanggil css yang baru saja anda download.

letakan tepat dbawah kode </title>

<link rel="stylesheet" href="../base/jquery.ui.all.css">
<link rel="stylesheet" href="../demos.css">

setelah itu tambahkan skrip berikut untuk memanggil jquery yang baru saja didownload.

letakan dibawah kode css tersebut.

<script src="../jquery-1.6.2.js"></script>
 <script src="../jquery.ui.core.js"></script>
 <script src="../jquery.ui.widget.js"></script>
 <script src="../jquery.ui.button.js"></script>

sekarang langkah terakhir tambahkan javaskript tepat dibawah kode jquery tadi.

<script>
 $(function() {
  $( "#radio" ).buttonset();
 });
 </script>

Simpan program anda

dan sekarang coba anda jalankan lagi.

jika berhasil akan keluar output sperti gambar dibawah ini:

Catatan Hadi

Pages

Jumat, 19 April 2013

Membuat Radio Menggunakan JQuery

Tidak ada komentar:

Posting Komentar