ولاد مرژویچ

آنچه در HTML 4 به شدت گم شده بود، توانایی ایجاد ویژگی های خود برای ذخیره مقادیر بود. چرا این لازم است؟ در اینجا چند کار وجود دارد که ممکن است مورد نیاز باشد.

  • ایجاد نکات ابزار بدون استفاده از اسکریپت.
  • سبک یک عنصر را بر اساس مقدار مشخصه تعیین کنید.
  • دریافت و تغییر مقادیر از طریق اسکریپت ها.

HTML5 دارای یک ویژگی جهانی جدید است که می تواند به هر تگ اضافه شود. قوانین نوشتن یک ویژگی ساده است:

  • ما همیشه با داده ها شروع می کنیم.
  • ما فقط از حروف لاتین، خط فاصله (-)، کولون (:) و زیرخط (_) استفاده می کنیم.

CSS و جاوا اسکریپت به این ویژگی ها کمی متفاوت دسترسی دارند، بنابراین بیایید به طور جداگانه به مثال هایی برای آنها نگاه کنیم.

CSS

CSS دارای ویژگی‌های برچسب است؛ اگر ویژگی یا مقدار مشخصی وجود داشته باشد، سبک مورد نیاز را تنظیم می‌کنیم.

محتوا

حال می توان به این عنصر به عنوان یک div در استایل ها اشاره کرد و طرح مورد نظر را برای آن تنظیم کرد. به طور کلی، این شبیه به نحوه کار کلاس ها است، بنابراین یک ویژگی منحصر به فرد یا ضروری نیست. بنابراین تعیین مقادیر مفیدتر است.

محتوا

در CSS بعد از این می توانیم تنظیم کنیم سبک متفاوتبرای مقادیر مختلف ویژگی data-columns ما.

Div (عرض: 480 پیکسل؛ ) div (عرض: 720 پیکسل؛ )

باز هم، این تا حدی جایگزینی برای کلاس ها است؛ هیچ چیز مانع از ساخت کلاس هایی با نام های ستون-2، ستون-3 و اضافه کردن آنها در صورت لزوم نمی شود.

یک برنامه زیباتر شامل تابع attr() است. مقدار مشخصه داده شده را می گیرد و آن را در استایل قرار می دهد. استفاده از آن برای ایجاد نکات ابزار راحت است. متن را مستقیماً در داخل عنصر می نویسیم و نمایش و طراحی راهنمای ابزار را با استفاده از CSS پیاده سازی می کنیم.

