Menggunakan Fungsi Highlight Effect Pada Jquery UI
Halo teman-teman apa kabar semuanya..?!? Pastinya sehat selalu ya, Di artikel kali ini kita akan belajar Menggunakan Fungsi Highlight Effect Pada Jquery UI dimana ketika di klik karenanya kotak akan menjalankan slow hideen dan slow show mirip dengan hover di css. Dengan menggunakan kegunaan Highlight kita telah mempunyai sebuah hover yang atraktif, oke mari kita mulai. Teman-teman siapkan code editornya lalu copy script di bawah ini
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Highlight</title>
<style>
*{margin:0; padding:0}
body{background:gray}
.kotak{width: 500px; height: 300px; background: orange; margin:auto; margin-top:30px}
</style>
</head>
<body>
<div class=kotak></div>
</body>
</html>
Lalu pastekan script di atas ini di code editornya, kemudian save dengan nama index.html dan buka di browsernya. Karenanya akan menghasilkan output seperti gambar di bawah ini
Langkah berikutnya kita berikan kegunaan Highlight nya, teman-teman jangan lupa sertakan library Jquery dan Jquery UI nya didalam tag <head> atau dapat pun copy script di bawah ini
<link rel=stylesheet href=http://code.jquery.com/ui/1.12.0/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.0/jquery-ui.js></script>
Kalau telah teman-teman tambahkan kegunaan Highlight nya, ketikkan sama persis gambar di bawah ini tepat di bawah tag <div>
Kemudian save dan refreas di browsernya, nah kegunaan Highlight telah berhasil dibut. Karenanya apabila di klik kotak akan menjalankan slow hidden dan ketika di klik lagi akan menjalankan slow show. Amat gampang bukan, bagus mungkin lumayan demikian dulu di artikel mengenai Menggunakan Fungsi Highlight Effect Pada Jquery UI hingga jumpa di artikel berikutnya. Semoga bermanfaat dan Terimakasih.
Indahnya berbagi 🙂
Baca pun artikel tentang membuat table stripped dengan nth child’
Sumber https://kursuswebsite.org
