Pengertian jQuery. Apa Arti jQuery

jQuerymerupakan library Javascript yang akan membuat aplikasi web yang kita buat menjadi lebih menarik, baik dari sisi user-interface, proses maupun interaktivitas. Dengan JQuery, suatu halaman web yang menjadi aplikasi web, jika dilihat sourcenya, akan terlihat seperti dokumen HTML biasa; tidak ada kode JavaScript yang terlihat langsung. Teknik pemrograman web seperti ini disebut sebagai unobstrusive JavaScript programming.

         
           jQuery

Merupakan salah satu librari yang membuat program web di sisi klien, tidak terlihat sebagai program JavaScript biasa, yang harus secara eksplisit disisipkan pada dokumen web. Pada teknik pemrograman sisi klien dengan menggunakan JavaScript biasa, setiap elemen yang akan memiliki event, akan secara eksplisit terlihat ada event yang dilekatkan pada elemen tersebut.

Salah satu buku yang cukup lengkap membahas mengenai jQueryadalah buku yang berjudul "Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques". Buku setebal kurang lebih 350 halaman ini mengulas secara tuntas mengenai jQuery, dimulai dari kelebihan dan daya tarik jQuery itu sendiri, sampai teknik-teknik memanfaatkan jQuery yang disertai contoh-contoh sederhana.

Buku ini ditulis oleh Jonathan Chaffer dan Karl Swedberg yang terbit pertama kalinya tahun 2007 (setahun setelah jQuery dirilis). Jonathan Chaffer adalah Chief Technology Officer of Structure Interactive yang berlokasi di Michigan. Jonathan juga aktif sebagai bagian dari tim pengembang CMS open source yaitu Drupal. Sementara itu Karl Swedberg adalah seorang web developer di perusahaan yang sama dengan Jonathan yaitu Structure Interactive. Karl yang sebelum menjadi web developer adalah seorang guru bahasa Inggris, fokus dalam hal web-standard, semantic CSS, dan unobtrusive JavaScript.

Buku Learning jQuery isinya cukup mudah dipahami dan dapat menjadi referensi bagi para pemula maupun yang sudah mahir di bidang web development. Buku ini cocok untuk para designer web maupun programmer web.

Garis besar dari isi dari buku ini antara lain menjelaskan mengenai:
Sekilas tentang jQuery. Termasuk didalamnya dijelaskan mengenai kelebihan jQuery, dimana bisa mendapatkan jQuery dan contoh sederhana penerapan jQuery. Isinya secara singkat saya rangkum dalam artikel saya sebelumnya.Selectors. Di bagian kedua ini dijelaskan mengenai DOM (Document Object Model) dan CSS, serta bagaimana penggunaan jQuery dalam mengatur tampilan (CSS + jQuery). Bagian ini cocok dibaca bagi para web designer yang sudah terbiasa dengan CSS.

Events. Selanjutnya buku ini menjelaskan mengenai event-event yang didukung oleh jQuery. Event-event tersebut akan meningkatkan interaktivitas web dengan pengunjung. Tersedia juga contoh-contoh menarik di bab ini.

Effects. Pada bab 4 buku ini, dijelaskan mengenai teknik-teknik jQuery untuk mengatur efek tampilan halaman web, termasuk didalamnya animasi-animasi yang bisa dilakukan oleh jQuery. Diantara animasi yang sering digunakan adalah fading dan sliding. Contoh sederhananya dapat dilihat disini.

DOM Manipulation. Di bagian ini dipaparkan mengenai bagaimana memanipulasi sebagian isi halaman web melalui jQuery. Manipulasi dapat berupa penambahan, penggantian, maupun penghapusan bagian tertentu dari halaman.

AJAX. Bagaimana jika jQuerydigabungkan dengan konsep AJAX? Di bagian keenam ini dijelaskan mengenai hal tersebut. Secara default, jQuery mendukung dengan baik konsep AJAX, baik format data teks, XML, maupun JSON.

Table Manipulation. Manipulasi data dalam tabel seperti sorting, seleksi, paging dapat dilakukan dengan cukup mudah dengan jQuery. Penasaran? Silahkan pelajari pada bab ini mengenai manipulasi tabel.

Forms with Function. Bagian ini membahas mengenai manipulasi form inputan termasuk tampilan dan bagaimana melakukan validasi form ala jQuery.

Shufflers and Rotators. Manipulasi images seperti untuk membuat galery foto dipaparkan di bagian ini.

Plugins. Bagian terakhir dari buku ini membahas mengenai plugin, yang merupakan salah satu kemampuan jQuery yang luar biasa. Disini diberikan beberapa plugin jQuery yang banyak digunakan serta dijelaskan juga mengenai bagaimana membuat plugin sendiri.