ابزارسنج (موقعیت: نسبی؛) متر: شناور:: بعد (محتوا: attr(داده-توضیحات؛ پس‌زمینه: #ffe؛ بالشتک: 5px؛ حاشیه: 1px جامد #666؛ موقعیت: مطلق؛ بالا: 20px؛ )

دمای آب

که در در این مثالویژگی data-description به عنصر حاوی متن لازم برای نمایش اضافه می شود. خود نمایش با استفاده از عنصر شبه ::after و ویژگی content که مقدار آن تابع ()attr است، رخ می دهد.

جاوا اسکریپت

اگر در CSS مستقیماً به نام ویژگی دسترسی داشته باشیم و آن را به طور کامل مشخص کنیم، در جاوا اسکریپت این کار از طریق متد مجموعه داده انجام می شود. خود نام ویژگی طبق قوانین زیر به متغیر تبدیل می شود:

  • داده - دور ریخته شده
  • هر خط فاصله قبل از یک حرف کنار گذاشته می شود و حرف بعد از بزرگ شدن آن حذف می شود.

در عمل به این شکل به نظر می رسد.

توصیف داده به توصیف تبدیل می شود.
data-full-description تبدیل به fullDescription می شود.
data-description-of-tag تبدیل به descriptionOfTag می شود.

روش سنتی برای دسترسی به یک عنصر و ویژگی های آن، تنظیم یک شناسه و دسترسی به عنصر از طریق getElementById است، همانطور که در مثال زیر نشان داده شده است.

مجموعه داده User var el = document.getElementById("user"); id = el.dataset.id; // مقدار ویژگی data-id user = el.dataset.user را دریافت کنید. dob = el.dataset.dateOfBirth; // مقدار ویژگی data-date-of-birth را دریافت کنید el.dataset.ban = "No"; // یک ویژگی data-ban جدید و مقدار آن را اختصاص دهید console.log(user); // چاپ مقدار متغیر در کنسول کاربر console.log(dob); // مقدار متغیر dob را در کنسول چاپ کنید

ابتدا یک شناسه با یک مقدار منحصر به فرد به عنصر اضافه می کنیم. سپس از طریق getElementById به عنصر دسترسی پیدا می کنیم. اکنون می‌توانیم از طریق متد مجموعه داده به هر ویژگی داده دسترسی داشته باشیم و نه تنها دریافت کنیم، بلکه مقادیر را نیز تنظیم کنیم. آنها تا زمانی که صفحه مجدداً بارگیری شود یا تا زمانی که مقدار جدیدی تنظیم شود ذخیره می شوند.

قبل از ایجاد HTML5، با ویژگی ها کار کنید عناصر HTMLبه بیان ملایم، لذت بخش نبود. من مجبور شدم از ویژگی هایی مانند rel یا class استفاده کنم. و برخی از توسعه دهندگان حتی ویژگی های خود را ایجاد کردند.

اما وقتی HTML5 این فرصت را به ما داد تا از ویژگی های داده خود استفاده کنیم، همه چیز به طرز چشمگیری تغییر کرد. اکنون می توانید به راحتی داده های اضافی را با استفاده از ابزارهای استاندارد ذخیره کنید.

ویژگی های تاریخ چگونه کار می کنند؟

نام برای خودش صحبت می کند. ویژگی های تاریخ برخی از داده های مشخص شده توسط شما را ذخیره می کند. آنها همیشه با پیشوند داده شروع می شوند و با چیزی قابل درک تر برای توسعه دهنده پایان می یابند (طبق مشخصات، فقط حروف کوچک و خط فاصله مجاز هستند). یک عنصر می تواند دارای هر تعداد مشخصه تاریخ باشد.

نمونه ای از استفاده از ویژگی ها برای ذخیره داده های کاربر:

  • کالوین

    • البته، این داده ها برای کاربر نهایی چندان مفید نیستند، زیرا او به سادگی آن را نمی بیند، اما ویژگی های تاریخ به طور گسترده ای در وب مدرنفن آوری ها

    در اینجا نمونه ای از دکمه برای حذف چیزی در صفحه شما آمده است:

    حذف

    تمام پارامترهای لازم در نوک انگشتان شما هستند و آماده ارسال به اسکریپت باطن هستند. بیشتر نه ویژگی های relیا پردازش شناسه یا اقدام مورد نیاز از سایر ویژگی ها.

    چه چیزی می توانید ذخیره کنید؟

    تنها یک قانون وجود دارد که باید به خاطر بسپارید: اشیا را نمی توان در ویژگی های تاریخ ذخیره کرد. یعنی اگر اول سریال شوند امکان پذیر است. در حال حاضر، فقط به یاد داشته باشید که در اصل، شما فقط می توانید داده های رشته ای را ذخیره کنید.

    خواندن/نوشتن ویژگی ها با استفاده از جاوا اسکریپت

    بیایید به مثال دکمه برگردیم و ببینیم چگونه می توانیم به ویژگی های مورد نیاز دسترسی پیدا کنیم.

    // این یک دکمه var button = document.getElementById("your-button-id"); // دریافت مقدار var cmd = button.getAttribute("data-cmd"); var id = button.getAttribute("data-id"); // تغییر مقدار button.setAttribute("data-cmd", yourNewCmd); button.setAttribute("data-id", yourNewId);

    خیلی ساده، درست است؟ اکنون به سادگی پارامترهای cmd و id را به اپلیکیشن خود منتقل کرده و درخواست ajax لازم را انجام دهید.

    خواندن/نوشتن ویژگی های تاریخ با استفاده از jQuery.

    در اینجا یک آنالوگ در jQuery وجود دارد:

    // مقدار var cmd = $("#your-button-id").attr("data-cmd"); var id = $("#your-button-id").attr("data-id"); // مقدار $("#your-button-id") را تغییر دهید .attr("data-cmd", yourNewCmd) .attr("data-id", yourNewId);

    نباید با متد data() اشتباه گرفته شود. اگرچه آنها در برخی موارد مشترک هستند، اما در کل چیزهای کاملاً متفاوتی هستند. حتی اگر به طور کامل با این روش ها آشنا نیستید، فقط از attr() استفاده کنید.

    با استفاده از مجموعه داده API

    HTML5 حتی یک API برای کار با ویژگی های داده به ما ارائه می دهد، اگرچه IE10 و پایین تر از آن پشتیبانی نمی کند.

    دوباره، یک مثال با یک دکمه، اما این بار با استفاده از مجموعه داده API:

    // این یک دکمه var button = document.getElementById("your-button-id"); // مقدار var cmd = button.dataset.cmd را دریافت کنید. var id = button.dataset.id; // مقدار را تغییر دهید button.dataset.cmd = yourNewCmd; button.dataset.id = yourNewId;

    لطفاً به عدم وجود پیشوند داده و خط فاصله توجه کنید. درست مانند زمانی که با ویژگی های CSS در جاوا اسکریپت کار می کنید، به حالت "humpback" نیاز دارید. Dataset API نام ویژگی‌ها را ترجمه می‌کند تا data-some-attribute-name در HTML به database.someAttributeName در جاوا اسکریپت تبدیل شود.

    با ویژگی های تاریخ چه کاری می توانید انجام دهید؟

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

    فیلتراسیون

    فرض کنید با لیستی از عناصر کار می کنید و باید آنها را بر اساس کلمه کلیدی فیلتر کنید. محل کلید واژه هادر ویژگی های داده و استفاده از یک اسکریپت تکراری کوچک برای پردازش آنها.

    • آب کم عمق
    • شورلت
      • ...

    مثال "روی زانو":

    $("#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); } ); } );

    سبک سازی

    البته بهتر است استایل ها را با استفاده از کلاس ها اعمال کنید، اما همین کار را می توان با استفاده از ویژگی های داده انجام داد. به این ترتیب می‌توانید یک سبک را بدون در نظر گرفتن مقدار آن، برای عناصری اعمال کنید که دارای ویژگی داده‌ای خاص هستند. بیایید ابتدا به HTML نگاه کنیم:

    و حالا CSS:

    (پس زمینه: قرمز؛ )

    اما چگونه ارزش یک ویژگی را در نظر بگیریم؟ بدین ترتیب می‌توانید یک استایل را برای همه عناصر با ویژگی هشدار داده اعمال کنید که مقدار آن حاوی کلمه خطا است:

    (رنگ: قرمز؛ )

    تنظیمات

    چارچوب شناخته شده بوت استرپ از ویژگی های داده برای پیکربندی افزونه های جاوا اسکریپت خود استفاده می کند. مثال پاپ آپ:

    پاپوور در بالا

    بهترین راه برای ذخیره داده ها

    ویژگی های تاریخ در فناوری های وب بسیار رایج هستند. اما مهمترین چیز این است که آنها به طور کامل توسط مرورگرهای قدیمی پشتیبانی می شوند و عمیق تر و عمیق تر به استانداردهای وب نفوذ می کنند. و از آنجایی که استاندارد HTML قبلاً تأیید شده است، می توانید امروز با آنها کار کنید و نترسید که فردا ناگهان ناپدید شوند.