Latest Post
Tampilkan postingan dengan label jquery. Tampilkan semua postingan
Tampilkan postingan dengan label jquery. Tampilkan semua postingan
Membuat Menu Accordion Pada Website
Written By Unknown on Sabtu, 26 Oktober 2013 | 10.42
Menu Accordion merupakan teknik yang ada pada JQuery UI yang digunakan untuk mengelompokan kontent-kontent pada website berdasarkan kategori yang ada, selain itu dengan menggunakan menu accordion akan menghemat space pada website anda, dan website anda akan lebih terstruktur. Sebagai contoh disini kita akan membuat menu accordion, dimana pada menu itu terdapat 3 buah fungsi, yaitu profile, polling, dan komentar. dimana setiap menu bisa kita pindahkan posisinya dengan melalui drag pada menu.
Bayangkan jika kita tidak menggunakan menu accordion ini, dan space website kita sudah penuh. mungkn anda akan bingung meletakan fungsi profle, polling dan komentar ini dimana.
Pertama buatlah program untuk menampilkan fungsi profile, polling, dan kirim komentar.
<html>
<head>
<title>Algoritma-cyber.blogspot.com | MenuAccordion</title>
</head>
<body bgcolor="black">
<form action="aksi.php">
<center>
<h2><font color="white">PROGRAMMING AREA</font></h2>
<div id="accordion" style="width: 350px;">
<div>
<h3><b><a href="algoritma-cyber.blogspot.com">PROFILE</a></b></h3>
<div><br>
<img src="gambar\65889_4264212530088_621816755_n.jpg"
width="100"><br>Hadi Kurniawan seorang alumni dari IPB,
dan sekarang sedang mengeleguti bidang web programming,networking, dan Hacking</p>
</div>
</div>
<div>
<h3><a href="algoritma-cyber.blogspot.com">POLLING</a></h3>
<div>Penilaian mengenai web ini<br>
<input type="radio" name="bagus">Bagus<br>
<input type="radio" name="buruk">Buruk<br>
<input type="radio" name="standar">Standard<br>
<input type="submit" value="kirim">
</div>
</div>
<div>
<h3><a href="algoritma-cyber.blogspot.com">KIRIM KOMENTAR</a></h3>
<div><table>
<tr><td>Nama</td> <td>:</td> <td><input type="text" name="nama"></td></tr>
<tr><td>Komentar</td><td>:</td><td> <textarea name="komentar"></textarea></td></tr>
</table>
<input type="submit" value="kirim">
<input type="reset" value="hapus">
</div>
</div>
</div>
</body>
</html>
Jika anda jalankan program tersebut,
akan keluar output seperti gambar dibawah ini
akan keluar 3 menu yaitu: profile, polling, dan kirim komentar
untuk menambahakn menu accordion pada 3 fungsi tersebut.
pertama anda harus memiliki 7 library JQuery terlebih dahulu, yang dapat anda download melalui link dibawah ini
password: hadi
setelah itu tambahakn skrip untuk memanggil jquery tersebut.
tambahakn tepat dibawah kode <head>
selanjutnya tambahkan javascript berikut ini tepat dibawah skrip untuk memanggil jquery
sekarang coba anda jalankan programny lagi,
jika berhasil, maka akan keluar output seperti gambar dibawah ini:
Jika anda klik polling dan kirim komentar, maka akan tampil seperti ini:
Sekarang coba anda drag menu kirim komentar kepaling atas,
maka menu komentar tersebut akan pindah menjadi posisi pertama
tambahakn tepat dibawah kode <head>
<link rel="stylesheet" href="jquery/base/jquery.ui.all.css">
<script src="jquery/jquery.js"></script>
<script src="jquery/jquery.ui.core.js"></script>
<script src="jquery/jquery.ui.widget.js"></script>
<script src="jquery/jquery.ui.accordion.js"></script>
<script src="jquery/jquery.ui.mouse.js"></script>
<script src="jquery/jquery.ui.sortable.js"></script>
selanjutnya tambahkan javascript berikut ini tepat dibawah skrip untuk memanggil jquery
<script type="text/javascript">
$(function() {
var stop = false;
$( "#accordion h3" ).click(function( event ) {
if ( stop ) {
event.stopImmediatePropagation();
event.preventDefault();
stop = false;
}
});
$( "#accordion" )
.accordion({
header: "> div > h3"
})
.sortable({
axis: "y",
handle: "h3",
stop: function() {
stop = true;
}
});
});
</script>
sekarang coba anda jalankan programny lagi,
jika berhasil, maka akan keluar output seperti gambar dibawah ini:
Jika anda klik polling dan kirim komentar, maka akan tampil seperti ini:
Sekarang coba anda drag menu kirim komentar kepaling atas,
maka menu komentar tersebut akan pindah menjadi posisi pertama
Membuat Tooltip Pada Gambar
Written By Unknown on Rabu, 23 Oktober 2013 | 21.49
Tooltip merupakan info atau keterangan yang akan tampil pada gambar, dimana ketika kursor mouse menyorot suatu gambar, maka pada gambar tersebut akan muncul keterangan. Teknik ini akan bermanfaat agar gambar pada website anda menjadi lebih hidup dengan adanya keterangan pada gambar tersebut.
Untuk membuatnya, kita akan menggunakan library dari JQury yaitu JQuery-tool-min.js.
untuk mendapatkan library tersebut, anda bisa mendownloadnya melalui link dibawah ini
DOWNLOAD DISINI
Selanjutnya buatlah programnya terlebih dahulu untuk menampilkan gambar
<html>
<head>
<title>Algoritma-cyber.blogspot.com - Tooltip pada gambar</title>
</head>
<body bgcolor="black"><center>
<h2><font color="white">Membuat Tooltip Pada Gambar</font></h2>
<div style="position: absolute; display:none;" id="tampil"></div>
<div id="gambar">
<img src="gambar/542173_4264150768544_1165075416_n.jpg" title="Kunjungi Blog Tutorial: algoritma-cyber.blogspot.com">
</div>
</body>
</html>
Program tersebut akan menghasilkan output seperti gambar dibawah ini
Jika anda sorot, tentunya belum menghasilkan apa-apa, karena program tersebut hanya menampilkan gambar saja.
sekarang siapkan gambar yang akan dijadikan tempat untuk keterangan pada gambar
#tampil {
background:transparent url(../gambar/black_arrow.png);
font-size:14px;
height:60px;
width:160px;
padding:25px;
color:white;
}
#gambar img {
cursor:pointer;
margin:10 80px;
width:300;
}
body {
padding:50px 50px;
}
sekarang, kembali pada program yang pertama,
tambahakn skript untuk memanggil css yang baru saja dibuat, tepat dibawah kode <head>
<link rel="stylesheet" href="jquery/tooltip.css" type="text/css">
selanjutnya tambahkan skript untuk memanggil library jquery yang baru saja kita download, tepat dibawah kode untuk memanggil css
<link rel="stylesheet" href="jquery/tooltip.css" type="text/css">
selnjutnya tambahakn javascript tepat dibawah kode tersebut.
<script type="text/javascript">
$(document).ready(function(){
$("#gambar img[title]").tooltip('#tampil');
});
</script>
simpan program anda,
dan coba anda jalankan, jika berhasil akan menghasilkan output seperti dibawah ini, tooltip ini akan muncul ketika mouse sedang menyorot gambar