jQuery dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL. Microsoft dan Nokia telah mengumumkan akan mengemas jQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time.

Semoga Bermanfaat Buat Sobat..

Buka Tutup Panel info bagian

Kali ini tutorial cara buat panel info, sebelumnya juga saya posting panel info yang ada diatas kiri pojok blog saya, tapi bedannya yang ini buka tutup otomatis, sebenarnya bukan hanya panel info yang bisa di masukan di dalam situ buku tamu, dll juga bisa, ksempatan Kali ini masalah panel info ..


Langsung aja ke tutorial nya :
1. Login ke Blogger dengan akun anda.
2. Kemudian pilih Rancangan >> Edit HTML
3. Seperti biasa klik Download Template Lengkap biar aman
4. Jangan lupa centang Expand Template Widget
5. Selanjutnya cari kode </body>

taruh kode di bawah ini diatas kode </body>

KODE

<style type='text/css'>#panelinfojaparus2 {z-index: 1000;background:-moz-linear-gradient(top, #CFFBC1, #000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #CFFBC1;-moz-box-shadow:-2px -2px 8px #FCFFBC1, 2px 2px 20px #CFFBC1;-webkit-box-shadow:-2px -2px 8px #CFFBC1, 2px 2px 20px #FF0000;width:400px;position: fixed;top:50px;left:0;margin-left:-325px;border:1px solid #444;background-position:top right no-repeat;height:35px;font:11px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#panelinfojaparus2{-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;} #panelinfojaparus2:hover{width:410px;opacity:1.0;margin-left:0;}.panelinfo {border:1px solid #444;width:290px; margin:0px 90px 10px 10px;background:#000;color:#CFFBC1; border-radius :20px; padding:5px 0;-moz-border-radius:20px; -webkit-border-radius:20px;-o-transition:all 2s ease-in;-moz-transition:all 2s ease-in;-webkit-transition:all 2s ease-in;opacity:0.2;}.panelinfo:hover{opacity:1.0;box-shadow:1px 1px 15px #000; -moz-box-shadow: 1px 1px 15px #000; -webkit-box-shadow: 1px 1px 15px #000;background: #000;}.panelinfo2 {margin:5px 10px;padding:0px 8px 10px;color:#FFFFFF;overflow:hidden;height:450px;}.japarus007 {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}.japarus2 ul.bom {margin: 0; padding: 0;}.panelinfo2 li {margin-left:20px;}.panelinfo2 li a {color: #CFFBC1; line-height: 4px; font-size: 11px;font-weight: bold; text-decoration:none;}.panelinfo2 li a:hover {color: red;text-shadow: 0 1px 1px #000;}.panelinfo2 h2 { font: 18px Droid Serif;font-weight:bold;padding:0 8px;color: #CFFBC1;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #CFFBC1;}.japarussentuh {font-size:22px;font-weight:bold;font-family:Arial Narrow;float:right;margin: 3px 10px 0 0;-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}.japarussentuh:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: greend;}</style>




<div id='panelinfojaparus2'><span class='japarussentuh'>Info</span>
<div class='panelinfo'><div class='panelinfo2 japarus007'>
<h2>sekilas tentang diriku</h2>
<li><a href='http://japarus.xtgem.com/aboutme.html' target='_blank' title='klik aja, g mengandung unsur haram ko, wkkkkkk'><img alt='about me' src='http://japaruspunya.xtgem.com/image/Enter.gif'/></a></li>


<h2>contact</h2>
<center>
<li><a href='ymsgr:sendIM?japarus_hdl' title='yahoo mesengger'><img alt='yahoo' src='http://japaruspunya.xtgem.com/image/y_button.png1301885017'/></a></li>
<li><a href='http://twitter.com/japarus' title='twitter ku'><img alt='Twitter' src='http://japaruspunya.xtgem.com/image/tw_btn.png1301885017'/></a></li>
<li><a href='http://www.facebook.com/japarus' title='facebook ku'><img alt='Facebook' src='http://japaruspunya.xtgem.com/image/fb_btn.png1301885017'/></a></li>
<li><a href='http://www.koprol.com/users/japarus' title='koprol'><img alt='koprol' src='http://japaruspunya.xtgem.com/image/koprol.jpg'/></a></li>
<li><a href='http://profiles.friendster.com/gwhanyanewbie' title='friendster'><img alt='friendster' src='http://japaruspunya.xtgem.com/image/friendster.jpg'/></a></li></center>
</div>
</div>
</div>

6. simpan ....

Catatan:

