Hallo teman-teman balik lagi pada tutorial dumet school, pada tutorial kali ini saya akan membahas tentang Cara Memasang Plugin Jquery jqClock, apa itu jQclock?.
Sebelum membahas tentang plugin ini, ada banyak sekali plugin jquery yang teman-teman bisa gunakan untuk mempercantik tampilan website teman-teman semuanya, ada slider, popup image, parallax dan lain-lain, nah pada tutorial kali ini kita akan belajar cara memasang jquery jqClock yang berfungsi untuk membuat tampilan jam pada jendela browser kita, oke teman-teman bisa download pluginnya disini.
Jika sudah silahkan ekstrak plugin jquerynya, lalu buat 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 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 sudah download :
<script src="js/jqClock.js"></script>
Setelah itu saya memanggil css dari plugin yang tadi kita download :
<link rel="stylesheet" href="css/jqClock.css"/>
Lalu saya membuat div didalam body dengan di clock:
<div id="clock"></div>
Terakhir saya membuat script javascript untuk memanggil id tersebut :
<script>
jQuery(function () {
jQuery('#clock').clock({
graduations: 12
});
});
</script>Jika sudah teman-teman bisa save dan jalankan pada browser, cukup mudah ya teman-teman, oke cukup sekian dulu tutorial kali ini, semoga bermanfaat.
Selamat mencoba.
The post Cara Memasang Plugin Jquery jqClock appeared first on Kursus Website Terbaik.