• آموزش طریقه استفاده HTML 5 Data attributes
آموزش طریقه استفاده HTML 5 Data attributes
1395/09/15 - 09:28:58 // Responsive Web Design // 0 نظر // 9299 بازدید

قبل از پیدایش HTML، ذخیره سازی داده در سطح کلاینت خود یک مشکل بزرگ قلمداد میگردید. در ورژنهای قبلی HTML از rel یا Class های Custom برای نگهداری مقادیر استفاده میگردید. پس از پیدایش HTML 5 این مشکل توسط data attributes که از استانداردهای HTML 5 می باشد کامل برطرف گردیده است.

بسمه تعالی

آموزش طریقه استفاده HTML 5 Data attributes

قبل از پیدایش HTML، ذخیره سازی داده در سطح کلاینت خود یک مشکل بزرگ قلمداد میگردید. در ورژنهای قبلی HTML از rel یا Class های Custom برای نگهداری مقادیر استفاده میگردید. پس از پیدایش HTML 5 این مشکل توسط data attributes که از استانداردهای HTML 5 می باشد کامل برطرف گردیده است.

در HTML 5 این اجزا یعنی Data Attribute ها همگی پیشوند data خواهند داشت. دقت کنید که یک Element میتواند بیش از یک Data Attribute هم داشته باشد.

به مثال زیر دقت کنید.

 <lidata-id="1234"data-email="calvin@example.com"data-age="21">Calvin</li>

به طور قطع بیننده یک سایت این مقادیر را مشاهده نخواهد کرد و این مقادیر تغییری در طراحی و ظاهر کار شما نخواهد داشت، ولی برای Bindکردن دیتا و استفاده توسط برنامه نویسان، نقش بسزایی خواهد داشت.

به مثال دیگری توجه کنید .

<button type="button" data-cmd="delete" data-id="1234">Delete</button>

 

در مثال بالا، بعدا در BackEnd یا در JQuery یا .... ، میتوان اینCommand را شکار کرد و از آن جهت مشخص شدن خیلی از وضعیتها و مسائل استفاده نمود.

چه مقادیری را میتوان در Data Attribute ها ذخیره نمود؟.

پیشنهاد میشود فکر ذخیره سازی Object را به عنوان دیتا در این مکانهای ذخیره سازی از سر بیرون کنید. شاید بتوان بعدا با Serialize کردن دیتا آن عمل را هم انجام داد، ولی فعلن اجازه دهید صرفا به ذخیره سازی مقادیر ساده بپردازیم و در مبحثی جدا به سراغ Object نیز خواهیم رفت.

حال باید دید این مقادیر را چگونه میتوان خواند و یا مقادیر آنرا عوض نمود.

1- راهکار JavaScript

 

// Here's our button

var button = document.getElementById('your-button-id');

// Get the values

var cmd = button.getAttribute('data-cmd');

var id = button.getAttribute('data-id');

// Change the values

button.setAttribute('data-cmd', yourNewCmd);

button.setAttribute('data-id', yourNewId);

 

1- راهکار JQuery

// Get the values

var cmd = $('#your-button-id').attr('data-cmd');

var id = $('#your-button-id').attr('data-id');

// Change the values

$('#your-button-id')

.attr('data-cmd', yourNewCmd)

.attr('data-id', yourNewId);

 
 

1- راهکار Data Api

// Here's our button

var button = document.getElementById('your-button-id');

// Get the values

var cmd = button.dataset.cmd;

var id = button.dataset.id;

// Change the values

button.dataset.cmd = yourNewCmd;

button.dataset.id = yourNewId;

دقت کنید در روش DataApi فرض بر این است که حتما شما از پیشوند data با رعایت Camel Case Notation استفاده کرده اید وگرنه در دریافت مقادیر به دلیل عدم انطباق اسامی دچار مشکل خواهید شد.

اعمالی که به عنوان مثال میتوان از آنها به عنوان کاربرد این قابلیت نام برد.

<input type="text" id="filter">

<ul class="cars">

<li data-models="mustang, f150, 500, fusion">Ford</li>

<li data-models="corvette, silverado, impala, cavalier">Chevrolet</li>

...

</ul>

 
 
 
 

حال با یک Script ساده میتوان با این مقادیر را فیلتر نمود.

 

$('#filter').on('keyup', function() {

var keyword = $(this).val().toLowerCase();

$('.cars > li').each( function() {

$(this).toggle( keyword.length < 1 || $(this).attr('data-models').indexOf(keyword) > -1 );

});

});

تغییر Style

شاید در نگاه اول استفاده از Class ها برای Style دادن به Tag ها بهتر باشد که واقعن هم همینطور است، ولی به مثالی مانند زیر دقت کنید تا ببینید در مواردی این روش زیباتر و ساده تر خواهد بود.

<span class="label" data-warning>

این یک تعریف CSS ساده خواهد بود.

[data-warning] {

background: red;

}

ولی حال به وضعیت زیر دقت کنید .

[data-warning*=error] {

color: red;

}

 

نگهداری Configuration

در Bootstrap این attribute ها کاربرد فراوان دارند. به مثال زیر دقت کنید.

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">

Popover on top

</button>

 

برای درک بهتر کاربرد این Attribute ها در Bootstrap به لینک زیر مراجعه فرمایید.

http://getbootstrap.com/javascript/#popovers 

دقت کنید که در این مقاله فقط به بررسی و معرفی این مبحث پرداخته شد و کاربرد این موارد را فقط به مثالهای زده شده توسط این مقاله محدود نکنید. راهکارهای زیادی برای استفاده و تسهیل امور مختلف توسط این قابلیت وجود دارد که می بایست حین انجام پروژه های مختلف به آنها برخورد کنید.

 
علی کلاهدوزان
معرفی نویسنده : علی کلاهدوزان

سلام بر دوستان ،
شاید رایج است به عنوان پروفایل کاربر ، چند خطی راجع به خودم بنویسم ، ولی وضعیت کاری و سوابق من با یک جستجوی ساده در گوگل مشخص خواهد شد ، لذا سرتان را با مطالب بی مورد به درد نیاورم بهتر است . اگر نکته خاصی لازم بود بدانید در قسمت "ایلیا سافت در یک نگاه" به احتمال زیاد یافت خواهد شد . جزئیات بیشتر را سوال کنید ، آدرس ایمیل Ali@Kolahdoozan.com همیشه جوابگوی شماست .امیدوارم از مطالب سایت استفاده کرده باشید . شاد و پیروز باشید .

امتیاز به مطلب
           
برچسب ها
HTML 5 Data Attribute 
نظرات کاربران
ارسال نظر