Catatan Hadi : Membuat Button Menggunakan JQuery

Tombol Button banyak sekali digunakan pada website-website, Biasanya banyak ditemukan pada form pendaftaran, form komentar, dan masih banyak lagi. Contohnya jika anda membuka Facebook ataupun Twitter, anda pasti menemukan beberapa button pada website jejaring sosial tersebut. Mungkin beberapa website masih menggunakan button standar. Jika anda ingin mempercantik website yang anda kelola, anda bisa menambahkan jquery pada button anda. Dengan menambahkan jquery tersebut, tombol button pada website anda menjadi jauh lebih menarik dibandingkan sebelumnya.

Jika anda ingin mencoba dan melihat perbandingannya

dari button tanpa jquery dengan button yang menggunakan jquery,

anda bisa mengikuti langkah2 yang saya berikan untuk membuatnya.

Pertama buatlah tampilan standar untuk menampilkan button.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Membuat Button - Blog Tutorial</title>
</head>
<body bgcolor="black"><center>
<font color="white" size="5">Membuat Button Menggunakan JQuery</font>
<div class="demo">

<button>BLOG TUTORIAL</button>

<input type="submit" value="A submit button"/>

<a href="#">PENDAFTARAN ONLINE</a>

</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 tampil output seperti gambar dibawah ini:

Untuk mengubah tampilan tersebut menjadi lebih menarik

anda membutuhkan 4 buah jquery, yaitu:

Jquery-1.6.2.js

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.button.js

dan bberapa kode css.

Anda tidak perlu mengetik panjang kode css tersebut,

karena anda bisa download dilink dibawah ini:

link ini sudah beserta jquery yang kita butuhkan

DOWNLOAD DISINI

sekarang tambahkan skrip berikut untuk memanggil css yang baru saja didownload,

letakan tepat dibawah kode </tittle>

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

selanjutnya tambahkan skrip berikut untuk memanggil jquery yang baru saja didownload,

letakkan tepat 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>

 <script>
 $(function() {
  $( "input:submit, a, button", ".demo" ).button();
  $( "a", ".demo" ).click(function() { return false; });
 });
 </script>

sekarang simpan program anda,

dan coba anda jalankan lagi.

jika berhasil akan keluar output seperti gambar dibawah ini:

lihatlah perbedaanya.

sekarang button anda menjadi jauh lebih menarik.

saat anda klik button tersebut, akan keluar animasi perubahan warna.

bahkan anda bisa mengubah link menjadi button.

Catatan Hadi

Pages

Jumat, 19 April 2013

Membuat Button Menggunakan JQuery

Tidak ada komentar:

Posting Komentar