Mengendalikan Komponen Bootstrap dengan Function jQuery Berisi Paramater

Beberapa hari kemarin saya kembali ingin menata kembali tampilan aplikasi mobile yang selama ini menggunakan elemen dari ionic. Kali ini saya ingin membuat elemen-elemen dengan memanfaatkan bootstrap.

Kebetulan saya saat ini berusaha menghemat quota internet yang mungkin segera habis karena kebanyakan buat nonton video di channel Youtube. Syukur karena saya sudah pernah mendownload Bootstrap versi 4.xx sebelumnya, maka saya manfaatkan saja file tersebut yang saya pikir masih relevan dengan kebutuhan saat ini. Walaupun saat menulis artikel ini, sudah keluar versi lebih baru.

Setelah mengetik beberapa baris kode HTML dan CSS, saya jadi ingin menyertakan jQuery juga ke dalam kode agar hasilnya lebih nyata seperti aplikasi yang sebenarnya. Padahal sebagaimana rencana diawal bahwa saya cuma ingin membuat theme saja.

mengendalikan bootstrap dengan fungsi parameter jquery

Setelah membuat tampilan HTML maka, agar dapat berinteraksi dengan aksi pengguna maka saya menggunakan jQuery yang sudah saya panggil. Ditengah proses menulis saya mendapat ide, karena beberapa elemen memiliki tugas yang sama maka saya buat menjadi function saja kemudian saya jadi kepikiran agar function tersebut akan aktif dengan trigger elemen yang mengirim parameter kepada function.

Secara sederhana ilustrasi kodenya sebagai berikut:

<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="css/bootstrap.min.css"/>
	<link rel="stylesheet" href="css/font-awesome.min.css"/>
	<style>
	body{
        padding: 10px;
        align-items: center;
        }
	</style>
	</head>
	<body class="bg-light">
	<div class="card">
	  <div class="card-body">
		<h5 class="card-title">Card title <span class="badge badge-secondary" data-toggle="tooltip" data-html="true" data-placement="top" title="<em>Item</em> baru ">New</span></h5>
		<p class="card-text">Some quick example text to build on <span >the card title</span> and make up the bulk of the card's content.</p>
		<button class="btn btn-primary" onclick="toggle('#collapseExample')" ><i class="icon-light icon-search"></i> Go somewhere</button>
		<button class="btn btn-success" onclick="tampil('.modal')" data-toggle="tooltip" data-html="true" data-placement="top" title="<em>Tooltip</em> <u>dengan</u> <b>HTML</b>"><i class="icon-spin icon-gear"></i> Klik</button>
	  </div>
	</div>
	
	<div class="collapse mt-1" id="collapseExample">
	  <div class="card card-body">
		<h5 class="card-title">Informasi <span class="badge badge-pill badge-danger">Ok</span></h5>
		Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.<br> Klik lagi buat nutup info ini
	  </div>
	</div>

	
	<div class="modal" tabindex="-1" role="dialog" >
	  <div class="modal-dialog" role="document">
		<div class="modal-content">
		  <div class="modal-header">
			<h5 class="modal-title">Modal title</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="tutup('.modal')">
			  <span aria-hidden="true">&times;</span>
			</button>
		  </div>
		  <div class="modal-body">
			<p>Modal body text goes here.</p>
		  </div>
		  <div class="modal-footer">
			<button type="button" class="btn btn-primary">Save changes</button>
			<button type="button" class="btn btn-secondary" data-dismiss="modal" id="tutup">Close</button>
		  </div>
		</div>
	  </div>
	</div>
	<footer class="fixed-bottom text-center bg-light" >
	ringkes.com&copy;2022 
	</footer>
	<script src="js/jquery-3.3.1.slim.min.js"></script>
	<script src="js/bootstrap.bundle.min.js"></script>
	<script>
		$(document).ready(function(){	
			//fungsi dapat ditulis disini
			$("#tutup").click(function(){ tutup('.modal');});
		});
		//fungsi juga dapat ditulis seperti biasa
		function tampil(isi){			
			$(isi).show();
		}
		function tutup(isi){
			$(isi).hide();
		}
		function toggle(isi){			
			$(isi).toggle();
		}
	</script>
	</body>
</html>