jQuery ile HTML5 Attribute Özelliği

jQuery ile HTML5 Attribute Özelliği

Merhabalar

jQuery ile HTML5 Attribute tagındaki verileri okumak oldukça basit ve işlevsel. data-* ile başlayan özelliklerin içerisini okuyabilirsiniz, geri veri gönderebilirsiniz.
Aşağıdaki örnekte resme tıklayınca yakınlaşacak tekrar tıkalyınca uzaklaşacak.

<img class="demo-image" src="photo_thumbnail.jpg" 
	title="Zoom In" 
	data-action="zoom-in" 
	data-imgname="photo_enlarge.jpg" />

 

yukaridaki gibi data-* ile başlayan özelliklerin içerisini aşağıdaki gibi okuyabilirsiniz:

<script type="text/javascript">
	$(".demo-image").click( function() {
		var currentImage = $(this).attr("src");
		var action = $(this).data("action");
		$(this).attr("src", $(this).data("imgname"));
		$(this).data("imgname", currentImage);
		if(action=="zoom-in") {
			$(this).attr("title","Zoom Out");
			$(this).data("action","zoom-out");
			$(this).css("cursor", "-webkit-zoom-out");
		} else {
			$(this).attr("title","Zoom In");
			$(this).data("action","zoom-in");
			$(this).css("cursor", "-webkit-zoom-in");
		}
	});
</script>

 

kolay gelsin

Hakan AK

Son Yazılar