Cara Memasang Plugin Jquery FlipClock
Hallo teman-teman, bertemu lagi di panduan Source Code Aplikasi, kalau di panduan sebelumnya kita telah belajar mengenai cara memasang plugin jquery jqClock, kali ini kita akan membahas Cara Memasang Plugin Jquery FlipClock,
sesungguhnya hampir sama dengan plugin sebelumnya hanya saja plugin ini berbeda jenisnya, karenanya hasil yang akan diraih pun berbeda, oke sebelum kita praktekan silakan teman teman unduh dulu plugin dari flipclock nya disini.
Apabila telah silakan teman-teman ekstrak isi dari plugin tersebut, lalu bikin 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 yakni:
<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 yakni script pemanggilan css, core dari jquerynya, serta plugin dari jquery tersebut yang telah kita unduh tadi, perlu diingat, pemanggilan plugin mesti sesuai dengan letak dari plugin yang ingin kita panggil.
<div class=clock style=margin:2em;></div>
Ini yakni script htmlnya dimana saya membangun sebuah div dengan class clock.
<script type=text/javascript>
var clock;
$(document).ready(function() {
clock = $('.clock').FlipClock({
clockFace: 'TwelveHourClock'
});
});
</script>
Ini yakni script javascriptnya bagi menjalankan plugin yang kita telah panggil sebelumnya.
seandainya telah save dan lihat hasilnya, oke teman-teman lumayan sekianlah dulu panduan kali ini.
Semoga bermanfaat.
Sumber https://kursuswebsite.org
