Пользовательские данные в XHTML 1.0 Strict - PullRequest
Новая
       70

Пользовательские данные в XHTML 1.0 Strict

7 голосов
/ 16 ноября 2010

Я использую некоторые пользовательские атрибуты в своем html для jquery. Я видел, что в HTML5 есть data-XYZ атрибуты, но я должен быть строгим в xhtml 1.0. Какие еще варианты у меня есть?

Ответы [ 5 ]

5 голосов
/ 23 ноября 2010

Вы можете использовать плагин jQuery MetaData , который позволяет записывать данные в атрибуте класса в формате JSON: 

<li class="someclass {some: 'data'} anotherclass">...</li>

Тогда в вашем jQuery, чтобы получить данные: 

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'data' )
    alert('It Worked!');

Это должно соответствовать вашим требованиям строгости xhtml 1.0, а также позволяет использовать решение plug-and-play:)

1 голос
/ 21 ноября 2010

У вас есть пара опций, которые приходят на ум.

Если вы хотите, чтобы специфичные для сайта пользовательские атрибуты использовались со сценариями, один из способов - встроить скрипт прямо в элемент, к которому вы хотите добавить атрибуты.,Например: 

  <span id="myId1"><script type="text/javascript">
      var myId1Span = document.getElementById("myId1");
      myId1Span.myData = {};
      myId1Span.myData.firstname = "John";
      myId1Span.myData.surname = "Smith";
  </script>My Text</span>

Еще один способ добавления дополнительных данных к вашим элементам - это вставить данные в атрибут класса.

Таким образом, вы можете получить 

<span class="myCssClass http://example.com/hasData 
                data-firstname:John data-surname:Smith">My Text</span>

Если вы используете данные для скриптинга, то вы можете добавить скрипт ниже для извлечения этих данных.Вы можете добавить это непосредственно перед тегом закрытия тела. 

  <script type="text/javascript">
      //<![CDATA[
      if (! document.getElementsByClassName)
      {
        // From http://lawrence.ecorp.net/inet/samples/js-getelementsbyclassname.shtml
        document.getElementsByClassName = function(class_name)
        {
          var docList = this.all || this.getElementsByTagName('*');
          var matchArray = new Array();

          var re = new RegExp("(?:^|\\s)"+class_name+"(?:\\s|$)");
          for (var i = 0; i < docList.length; i++)
          {
            if (re.test(docList[i].className) )
            {
              matchArray[matchArray.length] = docList[i];
            }
          }
          return matchArray;
        }
      }

      var hasData = document.getElementsByClassName("http://example.com/hasData");
      for (var i = 0 ; i < hasData.length ; i++)
      {
        var myElem = hasData[i];
        myElem.myData = {};
        var dataClassList = myElem.className.split(" ");
        for (var j = 0 ; j < dataClassList.length ; j++)
        {
          var dataCandidate = dataClassList[j];
          if (dataCandidate.substring(0, 5) == "data-")
            if (dataCandidate.indexOf(":") >= 0)
            { 
              var nameValue = dataCandidate.split(":", 2);
              myElem.myData[nameValue[0].substring(5)] = nameValue[1];
            }
        }
      }
      //]]>
  </script>

Это должно привести к тому, что тот же самый объект myData будет добавлен в диапазон как первая опция.

http://example.com/hasData class - это просто флаг, указывающий, какие элементы должны быть обработаны.Для этой цели вы можете использовать любую понравившуюся вам строку.

Оба метода совместимы со стандартом XHTML 1.0 Strict и будут работать, если будут text/html или application/xhtml+xml

.
0 голосов
/ 26 ноября 2010

Если вам нужен правильный XHTML, вам нужно использовать тип документа HTML5 (<!doctype html>). Тогда вы можете использовать атрибуты data-. 

<element data-usage='for an example' data-number='28' />

Это совершенно верно XHTML строго (я использую это на моем сайте). Цель этого состоит в том, чтобы W3C не создавал и не ломал атрибут с тем же именем, которое вы использовали на вашем веб-сайте.

Чтобы получить значение в JavaScript, вам нужно использовать elem.getAttribute('data-name');. Спецификация W3M включает использование ele.dataset.name, но это пока не поддерживается широким спектром браузеров.

0 голосов
/ 21 ноября 2010

Я просто хочу знать, допускает ли строгая спецификация какой-либо способ добавления дополнительных данных к элементам.

Нет.

(Вас это волнует? Вероятно, нет, но это ваш звонок.)

0 голосов
/ 16 ноября 2010

То, как я на это смотрю, меня не волнует, действительно ли оно соответствует спецификации XHTML , если Я использую его как text/html, потому что оно не будет настоящим xhtml все равно. Это имеет место в 99% случаев использования xhtml.

Пока у вас нет критических ошибок, таких как отсутствующие конечные теги и т. Д., Вам не обязательно беспокоиться о том, что вам скажет валидатор , если вы знаете, почему . Спецификация XHTML 1.0 была написана несколько лет назад. Технология движется быстро. Вы никогда не сможете использовать новые функции, если ограничите себя, чтобы сделать ваш сайт «действительным» на момент написания спецификации.

Хотя мое реальное предложение состояло бы в том, чтобы просто перейти на HTML 5 - синтаксис xhtml AFAIK совместим с HTML 5. Могут быть небольшие несоответствия, но по большей части это должен быть довольно прямой переход.

...