Penerapan jQuery menggunakan attribute data
TrikSonic - Contoh penerapan jquery data attribute. Artikel ini saya buat karena ada pertanyaan kepada saya melalui chat di Facebook saya.
Persiapan :
Pastikan library javascript jQuery sudah terpasang dengan benar, untuk tutorial ini saya menggunakan version
1.12.4<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Contoh Penerapan jQuery menggunakan attribute data
Contoh dengan mengambil data attribute
<button class="btn" data-tes="111111">Klik saya</button>
<button class="btn" data-tes="222222">Klik saya</button>
<script>
$(function(){
$(".btn").click(function(){
var $this = $(this).attr("data-tes");
alert($this);
//kode selanjutnya...
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button class="btn" data-tes="111111">Klik saya</button>
<button class="btn" data-tes="222222">Klik saya</button>
<script>
$(function(){
$(".btn").click(function(){
var $this = $(this).attr("data-tes");
alert($this);
//kode selanjutnya...
});
});
</script>
</body>
</html>
Contoh dengan data attribute sebagai yang menjalankan perintah
<button class="btn" data-tes="show">show</button>
<button class="btn" data-tes="hide">hide</button>
<script>
$(function(){
$("[data-tes='show']").click(function(){
$("#demo-area").show();
});
$("[data-tes='hide']").click(function(){
$("#demo-area").hide();
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<p id="demo-area">Klik tombol dibawah</p>
<button class="btn" data-tes="show">show</button>
<button class="btn" data-tes="hide">hide</button>
<script>
$(function(){
$("[data-tes='show']").click(function(){
$("#demo-area").show();
});
$("[data-tes='hide']").click(function(){
$("#demo-area").hide();
});
});
</script>
</body>
</html>
Contoh lainnya yang terkait penggunaannnya dengan attribute data
<button data-tes="null" data-value="1">Button 1</button>
<button data-tes="null" data-value="2">Button 2</button>
<button data-tes="null" data-value="3">Button 3</button>
<button data-tes="null" data-value="4">Button 4</button>
<button data-tes="null" data-value="5">Button 5</button>
<div id="demo-area" style="margin-top:15px;">
Klik tombol diatas
</div>
<script>
$(function() {
$("[data-tes]").click(function() {
var a = $(this).attr("data-value"),
e = $("#demo-area");
switch (a) {
case "1":
e.html("<b>Hai 1</b>");
break;
case "2":
e.html("<code>Hai 2</code>");
break;
case "3":
e.html("<textarea>Hai 3</textarea>");
break;
case "4":
e.html("<mark>Hai 4</mark>");
break;
case "5":
alert("Hai saya alert")
}
})
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button data-tes="null" data-value="1">Button 1</button>
<button data-tes="null" data-value="2">Button 2</button>
<button data-tes="null" data-value="3">Button 3</button>
<button data-tes="null" data-value="4">Button 4</button>
<button data-tes="null" data-value="5">Button 5</button>
<div id="demo-area" style="margin-top:15px;">
Klik tombol diatas
</div>
<script>
$(function() {
$("[data-tes]").click(function() {
var a = $(this).attr("data-value"),
e = $("#demo-area");
switch (a) {
case "1":
e.html("<b>Hai 1</b>");
break;
case "2":
e.html("<code>Hai 2</code>");
break;
case "3":
e.html("<textarea>Hai 3</textarea>");
break;
case "4":
e.html("<mark>Hai 4</mark>");
break;
case "5":
alert("Hai saya alert")
}
})
});
</script>
</body>
</html>
Posting Komentar