Dibagian URL facebook dan lain-lain di ganti dengan url anda

Sumber http:// www.japarus .com.

Latihan Menggunakan jQuery

Bagaimana menggunakan jQuery?

• Download library jQuery langsung dari websitenya, Di http://jquery.com . Pilih versi jQuery yang diinginkan.

• Simpan file jquery, misalnya di D:\latihan. Lalu buat dokumen baru (*.html) yang isinya sebagai berikut:

 <html>
<head><title>Latihan jQuerytitle>
<head>
<body>
<body>
<html>

• Selanjutnya kita panggil library jQuery diantara tag head.

<html>
<head><title>Latihan jQuerytitle>
<script type="text/javascript" src="jquery-1.4.js">script>
<head>
<body>
<body>
<html>

• Sebagai contoh, kita akan membuat dua buah tombol yang akan mengontrol sebuah gambar, berikut contoh skripnya:

 <html>
<head><title>Latihan jQuerytitle>
<script type="text/javascript" src="jquery-1.4.js">script>
head>
<body>
<button class="semmbunyi">Sembunyikanbutton>
<button class="tampil">Tampilkanbutton>
<p><img id="foto" src="fotomu.jpg">p>
body>
html>

• Kemudian buat skrip jQuery dan sesuaikan dengan id atau class yang telah kita definisikan pada langkah sebelumnya, berikut contoh skripnya:

 <html>
<head><title>Latihan jQuerytitle>
<script type="text/javascript" src="jquery-1.4.js">script>
<script type="text/javascript">
$(document).ready(function(){
$(".sembunyi").click(function(){
$.("#foto").hide("slow");
});
$(".tampil").click(function(){
$.("#foto").show("slow");
});
});
script>
head>
<body>
<button class="semmbunyi">Sembunyikanbutton>
<button class="tampil">Tampilkanbutton>
<p><img id="foto" src="fotomu.jpg">p>
body>
html>

Lalu simpan filenya dengan nama javascript.html. Untuk melihat hasilnya, tinggal dobel-klik saja pada filenya, maka akan dibuka pada browser default kita, Atau Klik Kanan Open with firefox

Lihat Hasil nya, Selamat Mencoba Sobat..

Sweet Menu Navigasi 2011 "Slide out effect jquery"

Sweet Menu Navigasi 2011 "Slide out effect jquery" Tapi Kali ini saya tulis yg model original nya:

Liat Gambar

Berikut langkah - langkah nya

1. Login ke Akun Blogger anda masing-masing

2. Klik Design atau Rancangan, kemudian pilih edit html

3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)

4. Cari kode : <head>

5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode <head> kalau tidak bisa taruh dibawahnya saja tidak apa.

KODE CSS

<script type="text/javascript" src="http://playground.adambecker.info/sweet-menu/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://playground.adambecker.info/sweet-menu/jquery.easing.js"></script>
<script type="text/javascript" src="http://playground.adambecker.info/sweet-menu/jquery.sweet-menu-1.0.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$('#backMenu').sweetMenu({
top: 40,
padding: 8,
iconSize: 48,
easing: 'easeOutBounce',
duration: 500,
icons: [
'http://playground.adambecker.info/sweet-menu/images/back.png'
]
});

$('#exampleMenu').sweetMenu({
top: 200,
padding: 8,
iconSize: 48,
easing: 'easeOutBounce',
duration: 500,
icons: [
'http://playground.adambecker.info/sweet-menu/images/home.png',
'http://playground.adambecker.info/sweet-menu/images/comments.png',
'http://playground.adambecker.info/sweet-menu/images/red_heart.png',
'http://playground.adambecker.info/sweet-menu/images/male_user.png',
'http://playground.adambecker.info/sweet-menu/images/yellow_mail.png',

]
});
});
</script>

<style type="text/css">
body
{
background: #000000 url('images/bg.jpg') top center no-repeat;
}

.sweetMenuAnchor{
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
color: #0071bb;
font-size: 24px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
font-family: arial;
text-decoration: none;
background-color: #888888;
opacity: 0.6;
}

.sweetMenuAnchor span{
display: block;
padding-top: 10px;
}

h1
{
display: block;
text-align: center;
font-size: 48px;
color: #ffffff;
text-shadow: 0px 0px 12px #000000;
font-family: "Trebuchet MS";
}
</style>

6. Setelah Itu Beralihlah dan cari kode <body>
Jika Sudah, taruh kode dibawah ini sebelum atau diatas kode <body>

KODE

<ul id="backMenu">

