Tutorial Membuat Prakiraan Cuaca Dan Fungsi Accordion Menggunakan jQuery Lengkap

Setelah kita memabahas tentang cara Membuat Cool Clock (Jam Analog) Dan jqClock (Jam Digital) Menggunakan jQuery kali ini melanjutkan lagi tentang plugin dari stand alone yang selanjutnya yaitu membuat prakiraan cuaca dan fungsi accordion menggunakan jquery.

Untuk membuat tampilan website anda semakin menarik sebaiknya kita juga harus memperhatikan desain yang akan digunakan dalam web kita nanti nya. Karna hal tersebut juga menjadi pengaruh yang baik untuk menarik viewer mengunjungi website anda. Nah para sahabat programer maupun calon programer mari kita simak uraian dibawah ini tentang script dan penjelasan membuat tampilan prakiraan cuaca dan efek accordion.

Contents show

Membuat Tampilan zWeatherFeed (Prakiraan Cuaca)

Prakiraan cuaca seluruh kota di dunia dapat diakses di website http://weather.com. Untuk menampilkan prakiraan cuaca tersebut di website kita, jQuery menyediakan plugin zWeatherFeed bisa didownload di –
http://www.zazar.net/developers/jquery/zweatherfccd

Plugin zWeatherFeed hanya terdapat satu file, yaitu zweatherfeed.min.js dan tentu saja harus ditambah dengan library utama jQuery (jquery.js). Berikut contoh penggunaan skrip zWeatherFeed.

Lihat Script Cuaca.html

<html>
<head>
<script src=”jquery.js” ></script>
<script src=” jquery.zweatherfeed.min.js“></script>
<script type=”text/javascript”>
$(document).ready(function(){
$ (“#cuaca“) .weatherfeed([‘IDXX0022′,’UKXX0061’]);
}) ;
</script>
</head>
<body> <div id=”cuaca“></div> </body>
</html>

sebelumnya, pastikan komputer Anda terhubung ke Internet (dalam keadaan online), karena pengambilan data prakiraan cuaca langsung ke website http://weather.com. Sekarang coba jalankan skrip cuaca.html di browser, Lihat gambar dibawah ini:

Note :
Dalam skrip cuaca.html disebutkan kode IDXX0022 untuk prakiraan cuaca kota. Terus bagaimana mengetahui kode untuk prakiraan cuaca kota Anda? Silahkan kunjungi website http://weather.com. lalu masukkan nama kota Anda pada bagian Search, nanti akan tampil kodenya.

Membuat Jquery Easy Accordion (Horizontal Accordion)

Pada umumnya komponen Accordion ditampilkan dalam bentuk vertikal, namun kali ini kita akan membuat tampilan accordion secara horizontal. Salah satu plugin untuk horizontal accordion adalah jQuery Easy Accordion yang bisu Anda download secara gratis di http://www.madeincima.eu.
Plugin jQuery Easy Accordion terdiri dari dua file, yaitu jquery.easyAccordion.min.ii dan easyAccordion.css serta tentu saja harus didukung/ditambah dengan library utarrm jQuery (jquery.js). Berikut contoh penggunaannya:

Lihat Script Accordion.html

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”easyAccordion.css” /’ <script src=”jquery.js” ></script>
<script src=” jquery.easyAccordion.min.js“></script>
<script type=”text/javascript”>
$(document).ready(function(){
$ ( ‘#accordion-2’) .easyAccordion (( autostart: false
)) ;
)) ;
</script>
</head>
<body>
<div id=”accordion-2″>
<dl>
<dt>Feature</dt>
<dd><h2>Backlit LCD Display</h2>
<P><img src=”images/imgl.png” />
The high-resolution,9-7-inch
LED-backlist IPS Display on ipad is
remarkably crisp and vivid……………..</p></dd>
<dt>Slide Kedua</dt>
<dd><h2>0ver the moon!</h2>
<p><img src=”images/img2 .png” />
Aenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula dolor . </p></dd>
</dl>
</body>
</html>

Sekarang coba jalankan skrip Accordion.html, maka akan tampil empat buah slide dalam bentuk accordion. Lihat gambar berikut.

Yap.. itulah penjelasan yanag bisa kami sampaikan, semoga artikel ini bermanfaat. Dan, sampai jumpa di artikel selanjutnya…

Lihat Artikel Selanjutnya :