خواندن خاصیت Data در HTML5 با jQuery

خاصیت Data در HTML5 برای ذخیره کردن داده های سفارشی به همراه یک المنت HTML است. این ویژگی ها (attributes) برای نگه داشتن اطلاعات بیشتر بر روی المان های HTML به کار می رود.

زمانی که ما از طریق جاوااسکریپت به این المان ها دسترسی پیدا می کنیم. اطلاعات ذخیره شده به کار ما را بسیار ساده تر می کنند.

قصد داریم یک مثال از خواندن خاصیت Data در HTML5 با jQuery را ببینم. در این مثال یک تگ <img> با خاصیت data-* داریم. ما از این ویژگی ها را برای انجام عملیات بزرگنمایی (zoom-in) و کوچک کردن (zoom-out)بهره می بریم.

کد HTML به همراه خاصیت Data

این کد شامل دو خاصیت data است . data-action و data-imgname.

data-action برای ذخیره عملیات (zoom-in , zoom-out) به کار می رود و data-imgname برای ذخیره نام تصویر که بعد از عملیات zoom نمایش داده می شود.

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

<img class="demo-image" src="photo_thumbnail.jpg"

title="Zoom In"

data-action="zoom-in"

data-imgname="photo_enlarge.jpg">

کد خواندن خاصیت Data در HTML5 با jQuery

ما با استفاده از متد data در جی کوئری به خاصیت data-action دسترسی پیدا می کنیم. بر اساس مقدار ذخیره شده یکی از عملیات zoom را انجام می دهیم.

طی این عملیات ها, ما مقدار data-imgname را نیر تغییر می دهیم.

<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>

$(".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>

در اینجا ما از دو تصویر بندانگشتی و تصویر اصلی استفاده کردیم که شما می توانید فقط از یک تصویر استفاده کردن و به جای تغییر تصویر, سایز آن ها را تغییر بدید.

امیدوارم از آموزش خواندن خاصیت Data در HTML5 با jQuery نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.