Cara Memasang Plugin Jquery FlipClock

Hallo teman-teman, bertemu lagi pada tutorial dumet school, kalau pada tutorial sebelumnya kita telah belajar tentang cara memasang plugin jquery jqClock, kali ini kita akan membahas Cara Memasang Plugin Jquery FlipClock,
sebenarnya hampir sama dengan plugin sebelumnya hanya saja plugin ini berbeda jenisnya, maka hasil yang akan dihasilkan juga berbeda, oke sebelum kita praktekan silakan teman teman download dulu plugin dari flipclock nya disini.

Jika sudah silakan teman-teman ekstrak isi dari plugin tersebut, lalu buat sebuah file dan ketikan script berikut :

<html>
	<head>
		<link rel="stylesheet" href="../compiled/flipclock.css">

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

		<script src="../compiled/flipclock.js"></script>		
	</head>
	<body>
		<div class="clock" style="margin:2em;"></div>

		<script type="text/javascript">
			var clock;
			
			$(document).ready(function() {
				clock = $('.clock').FlipClock({
					clockFace: 'TwelveHourClock'
				});
			});
		</script>
		
	</body>
</html>

Penjelasan dari script diatas adalah:

<link rel="stylesheet" href="../compiled/flipclock.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../compiled/flipclock.js"></script>

Ini adalah script pemanggilan css, core dari jquerynya, serta plugin dari jquery tersebut yang sudah kita download tadi, perlu diingat, pemanggilan plugin harus sesuai dengan letak dari plugin yang ingin kita panggil.

<div class="clock" style="margin:2em;"></div>

Ini adalah script htmlnya dimana saya membuat sebuah div dengan class clock.

<script type="text/javascript">
var clock;
			
$(document).ready(function() {
	clock = $('.clock').FlipClock({
	   clockFace: 'TwelveHourClock'
	});
});
</script>

Ini adalah script javascriptnya untuk menjalankan plugin yang kita telah panggil sebelumnya.

jika sudah save dan lihat hasilnya, oke teman-teman cukup sekian dulu tutorial kali ini.

Semoga bermanfaat.

Kategori