jquery
TRANSCRIPT
JQuery
JQuery adalah javascript library, jQuery mempunyai semboyan “write less, do more”. jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript.Library jQuery mempunyai kemampuan :
a. Kemudahan mengakses elemen-elemen HTML b. Memanipulasi elemen HTML c. Memanipulasi CSS d. Penanganan event HTML e. Efek-efek javascript dan animasi f. Modifikasi HTML DOM g. AJAX
1.Drop Down
Membuat menu dropdown tidaklah sesulit seperti dulu, sekarang ini kita dapat membuat menu dropdown dengan sangat mudah. Ya jQuery solusinya, dengan plugins jQuery yang bernama Superfish. Superfish adalah plugins jQuery untuk membuat menu dropdown yang cukup populer. Superfish merupakan pengembangan dari suckerfish.
Oke, kali ini saya mau sedikit berbagi bagaimana cara yang sangat sederhana saya lakukan untuk membuat menu dropdown. Ini sudah saya lakukan untuk web application yang telah saya buat.Dalam contoh ini saya akan membuat menu dropdown bertingkat (multilevel) menu. Silahkan lihat contoh simple nya…
1 2 3 4 5 6 7 8 9 10 11 12
<ul class="sf-menu"> <li><a href="?module=home">Home</a></li> <li><a href="#">Data</a> <ul> <li><a href="?module=user">User</a></li> <li><a href="?module=part">Storage</a></li> <li><a href="?module=customer">Customer</a></li> <li><a href="?module=component">Component</a></li> <li><a href="?module=location">Location</a></li> <li><a href="?module=remove-parts">Remove Parts Record</a></li> </ul> </li>
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
<li><a href="?module=joblist">Job List</a></li> <li><a href="?module=search">Search Mode</a></li> <li><a href="?module=change-location">Change Location</a></li> <li><a href="#">Export Data</a> <ul> <li><a href="#">Reusable Parts</a> <ul> <li><a href="?module=export&act=select-date&mod=11&idc=1">Parts In</a></li> <li><a href="?module=export&act=select-date&mod=12&idc=1">Parts Change Location</a></li> <li><a href="?module=export&act=select-date&mod=13">Pickup Parts</a></li> </ul> </li> <li><a href="#">Non Reusable Parts</a> <ul> <li><a href="?module=export&act=select-date&mod=11&idc=2">Parts In</a></li> <li><a href="?module=export&act=select-date&mod=12&idc=2">Parts Change Location</a></li> <li><a href="?module=export&act=select-date&mod=23">Completion Parts</a></li> </ul> </li> <li><a href="?module=export-all">Export All</a></li> </ul> </li> <li><a href="#">Parts Status</a> <ul> <li><a href="?module=status">Search Status</a></li> <li><a href="?module=scrap">Due Date Scrap Status</a></li> <li><a href="?module=scraped">Scrapped Status</a></li> </ul> </li> <li><a href="../logout.php">Logout</a></li> </ul>
Dari contoh tag HTML diatas, kita akan membuat menu tampilan menjadi seperti gambar dibawah ini.
Contoh menu dropdown bertingkat (multilevel).
Caranya sangat mudah, kita hanya akan memanggil plugins superfish untuk di load di dalam script kita.
1 2 3
<script src="../js/jquery-1.4.js" type="text/javascript"></script> <script src="../js/superfish.js"></script> <script src="../js/hoverIntent.js"></script>
2. JQuery Lightbox JQuery Lightbox dalam pengertian ialah "Apabila gambar itu diklik maka gambar tersebut akan tampak menonjol dari pada body web/blog atau juga bisa diartikan image yang kita klik itu terdapat isi/query. Sebuah blog jika diberi JQuery Lightbox maka, akan terkesan lebih Professional, sering kali saya mengatakan bahwa blog yang terdapat scipting seperti ini blog itu bisa dikatakan sudah ber-standart website. JQuery Lightbox ini sangat cocok jika dipakai untuk web/blog yang sering menampilakan foto-foto.
Lightbox CSS3 ini dilengkapi dengan navigasi untuk menampilkan seluruh bagian gambar dalam Popup ( Panel lightbox ). Seperti halnya pada Lightbox dengan versi jQuery, Gambar besar popup ini akan ditampilkan pada layar, sampai Anda mengklik icon atau salah satu link
dalam deskripsi gambar tersebut. Hover gambar besar di sisi kiri akan menampilkan tombol navigasi "SEBELUMNYA" dan hover gambar di sisi kanan akan menampilkan tombol navigasi "BERIKUTNYA".
Demo :
Silahkan letakan cursor pada gambar, kemudian klik...
PREVIOUS NEXT
Caption for Image #1 Image 1/2
PREVIOUS
More Detail:
Letakan kode CSS berikut ini ke dalam tag <head> template anda dan kode HTML kedalam tag <body> atau dimanapun anda ingin menampilkan Lighbox ini pada halaman website anda.
Kode CSS: <style type="text/css"> /* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. Copyright (c) 2007-2012 Buku Catatan si Ugi. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ .starlightImages {padding-left:10px;} .aBox img {border:0;} .bBox {display:none;} .starLight {display:table; position:fixed; top:0; left:-9999px; width:100%; height:100%; z-index:500; background:rgba(0,0,0,0.5);} .starLight .holder {position:fixed; width:100%; height:100%; left:0; top:0; z-index:100; text-align:center; display:table-cell; opacity:0; -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; } .starLight .frame {display:inline-block; margin:50px auto; padding:15px; background:#fff; position:relative; text-align:left; font-family:arial, sans-serif; border-radius:10px 10px 0 0; } .starLight .frame .clickLeft {position:absolute; left:15px; top:15px; right:50%; bottom:15px; background:url(trans.gif); z-index:110;} .starLight .frame .clickLeft .previous {opacity:0; position:absolute; width:100px; text-align:center; height:40px; top:120px; left:0; background:rgba(64,64,64,0.6); font:bold 15px/40px arial, sans-serif;
text-decoration:none; color:#fff; border-radius:0 10px 10px 0; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .starLight .frame .clickLeft:hover .previous {opacity:1;} .starLight .frame .clickRight {position:absolute; right:15px; top:15px; left:50%; bottom:15px; background:url(trans.gif); z-index:110;} .starLight .frame .clickRight .next {opacity:0; position:absolute; width:100px; text-align:center; height:40px; top:120px; right:0; background:rgba(64,64,64,0.6); font:bold 15px/40px arial, sans-serif; text-decoration:none; color:#fff; border-radius:10px 0 0 10px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .starLight .frame .clickRight:hover .next {opacity:1;} .starLight .frame .caption {position:absolute; margin-top:-150px; left:0; right:0; padding:5px 15px; background:#fff; border-radius: 0 0 10px 10px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; transition-delay: 1s; -o-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -webkit-transition-delay: 1s; } .starLight .frame .caption .shadow {left:15px; right:15px; height:60px; position:absolute; bottom:5px; background:#aaa; box-shadow:0 10px 20px rgba(0,0,0,0.5); z-index:-1; border-radius: 100px/50px; } .starLight .frame .caption h4 {font-size:18px; margin:0; padding:3px 0; color:#333;} .starLight .frame .caption p {font-size:12px; color:#444; margin:0; padding:3px 0;} .starLight .frame .caption h4 span {float:right; font-size:9px;} .starLight .large {display:inline-block; position:relative; z-index:100; border:1px solid #888; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; }
.starLight .frame .close {display:block; width:48px; height:48px; position:absolute; top:-24px; right:-24px; z-index:200; opacity:0; -webkit-transition: 1s 1s; -moz-transition: 1s 1s; -o-transition: 1s 1s; transition: 1s 1s; } .starLight .frame .close img {border:0;} #t1:target ~ .starLight, #t2:target ~ .starLight, #t3:target ~ .starLight, #t4:target ~ .starLight, #t5:target ~ .starLight, #t6:target ~ .starLight {left:0;} #t1:target ~ .starLight .h1, #t2:target ~ .starLight .h2, #t3:target ~ .starLight .h3, #t4:target ~ .starLight .h4, #t5:target ~ .starLight .h5, #t6:target ~ .starLight .h6 {opacity:1; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } #t1:target ~ .starLight .h1 .close, #t2:target ~ .starLight .h2 .close, #t3:target ~ .starLight .h3 .close, #t4:target ~ .starLight .h4 .close, #t5:target ~ .starLight .h5 .close, #t6:target ~ .starLight .h6 .close {opacity:1;} #t1:target ~ .starLight .h1 .caption, #t2:target ~ .starLight .h2 .caption, #t3:target ~ .starLight .h3 .caption, #t4:target ~ .starLight .h4 .caption, #t5:target ~ .starLight .h5 .caption, #t6:target ~ .starLight .h6 .caption
{margin-top:10px;} </style>
Kode HTML:
<div id="info"> <div class="starlightImages"> <a href="#t1" class="aBox"><img src="html5/pic1t.jpg" alt="" /></a> <a href="#t2" class="aBox"><img src="html5/pic2t.jpg" alt="" /></a> <a href="#t3" class="aBox"><img src="html5/pic3t.jpg" alt="" /></a> <a href="#t4" class="aBox"><img src="html5/pic4t.jpg" alt="" /></a> <a href="#t5" class="aBox"><img src="html5/pic5t.jpg" alt="" /></a> <a href="#t6" class="aBox"><img src="html5/pic6t.jpg" alt="" /></a> </div> <b id="t1" class="bBox"></b><b id="t2" class="bBox"></b><b id="t3" class="bBox"></b><b id="t4" class="bBox"></b><b id="t5" class="bBox"></b><b id="t6" class="bBox"></b> <div class="starLight"> <div class="holder h1"> <div class="frame"> <div class="clickLeft"><a href="#t6" class="previous">PREVIOUS</a></div><div class="clickRight"><a href="#t2" class="next">NEXT</a></div> <img class="large" src="html5/pic1.jpg" /> <div class="caption"><div class="shadow"></div>
<h4>Caption for Image #1 <span>Image 1/6</span></h4>
<p>Followed by lines of descriptive text that can contain <a href="index.html">links</a> if required.<br />Hover the image for 'previous/next' buttons or click the close icon at the top right to close this panel.</p>
</div> <a class="close" href="#url"><img src="html5/close.png" alt="Close" /></a> </div> </div> <div class="holder h2"> <div class="frame"> <div class="clickLeft"><a href="#t1" class="previous">PREVIOUS</a></div><div class="clickRight"><a href="#t3" class="next">NEXT</a></div> <img class="large" src="html5/pic2.jpg" /> <div class="caption"><div class="shadow"></div>
<h4>Caption for Image #2 <span>Image 2/6</span></h4> <p>Followed by lines of descriptive text that can contain <a href="index.html">links</a> if required.</p> </div> <a class="close" href="#url"><img src="html5/close.png" alt="Close" /></a> </div> </div> <div class="holder h3"> <div class="frame"> <div class="clickLeft"><a href="#t2" class="previous">PREVIOUS</a></div><div class="clickRight"><a href="#t4" class="next">NEXT</a></div> <img class="large" src="html5/pic3.jpg" /> <div class="caption"><div class="shadow"></div> <h4>Caption for Image #3 <span>Image 3/6</span></h4> <p>Followed by lines of descriptive text that can contain <a href="index.html">links</a> if required.</p> </div> <a class="close" href="#url"><img src="html5/close.png" alt="Close" /></a> </div> </div> <div class="holder h4"> <div class="frame"> <div class="clickLeft"><a href="#t3" class="previous">PREVIOUS</a></div><div class="clickRight"><a href="#t5" class="next">NEXT</a></div> <img class="large" src="html5/pic4.jpg" /> <div class="caption"><div class="shadow"></div> <h4>Caption for Image #4 <span>Image 4/6</span></h4> <p>Followed by lines of descriptive text that can contain <a href="index.html">links</a> if required.</p> </div> <a class="close" href="#url"><img src="html5/close.png" alt="Close" /></a> </div> </div> <div class="holder h5"> <div class="frame"> <div class="clickLeft"><a href="#t4" class="previous">PREVIOUS</a></div><div class="clickRight"><a href="#t6" class="next">NEXT</a></div> <img class="large" src="html5/pic5.jpg" /> <div class="caption"><div class="shadow"></div>
<h4>Caption for Image #5 <span>Image 5/6</span></h4> <p>Followed by lines of descriptive text that can contain <a href="index.html">links</a> if required.</p> </div> <a class="close" href="#url"><img src="html5/close.png" alt="Close" /></a> </div> </div> <div class="holder h6"> <div class="frame"> <div class="clickLeft"><a href="#t5" class="previous">PREVIOUS</a></div><div class="clickRight"><a href="#t1" class="next">NEXT</a></div> <img class="large" src="html5/pic6.jpg" /> <div class="caption"><div class="shadow"></div> <h4>Caption for Image #6 <span>Image 6/6</span></h4> <p>Followed by lines of descriptive text that can contain <a href="index.html">links</a> if required.</p> </div> <a class="close" href="#url"><img src="html5/close.png" alt="Close" /></a> </div> </div> </div> <p class="info">Copyright ©2012 Buku Catatan si Ugi</p> <br /> </div> <!-- end of info -->
Keterangan:
Text berwarna ^ Kuning: Gambar Thumbnail yang akan digunakan. ^ Merah: Gambar besar yang akan ditampilkan dalam panel lightbox. ^ Biru: Title Gambar. ^ Pink: Text Deskripsi. ^ Hijau: Gambar icon "Close" untuk menutup Popup ( Panel Lightbox ).
3. JQuery Gooey Menu
JQuery Gooey menu, tab menu dengan efek css yang dapat menciptakan latar belakang melekat dan lengket seperti Gel yang berjalan. Efek dapat bergerak mengikuti gerakan cursor saat memilih suatu item menu dan efek Gel pun bergerak menuju item menu terpilih yang sedang aktif.
Cara Memasang jQuery Gooey Menu
Langkah pertama:
Dowload kode CSS dan Javascript berikut ini, kemudian letakan diatas kode </head> gooeymenu.css gooeymenu.js
Untuk memasangnya jangan lupa memberikan tag <pembuka> dan </penutup>, contohnya seperti ini:
Untuk memasang kode Css:
<style type='text/css'>
<!---gooeymenu.css--->
</style>
Untuk memasang kode Js:
<script type='text/javascript'> //<![CDATA[
<!---gooeymenu.js--->
//]]></script>
Atau terlebih dahulu anda dapat meng-upload kode css dan Js tersebut ke Hosting File, hingga hasilnya akan seperti ini: <link href='https://sites.google.com/site/archivesiugi/javascr/gooeymenu.css' rel='stylesheet' type='text/css'/> <script src='https://sites.google.com/site/archivesiugi/javascr/gooeymenu.js' type='text/javascript'/>
</head>
Keterangan:
Letakan kedua script tersebut tepat diatas kode </head>, Contoh lihat diatas.
Langkah Kedua: Gunakan contoh script menu berikut untuk membuat jQuery Gooey Menu
<ul id="gooeymenu2" class="gelbuttonmenu"> <li><a href="http://www.dynamicdrive.com/">Home</a></li> <li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li> <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li> <li><a href="http://tools.dynamicdrive.com">Tools</a></li> <li><a href="http://www.javascriptkit.com/" class="selected">JavaScript</a></li> <li><a href="http://www.cssdrive.com">CSS Gallery</a></li> </ul> <script> gooeymenu.setup({id:'gooeymenu2', selectitem:1, fx:'swing'}) </script> Selesai.