</ul>
<ul id="exampleMenu">
<li><a href="alamat url">Beranda</a></li>
<li><a href="alamat url">Blog</a></li>
<li><a href="alamat url">Favorit</a></li>
<li><a href="alamat url">Tentang saya</a></li>
<li><a href="alamat url">Kontak</a></li>

</ul>

7. Silahkan anda priview, apabila semua berjalan dengan sempurna barulah anda save

Keterangan:
Untuk Merubah warna ikon dll bisa di edit di bagian css nya ..
Sumber http://www.japarus.com/

Selamat Mencoba ... 

jquery Link Bergoyang saat Disentuh mouse

Pada postingan minggu lalu saya dah posting tentang cara membuat link bergetar saat mouse menyorot, pada postingan kali ini saya menjelaskan cara buat link goyang-goyang saat mouse menyorot, karna dia dah cape bergetar getar  

1. Login Ke Blog Mas bro
2. Pada Dasbor Pilih, Rancangan, Kemudian EDIT HTML
3. Cari kode / head

TARUH KODE INI DIATAS /head:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'> 
$(document).ready(function() { 
$(&#39;a&#39;).hover(function() { //mouse in 
$(this).animate({ marginLeft: &#39;12px&#39; }, 400); 
}, function() { //mouse out 
$(this).animate({ marginLeft: 0 }, 400); 
}); 
});</script>

Selamat Mencoba Sobat....

Apa itu jQuery?

JQuery pertama dirilis pada tahun 2006 oleh John Resig. Dan kini jQuery telah digunakan oleh beberapa situs yang canggih nan terkenal seperti: Google, Facebook, Twitter, Youtube, Nokia dan masih banyak lagi. Tidak hanya situs interlokal, lokal juga ada kok yang telah memakai jQuery, contohnya:VivaNews, Studio 21, Kompas dan lain-lain. Selengkapnya bisa dilihat di http://docs.jquery.com/Sites_Using_jQuery.

Apa itu jQuery?

jQuery sendiri adalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript. Atau dalam kesimpulannya jQuery menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya “Write less, do more”. 

Mengapa memilih jQuery?

Ada beberapa alasan mengapa lebih baik menggunakan jQuery daripada library lainnya, antara lain:

• jQuery telah digunakan oleh website-website raksasa 

• Kompatibel dengan hampir seluruh browser

• Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3)

• Dokumentasi dan tutorialnya lengkap, bisa langsung dilihat dihttp://jquery.com

• Didukung oleh banyak komunitas

• Disupport oleh plugin yang lengkap

• Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb

• Open source atau Free

• jQuery lebih diminati oleh para developer web saat ini

Apa kemampuan yang dimiliki jQuery?

Berikut beberapa kemampuan yang dimiliki yang dapat membuat kita berdecak kagum:

• Mempermudah akses dan manipulasi elemen tertentu pada dokumen.

• Mempermudah modifikasi/perubahan tampilan halaman web.

• Mempersingkat Ajax (Asynchronous Javacsript and XML).

• Memiliki API (Application Programming Interface).

• Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.

• Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah. 

jQuery Chatbox Slide Vertikal di blog

Untuk memasang chatbox slide vertikal dengan jQuery ini sangat mudah, anda tinggal menambahkan kode-kode HTML yang nanti akan saya uraikan secara lengkap 

Gambar di atas saya pasang bukan chatbox, kalau mau lihat demo tinggal terserah sobat bloger aja mau di tarus script HTMLapa aja terserah sobat.

Langsung aja :

1. Login ke Blogger dengan akun anda.
2. Kemudian pilih Rancangan >> Edit HTML
3. Seperti biasa klik Download Template Lengkap biar aman
4. Jangan lupa centang Expand Template Widget
5. Selanjutnya cari kode ]]></b:skin>, jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin> tersebut:

KODE

 
.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}

.panel p{color:#ccc;margin:0 0 15px;padding:0}

.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}

.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}

a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}

a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}

a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}

.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}

.colleft{float:left;width:130px;line-height:22px}

.colright{float:right;width:130px;line-height:22px}

a:focus{outline:none}

.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}

.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}

.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

6.Setelah itu cari kode </head> setelah itu copas kode dibawah ini dan taruh diatasnya.

KODE

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

Jika anda telah memasang script Jquery ini sebelumnya anda dapat meninggalkan langkah diatas

7. Masukan kode Javascript berikut dibawah script jQuery tadi:

Judul Spoiler:

<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

9. Kemudian cari lagi kode berikut ini <body>
10. Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya

KODE

<div class="panel">

Kode script ChatBox Anda atau bisa diganti dengan kode apa saja

</div>
<a class="trigger" href="">ChatBox</a>

11. Dan yang terakhir Save Template anda. 

Selamat Mencoba Sobat...