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