Fungsi Toggle Pada Jquery UI
Halo teman-teman, apa kabar semuanya. Semoga seluruh sehat selalu dan mempunyai hati yang gembira, berjumpa lagi dengan saya. Di artikel kali ini kita akan mempraktekkan Fungsi Toggle Pada Jquery UI dimana ada satu guna yaitu guna “fold” bagi memberikan togel lebih atraktive. Kalau di klik tombol karenanya toggle akan menjalankan slide dengan urutannya. Oke seketika saja teman-teman siapkan code editornya dan copy script dibawah ini
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Toggle</title>
<style>
div {
height: 300px;
width: 500px;
background: orange;
border: 1px solid #000;
}
</style>
</head>
<body>
<center>
<button>Klik Togle</button>
<div></div>
</center>
</body>
</html>
Dan pastekan script di atas ini di code editornya, lalu save dengan nama index.html kemudian run di browsernya. Karenanya akan menghasilkan output seperti gambar di bawah ini
Langkah berikutnya kita berikan guna Jquery nya, teman-teman jangan lupa sertakan atau tambahkan library Jquery dan Jquery UI nya di pada tag <head>
<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 tinggal kita berikan guna togle nya
<script>
$( button ).click(function() {
$( div ).toggle(2000);
});
</script>
Save dan refreas di browser, klik di tombol. Karenanya ketika di klik toggle akan menjalankan fungsinya dengan mengecil dan menghilang lalu secara otomatis akan membesar kembali seperti seluruh. Nah kita berikan sedikit modifikasi dengan guna “fold” supaya tombol lebih bermanfaat, toggle akan dikendalikan oleh tombolnya. Teman-teman tambahkan guna “fold” nya
Kemudian save dan refreas di browsernya, dan tekan di tombol. Karenanya sekiranya diklik tombol baru akan menjalankan slide toggle nya dan otomatis telah tak berfungsi lagi dengan kita berikan guna “fold” jadi tombol lebih bermanfaat dengan keberadaannya. Bagus demikianlah dulu di artikel mengenai Fungsi Toggle Pada Jquery UI hingga jumpa di artikel berikutnya. Semoga bermanfaat bagi tambahan pengetahuannya didalam mempelajari fungsi-fungsi Jquery atau Jquery UI. Terimakasih
Baca pun artikel mengenai Cara Membuat List Input Menggunakan HTML5
Sumber https://kursuswebsite.org
