Cara Memasang Plugin Jquery jqClock
Hallo teman-teman balik lagi di panduan Source Code Aplikasi, di panduan kali ini saya akan membahas mengenai Cara Memasang Plugin Jquery jqClock, apa itu jQclock?.
Sebelum membahas mengenai plugin ini, ada banyak sekali plugin jquery yang teman-teman dapat gunakan bagi mempercantik tampilan situs teman-teman semuanya, ada slider, popup image, parallax dan lain-lain, nah di panduan kali ini kita akan belajar cara memasang jquery jqClock yang berfungsi bagi merancang tampilan jam di jendela browser kita, oke teman-teman dapat unduh pluginnya disini.
Bila telah silahkan ekstrak plugin jquerynya, lalu bikin sebuah file didalam folder ekstrakan tadi dan ketikan script berikut :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=Content-type content=text/html; charset=utf-8/>
<title>jqClock</title>
<script src=http://code.jquery.com/jquery-1.7.2.min.js></script>
<script src=js/jqClock.js></script>
<link rel=stylesheet href=css/jqClock.css/>
<style>
#clock .jqc-clock-face {
background-color: #66f;
}
</style>
<script>
jQuery(function () {
jQuery('#clock').clock({
graduations: 12
});
});
</script>
</head>
<body>
<div id=clock></div>
</body>
</html>
Penjelasan dari script diatas ialah pertama-tama saya memanggil core dari plugin jquerynya dengan tag :
<script src=http://code.jquery.com/jquery-1.7.2.min.js></script>
Lalu saya memanggil plugin dari jqClock yang tadi kita telah unduh :
<script src=js/jqClock.js></script>
Setelah itu saya memanggil css dari plugin yang tadi kita unduh :
<link rel=stylesheet href=css/jqClock.css/>
Lalu saya merancang div didalam body dengan di clock:
<div id=clock></div>
Terakhir saya merancang script javascript bagi memanggil id tersebut :
<script>
jQuery(function () {
jQuery('#clock').clock({
graduations: 12
});
});
</script>
Bila telah teman-teman dapat save dan jalankan di browser, lumayan gampang ya teman-teman, oke lumayan demikian dulu panduan kali ini, semoga bermanfaat.
Selamat mencoba.
Sumber https://kursuswebsite.org
