Membuat efek bouncy dengan jQuery

Setelah lama rehat karena kesibukan yang menyita waktu , kali ini saya sempatkan untuk menulis llagi , masih seputar jQuery dan berbagai macam efek yang luar biasa didalamnya. kali ini saya akan mencoba memberikan tutorial untuk membuat efek Bouncy (lompat) dengan menggunakan jQuery. Siapkan mata dan mari coding 🙂

Hal pertama yang kita buat adalah file html, yang didalamnya akan kita buat 4 buah kota (div), dan ketika user mengklik kotak tersebut , maka efek dari jQuery akan muncul dengan arah dan kecepatan tertentu. Ketikan script HTML di bawah ini

<table>
<tr>
<td><div id="bouncy1">klik Lompat Ke Atas</div></td>
<td><div id="bouncy2">klik Lompat Ke Kiri</div></td>
</tr>
<tr>
<td><div id="bouncy3">klik Lompat Ke Kanan</div></td>
<td><div id="bouncy4">klik Lompat Ke Bawah</div></td>
</tr>
</table>
<br/>
<input id="bounceAll" type="button" value="Lompat Semua!"/>

Setelah kode HTML diatas ditulis ,langkah selanjutnya adalah membuat file CSS untuk membuat element div menjadi warna-warni, berikut kode CSSnya :

div {
padding:5px;
width:150px;
height:100px;
text-align:center;
}
#bouncy1 {
background-color:#FFEE88;
}
#bouncy2 {
background-color:#EE88FF;
}
#bouncy3 {
background-color:#EE8888;
}
#bouncy4 {
background-color:#88EEFF;
}

Selanjutnya  kita menuliskan kode jQuerynya .Saya akan menggunakan library jQuery untuk tutorial ini, dan juga menyertakan jQuery UI untuk efek bouncing. Pada tutorial kali ini saya akan menggunakan JQuery yang ada di server google.

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

Jika belum mempunyai Jquery , bisa download langsung disini dan JqueryUI disini.  copy code dibawah ini dan masukkan ke file HTML

$(function(){

//menambahkan efek bounce kedalam elemen div
$('#bouncy1').click(function () {
$(this).effect("bounce", { times:5 }, 300);
});

$('#bouncy2').click(function () {
$(this).effect("bounce", { direction:'left', times:5 }, 300);
});

$('#bouncy3').click(function () {
$(this).effect("bounce", { direction:'right', times:5 }, 300);
});

$('#bouncy4').click(function () {
$(this).effect("bounce", { direction:'down', times:5 }, 300);
});

//kalo diklik maka div akan lompat semua
$("#bounceAll").click(function(){
$("div").click();
});
});

Tutorial yang simple dan sederhana , tapi semoga bermanfaat teman, selamat mencoba dan happy coding 🙂

Membuat simple accordion menu menggunakan jQuery

Selamat pagi ,blog saya sudah dipenuhi sarang laba-laba ni, lama tidak di update :D. Okelah pada hari yang santai ini mari kita membuat menu accordion yang sangat simple. Yang kita butuhkan antara lain: komputer, browser, jQuery dan niat :). Okelah mari kita coding.

Accordion adalah menu dengan beberapa efek animasi. Accordion memiliki beberapa item menu baris atas yang ketika diklik maka akan membuka opsi sub menu. Ketika menu lain tingkat atas yang dipilih, buka menu lainnya secara otomatis akan menutup dan menyimpan area layar yang berguna.Pada tutorial ini kita akan menggunakan efek Slide in / Slide Out , agar terkesan lebih realistis 😀

Membuat Datepicker sederhana dengan Codeigniter dan Jquery

Anda pasti tahu dan tak asing lagi dengan istilah datepicker, baiklah kalo belum mengerti apa itu Datepicker itu saya jelasin dengan singkat deh. Datepicker adalah penginputan tanggal layaknya sebuah kalender. Dengan adanya datepicker,halaman web anda pasti akan terlihat interaktif. Adapun plugin datepicker dapat didownload disini. Baiklah tanpa banyak basa-basi mari kita coding

Pertama,copy dulu folder datepicker yang telah didownload ke folder root Codeigniter anda, localhost/codeigniter. Kemudian, kita buat file controller dengan nama cdatepicker.php dan simpan dalam folder system/application/controllers.  Adapun skrip kode  nya adalah sebagai berikut :

<?php

/**
 * @author kristian
 * @copyright 2012
 */

class Cdatepicker extends Controller{

 function index(){

 $this->load->view('datepicker');
 }
}
?>

Penjelasan kode :

1. class Cdatepicker extends controller : Deklarasi untuk mencipatakan class controller bernama Cdatepicker

2. function index() : untuk membuat function index (pertama kali diakses)

3. $this->load->view(‘datepicker’); : untuk me-load file view bernama datepicker.php

Karena pada function index tersebut dilakukan load file view bernama datepicker.php, maka buatlah file view dengan nama tersebut dan letakkan dalam folder system/application/views ,  dan kemudian ketikkan skrip berikut :

Datepicker.php

<html>
<head>
<title>Datepicker</title>
<link href="<?php echo base_url(); ?>datepicker/rfnet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo base_url(); ?>datepicker/datetimepicker_css.js"></script>
</head>
<body>
<table>
<tr>
<td>Tanggal Lahir</td>
<td><a href="javascript:NewCssCal('ttl','ddmmyyyy')"><input type="text" name="ttl" id="ttl" size="20" />
<img src="<?php echo base_url(); ?>datepicker/images/cal.gif" width="16" height="16" alt="Pilih tanggal" />
</a></td>
</tr>
</table>
</body>

</html>

Buka browser lalu ketikkan http://localhost/codeigniter/index.php/cdatepicker, kemudian coba klik pada input teks atau ikon disampingnya. maka akan muncul kalender(datepicker),lalu klik pada salah satu tanggal. berikut hasil dari datepicker :

Berikut tutorial singkat ,membuatdatepicker dengan codeigniter dan jquery, semoga bermanfaat dan happy coding selalu 🙂