در حال بارگزاری ...
یکی از جالب‌ترین ویژگی‌های جدید HTML5، امکان تنظیم مشخصه‌های داده بر روی هر عنصر در صفحه است. این یک ویژگی فوق‌العاده قدرتمند است. در این مقاله به آموزش Data Attributes خواهیم پرداخت. با ما همراه باشید.
استفاده از مشخصه های داده در HTML5
فریم ورک بوت استرپ باعث می‌شود هنگام کار با افزونه‌های جاوا اسکریپت و جی کوئری از مشخصه‌های داده، بیشتر استفاده کنید. در این مقاله از لیداوب مستقیماً به ویژگی‌های داده در HTML5 خواهیم پرداخت.
افزودن مشخصه‌های داده به HTML5 یکی از ویژگی‌های کلیدی است که HTML5 را قادر می‌سازد تا با برنامه‌های استایل دهی محلی در دنیای پلتفرم بسته رقابت کند. توسعه دهندگان دیگر با HTML وب سایت‌های استاتیک نمی‌سازند، اما در عوض برنامه‌های کامل blow را نیاز دارند که در انواع مختلفی از محیط‌ها اجرا شوند. مشخصه‌های داده به تحقق این امر کمک می‌کنند.
شروع با data-something
وقتی می‌خواهید از مشخصه داده در HTML خود استفاده کنید، این مشخصه همیشه با data- شروع می‌شود. بعد از خط تیره ( - )، جایی است که نامگذاری براساس قرارداد خود را قرار می‌دهید که باید برای برنامه معنی دار باشد. اگر با یک برنامه بازی ویدیویی کار می‌کنید، می‌توانید مواردی مانند data-player data-score data-high-score و data-start-game را انتخاب کنید.
جا دادن هر داده در هر عنصر
مشخصه‌های داده را می‌توان به هر عنصر موجود در صفحه اختصاص داد. علاوه بر این، شما می‌توانید تمام اطلاعات مورد نیاز خود را در هر مشخصه داده‌ای که برای برنامه استفاده می‌کنید، ذخیره کنید.
دسترسی به داده با شی Dataset
وقتی مقادیر را به مشخصه‌های داده اختصاص می‌دهید، آن‌ها در جاوا اسکریپت و در شیء dataset قرار می‌گیرند. سپس می‌توانید به آن مقادیر در جاوا اسکریپت که برای صفحه می‌نویسید دسترسی پیدا کنید.
کار با جاو ا اسکریپت و جی کوئری
مشخصه‌های داده در HTML5 با یکپارچه سازی جاوا اسکریپت ایجاد شده‌اند. علاوه بر دسترسی به این داده‌ها با جاوا اسکریپت محلی، شما همچنین با استفاده از متد data() یا attr() می‌توانید در این روش از جی کوئری نیز استفاده کنید.
تبدیل مشخصه‌های داده در جاوا اسکریپت به Camel Case
شما در HTML5 خواهید دید که به دفعات با مشخصه‌های داده روبرو می‌شوید که اغلب از یک استایل ترکیبی استفاده می‌کنند. دقیقاً مثل مثال بازی ویدیویی که ممکن است دارای مشخصه‌های data-player data-score data-high-score و data- start-game باشد، این مشخصه‌ها به متغیرهای camel case جاوا اسکریپت تبدیل می‌شوند. بنابراین، این مثال‌ها با استفاده از مشخصه‌های player score highScore و startGame تبدیل به متغیرهای جاوا اسکریپت می‌شوند. سپس، شما می‌توانید از طریق شی datasetمانند dataset.player dataset.score dataset.highScoreو dataset.startGame به آن‌ها در جاوا اسکریپت دسترسی داشته باشید.
انعطاف پذیری فوق العاده مشخصه‌های داده
همانطور که مشاهده می‌کنید، مشخصه‌های داده بسیار انعطاف پذیر هستند. اگر تا به حال برنامه‌ای ساخته‌اید که به صورت پویا HTML و مشخصه‌ها را در صفحه ایجاد می‌کند، می‌دانید که اغلب انواع مقادیر مختلف را تنظیم می‌کنید. با تعامل بسیار زیادی که اکنون در وب سایت‌ها و برنامه‌ها ایجاد شده است ، ما به روشی نیاز داریم تا بتوانیم با جاوا اسکریپت و جی کوئری آن مقادیر را از صفحه وب به دست آوریم. مشخصه‌های داده همه این‌ها و موارد دیگر را به ما می‌دهند.
مشخصه‌های داده در HTML5 در همه مرورگرهای وب مدرن از جمله Google Chrome، Mozilla Firefox و Apple Safari پشتیبانی می‌شوند. هم جاوا اسکریپت و هم جی کوئری با مشخصه‌های داده به خوبی کار می‌کنند. با در نظر گرفتن این مفاهیم کلیدی، اجازه دهید نگاهی به نشانه گذاری‌های ساده بیندازیم که این ایده‌ها را در عمل نشان می‌دهند:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
Working With HTML5 data attributes
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-1.11.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function($){
// accessing data- attributes with jQuery
jQuery('a.btn').click(function () {
var myAttribute = $(this).attr('data-my-attribute');
jQuery('#content').after('<div class="alert alert-info"><h3>' + myAttribute + '</h3></div>');
})
});
// accessing data- attributes with native JavaScript
function answer(evt) {
game = evt.dataset.videoGame;
status = evt.dataset.gameStatus;
time = evt.dataset.gameTimeFrame;
var newlyCreated = document.createElement('h2');
newlyCreated.innerHTML = game + status + time;
var native = document.getElementById('native');
native.appendChild(newlyCreated);
}
</script>
</head>
<body class="container">
<h1>
Working With HTML5 data attributes
</h1>
<p class="lead">
You can specify your own data attributes on your tags in the page. This is super useful for placing data dynamically into the HTML via a server side technology, then accessing those values by grabbing them with JavaScript.
</p>
<a class="btn btn-primary btn-lg btn-block" href="#" data-my-attribute="BOOM!">Click, Click</a>.
<div id="content"></div>
<button class="btn btn-success btn-lg btn-block" data-video-game="Super Mario Brothers " data-game-status="is the greatest " data-game-time-frame="of all time!" onclick="answer(this)">
Click to Learn the Greatest Video Game of All Time!
</button>
<div id="native"></div>
</body>
</html>شما می‌توانید مشخصه‌های داده خود را روی تگ‌های خود در صفحه مشخص کنید. این کار برای قرار دادن داده به صورت پویا در HTML از طریق فناوری سمت سرور (server side) بسیار مفید است، سپس با گرفتن آن‌ها با جاوا اسکریپت به آن مقادیر دسترسی پیدا می‌کنید.
در مثال اول، ما یک دکمه در صفحه داریم که با تعدادی کد جی کوئری تنظیم شده است که هنگام کلیک کردن بر روی دکمه، عمل خواهد کرد. وقتی روی دکمه کلیک می‌کنیم، جی کوئری مقدار مشخصه داده مورد نظر را واکشی می‌کند و مقدار آن را در متغیر myAttribute قرار می‌دهد. سپس با استفاده از جی کوئری به سادگی قطعه‌ای از HTML را پس از محتوای خالی div در HTML وارد می‌کنیم و مقدار myAttribute را در خروجی نمایش می‌دهیم.
در مثال دوم، ما از جاوا اسکریپت برای دستیابی به یک افکت مشابه استفاده می‌کنیم. این مثال نشان می‌دهد که چگونه چندین مشخصه داده اختصاص داده شده به یک عنصر، اداره می‌شود. در اصل، تمام مشخصه‌های مختلف داده به صورت خودکار به camel case تبدیل می‌شوند و در شیء dataset قرار می‌گیرند. در HTML، ما به سادگی یک رویداد onclick را اتچ می‌کنیم و هنگامی که کاربر کلیک می‌کند، تابع answer را اجرا می‌کنیم. در داخل تابع خود، ما سه متغیر تنظیم کردیم و مقادیر آن‌ها را با استفاده از داده‌هایی که از طریق سه مشخصه داده متفاوت که بخشی از عنصر در صفحه بودند به آن‌ها دسترسی داشتیم، اختصاص می‌دهیم. ما سپس از توابع DOM محلی برای جمع آوری یک عنصر جدید استفاده می‌کنیم و به صورت دستی عنصر را به قسمت div در صفحه اضافه می‌کنیم.
مقالات بیشتر در لیداوب:
با سایر مقالات تخصصی لیداوب در زمینه‌های مختلف برنامه نویسی و طراحی سایت همراه باشید.
مطالب مرتبط
دیدگاه ها
متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند
ورود به سایت