NAVIGASI MENU :
TUTORIAL > JQUERY
Membuat Cool Clock (Jam Analog)
Publish: 4 Juli 2013 | Author & Copyright: Johan | Status: FREE tutorial jQuery
Mempercantik tampilan website dengan jam analog bukanlah menjadi hal yang rumit karena terdapat plugins jquery bernama CoolClock. Baiklah, bagaimana membuat / menampilkan Cool Clock (jam analog) tersebut di website kita. Berikut langkah - langkahnya :
Download dulu bahan materi dari Tutorial Cool Clock ini di www.randomibis.com/coolclock
Terdapat 3 file yang harus kalian download yaitu : coolclock.js, moreskins.js dan excanvas.js tempatkan di tempat yang sama dengan file website php / html mu.
1. Setelah itu buat file baru di aplikasi dreamweaver / notepad
Berikut ini contoh penggunaannya :
<html>
<head>
<title>CoolClock Demo</title>
<script src="jquery.js"></script>
<script src="excanvas.js"></script>
<script src="coolclock.js"></script>
<script src="moreskins.js"></script>
</head>
<body>
<canvas style="width: 400px; height: 400px;" height="400" width="400" id="_coolclock_auto_id_0" class="CoolClock:chunkySwiss"></canvas>
</body>
</html>
|
Penjelasan Script :
<script src="jquery.js"></script>
<script src="excanvas.js"></script>
<script src="coolclock.js"></script>
<script src="moreskins.js"></script>
Fungsinya untuk memanggil jquery dari coolclock
<canvas style="width: 400px; height: 400px;" height="400" width="400" id="_coolclock_auto_id_0" class="CoolClock:chunkySwiss"></canvas>
Fungsinya :
| #width = mengatur Lebaran dari clock, sedangkan height mengatur ketinggian clock |
| #id = fungsinya untuk memanggil fungsi jquery coolClock disini chunkySwiss saya beri _coolclock_auto_id_0, jika dalam website nantinya ada 2 atau lebih Clock maka berikan tingkatan id. Contoh : _coolclock_auto_id_1, _coolclock_auto_id_2, dst. |
#class = perintah untuk tampilan coolClock yang diinginkan.
Anda bisa mencoba berkreasi dengan class yang lain seperti swissRail, chunkySwiss, chunkySwissOnBlack, fancy, machine, classic, dll. Silahkan dilihat di moreskin.js |
| Catatan : Perlu diketahui bahwa plugin CoolClock memanfaatkan tag canvas dari HTML5 untuk menampilkan jam analog di browser jadi kurang bagus dan kadang tidak berjalan dengan baik ketika dibuka dengan browser Internet Explorer. Untuk itu kami menyarankan untuk menggunakan browser Chrome, Firefox, atau Opera yang telah mendukung penuh HTML 5. |
Preview Screenshot Hasilnya :
Untuk melihat tampilan yang sebenarnya dan source codenya,
Silahkan Klik Disini
Demikian cara membuat Cool Clock dengan menggunakan jQuery.
Sampai jumpa di tutorial jQuery yang lainnya. Semoga Bermanfaat.
| Share URL |
Share the URL of this Tutorial in IM, Email or post in forums
* Klik Link, copy (ctrl + c) dan paste (ctrl + v) |
Info dan Kontak Penulis
Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Menyukai desain grafis. Saat ini bekerja sebagai freelancer designer grafis
Motto : Berikan yang terbaik, untuk mendapatkan yang terbaik!
Penulis dapat dihubungi via:
Email : johan.felisitas[at]gmail[dot]com
Rekomendasi ilmugrafis
Jasa Desain Grafis Terpercaya
Dapatkan jasa desain grafis berkualitas dari team ilmugrafis
Supported by ilmugrafis indonesia |
