Menggunakan Fungsi clip Pada Jquery UI
Halo teman-teman, apa kabar segala,,?? Pastinya sehat selalu ya dan makin bagus setiap harinya. Berjumpa lagi dengan saya, di artikel ini saya akan menjelaskan mengenai Menggunakan Fungsi clip Pada Jquery UI (user interface), clip berfungsi bagi merancang slide dari tengah ke sisi atas dan sisi bawah dengan di bantu manfaat toggle. Oke di latihan kali ini kita akan merancang slide clip dengan menggunakan gambar. Teman-teman siapkan code editornya dan gambar yang nanti kita akan gunakan, kemudian copy script di bawah ini
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>clip demo</title>
<style>
#toggle {
width: 400px;
height: 250px;
background: #ccc;
}
</style>
</head>
<body>
<img id=toggle src=clip.jpg>
ody>
</html>
Lalu paste kan di pada code editornya, setelah itu save dengan nama index.html dan open to browse atau run di browsernya. Karenanya akan menghasilkan output seperti gambar di bawah ini
Langkah berikutnya, kita berikan manfaat clip di gambar, teman-teman jangan lupa sertakan library Jquery dan Jquery UI nya di pada tag <head>. Dapat pun copy script di bawah ini
<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>
Seandainya telah, tambahkan script di bawah ini bagi menjalankan manfaat clip nya.
<script>
$( document ).click(function() {
$( #toggle ).toggle( clip );
});
</script>
Setelah itu di save dan refreas di browsernya, karenanya gambar akan di slade clip. Bagus mungkin demikianlah dulu di artikel kali ini mengenai Menggunakan Fungsi clip Pada Jquery UI mudah-mudahan bermanfaat dan menjadi tambahan ilmu bagi teman-teman. Hingga jumpa di artikel berikutnya dan Terimakasih
Indahnya berbagi 🙂
Baca pun artikel mengenai Fungsi Bounce Pada Jquery UI (user interface)
Sumber https://kursuswebsite.org
