Mengenal Fungsi Highlight Effect dan fade Effect jQuery UI
Halo teman – teman semuanya, selamat datang kembali di tips dan trik Source Code Aplikasi. Jumpa kembali dengan saya pada artikel tips dan trik kali ini, di artikel sebelumnya kita telah belajar beberapa kegunaan dari jQuery UI. Dan di kesempatan kali ini kita pun akan belajar mengenai Mengenal Fungsi Highlight Effect dan fade Effect jQuery UI dimana kegunaan ini masih masuk pada kategori effect yaitu Highlight dan fade.
- fade yang berarti luntur, pada kegunaan jQeury UI ini fade menghasilkan berkedip hilang dan muncul di dikala di klik
- Highlight yang pada bahasa Indonesia menyoroti dan hasil dari kegunaan ini di pada jQuery UI ialah berkedip clip dan ada warna di dikala perpindahan clip nya.
Bagus, sekarang ini kita implementasikan Mengenal Fungsi Highlight Effect dan fade Effect jQuery UI teman – teman siapkan text editornya dan copy script html nya di bawah ini
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Mengenal Manfaat Highlight Effect dan fade Effect jQuery UI </title>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id=toggle></div>
</body>
</html>
Lalu masukkan css nya
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
Kemudian save dengan nama index.html, langkah berikutnya kita berikan script jQuery nya. Sebelumnya kita load terlebih dahulu library jQuery dan jQuery UI nya
<link rel=stylesheet href=http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css>
<script src=http://code.jquery.com/jquery-1.12.4.js></script>
<script src=http://code.jquery.com/ui/1.12.1/jquery-ui.js></script>
Dan masukkan script jQuery UI degan kegunaan fade
<script>
$( document ).click(function() {
$( #toggle ).toggle( highlight );
});
</script>
Kalau telah save dan jalankan di browsernya, karenanya hasilnya seperti gambar di bawah ini
Kemudian teman – teman klik, karenanya sekiranya berhasil hasilnya kotak akan berkedip hilang dan muncul sekiranya di klik, kemudian kita ganti dengan Highlight teman – teman ketikkan seperti di bawah ini
<script>
$( document ).click(function() {
$( #toggle ).toggle( highlight );
});
</script>
Kalau telah save dan refresh di browsernya, lalu teman – teman klik di kotak karenanya hasilnya berkedip clip dan ada warna di dikala perpindahan clip nya. Bagaimana..?? Simple dan gampang bukan dan pun hasilnya lumayan menarik, bagus saya rasa sekianlah dulu di artikel kali ini mengenai Mengenal Fungsi Highlight Effect dan fade Effect jQuery UI kita berjumpa kembali di tips dan trik yang akan datang. Semoga bermanfaat dan menjadi tambahan pengetahuan mengenai kegunaan – kegunaan jQuery UI nya.
Terimkasih dan hingga jumpa.
Sumber https://kursuswebsite.org
