Написать нам

Расширяем возможности HTML за счёт создания собственных тегов...

CodeHTML

Интро

В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше....

В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.

Что такое пользовательский HTML тег?

Когда нам нужно сделать текст “жирным”, то мы пользуемся HTML тегом <b>. Если же нужно вывести список, то мы вероятнее всего воспользуемся тандемом <ul> и <li>. Браузеры используют разметку и таблицы стилей CSS, для того чтобы оформить внешний вид страницы, а в некоторых случаях и небольшой функционал.

Для создания современных веб-приложений текущего набора HTML элементов становится недостаточно. В большинстве случаев данная проблема решается путём использование целого набора HTML тегов, которые обрабатываются через JavaScript и CSS, но это не самое элегантное решение.

В идеале, решение должно выглядеть как собственный тег — между знаками <>, который будет понятен браузеру. Как и при работе с обычными HTML тегами у нас должна сохраниться возможность многократного использования тегов. Давайте посмотрим на реальный пример!

Пример #1: Создание HTML тега для Gravatar

Давайте создадим свой собственный тег для отображения изображения Gravatar по email адресу. Назовём наш тег <codingdude-gravatar>. Почтовый адрес будем указывать в атрибуте email.

Название тега может быть каким угодно. В нашем случае тег начинается с префикса codingdude-. Префиксы следует писать чтобы исключить коллизии с названиями других пользовательских тегов. Также во избежание других конфликтов не следует выбирать названия идентичные текущему набору HTML тегов.

Для создания и тестирования нашего собственного тега нужно выполнить несколько шагов:

  • Создать отдельную папку; назовём её gravatar-custom-tag.
  • Поместить HTML файл под названием index.html в папку gravatar-custom-tag. Тут и будет храниться наш HTML код.
  • Создать JS файл под названием codingdude-gravatar.js в папке gravatar-custom-tag. В нём напишем JavaScript код, обеспечивающий работу нашего тега.

Давайте отредактируем файл index.html и наполним его следующим содержимым:

<html>    <head>        <script type="text/javascript" src="codingdude-gravatar.js"></script>    </head><body>    This is my Gravatar picture:     <codingdude-gravatar email="admin@coding-dude.com"></codingdude-gravatar></body></html>

Если открыть файл index.html в браузере, то результат будет не слишком впечатляющим, ведь мы не реализовали функцию подгрузки изображения:

Расширяем возможности HTML за счёт создания собственных тегов...

Возможность создавать пользовательские теги возникла благодаря браузерам, которые игнорируют незнакомые теги, встречающиеся в документе. Для того чтобы наш тег подгружал Gravatar изображение по электронному адресу, нужно понимать как работает сам сервис Gravatar.

Gravatar преобразует email в URL адрес PNG изображения. Преобразование осуществляется путём хеширования почтового адреса через алгоритм MD5. URL адрес Gravatar изображения будет выглядеть так: https://www.gravatar.com/avatar/EMAIL_MD5_HASH.png. Так что первое что нам нужно сделать — получить MD5 хеш. Для этого воспользуемся открытой библиотекой, которую подключим в файле index.html:

<html>    <head>        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.7.0/js/md5.min.js"></script>        <script type="text/javascript" src="codingdude-gravatar.js"></script>    </head><body>    This is my Gravatar picture: <codingdude-gravatar email="admin@coding-dude.com" /></body></html>

Теперь приступим к реализации нашего тега. Первая задача: написать код, который будет идентифицировать наш тег, а вторая — реализовать сам тега. Весь код поместим в файл codingdude-gravatar.js:

function customTag(tagName,fn){  document.createElement(tagName);  //find all the tags occurrences (instances) in the document  var tagInstances = document.getElementsByTagName(tagName);  //for each occurrence run the associated functionfor ( var i = 0; i < tagInstances.length; i++) {            fn(tagInstances[i]);}}function codingdudeGravatar(element){//code for rendering the element goes hereif (element.attributes.email){//get the email address from the element"s email attributevar email = element.attributes.email.value;var gravatar = "http://www.gravatar.com/avatar/"+md5(email)+".png";element.innerHTML = "<img src=""+gravatar+"">";}}customTag("codingdude-gravatar",codingdudeGravatar);

В коде можно увидеть функцию customTag(), которая ищет все экземпляры нашего тега (через параметр tagName) и запускает функционал (через параметр fn).

Вызов document.createElement(tagName) необходим для таких браузеров как IE, чтобы сообщить о наличии на странице пользовательских тегов. В противном случае свои теги с названием tagName попросту не сработают.

Параметр fn — это функция где будет происходить вся “магия”. В нашем случае fn — вызов функции codingdudeGravatar(). Данная функция в качестве аргумента принимает ссылку на наш тег. Если в нашем теге будет фигурировать атрибут email, то мы прогоним его через функцию md5() из открытой библиотеки. Результат будет использоваться для формирования URL изображения, которое мы вставим в элемент.

В конце происходит вызов функции customTag() с названием нашего тега. Подобная функция может применяться многократно; вам просто нужно реализовать функцию с функционалом.

На этот раз при загрузке файла index.html в браузере мы увидим Gravatar по заданному email-у:

Расширяем возможности HTML за счёт создания собственных тегов...

Пример #2: HTML тег круговой диаграммы

Прошлый пример создания пользовательского HTML тега был довольно-таки прост. Этот же принцип можно применить для создания тега любой сложности.

Теперь давайте реализуем что-то посложнее: круговую диаграмму. Для этого нам понадобится:

  • Создадим папку самого проекта и назовём piechart-custom-tag.
  • Внутри папки piechart-custom-tag создадим HTML файл и назовём его index.html. Тут будет храниться весь HTML код.
  • JavaScript реализацию тега поместим в файл codingdude-piechart.js.

Пользовательские теги зачастую используются как контейнеры с определённым функционалом. В нашем случае тег будет называться <codingdude-piechart> и представлять собой контейнер с круговой диаграммой. Если вы пропустили мой урок Как рисовать диаграммы с использованием JavaScript и HTML5 Canvas, то можете взглянуть. Мы воспользуемся уже готовым кодом создания графика и поместим его в наш тег.

Поправим файл codingdude-piechart.js и поместим функции из упомянутого урока:

  • drawLine()
  • drawArc()
  • drawPieSlice()
  • Piechart()

Теперь отредактируем файл index.html и напишем свой тег на месте которого появится диаграмма:

<html>    <head>        <script type="text/javascript" src="codingdude-piechart.js"></script>    </head><body>    <codingdude-piechart width="200" height="200" colors="#fde23e,#f16e23, #57d9ff,#937e88">      <codingdude-data category="Classical music">10</codingdude-data>      <codingdude-data category="Alternative rock">14</codingdude-data>      <codingdude-data category="Pop">2</codingdude-data>      <codingdude-data category="Jazz">12</codingdude-data>    </codingdude-piechart></body></html>

Ширину и высоту графика мы получим из атрибутов width и height. В атрибуте colors поместим список цветов, которыми будут окрашиваться доли.

Как было упомянуто ранее, данный тег сложнее предыдущего, а всё за счёт вложенных тегов. В под-тегах <codingdude-data> мы перечислим данные по которым будет строиться график. Теперь давайте взглянем на код.

Отредактируем файл codingdude-piechart.js и после функции графика вставляем следующий код:

//here you should add the function from the tutorial//How to Draw Charts Using JavaScript and HTML5 Canvas//...function customTag(tagName,fn){  document.createElement(tagName);        //find all the tags occurrences (instances) in the document        var tagInstances = document.getElementsByTagName(tagName);//for each occurrence run the associated functionfor ( var i = 0; i < tagInstances.length; i++) {            fn(tagInstances[i]);}}function PiechartTag(element){    //add the canvas where to draw the piechart    var canvas = document.createElement("canvas");     //get the width and height from the custom tag attributes    canvas.width = element.attributes.width.value;    canvas.height = element.attributes.height.value;    element.appendChild(canvas);        //get the colors for the slices from the custom tag attribute    var colors = element.attributes.colors.value.split(",");        //load the chart data from the <codingdude-data> sub-tags    var chartData = {};    var chartDataElements = element.querySelectorAll("codingdude-data");    for (var i=0;i<chartDataElements.length;i++){        chartData[chartDataElements[i].attributes.category.value] = parseFloat(chartDataElements[i].textContent);        //remove the data sub-tags        chartDataElements[i].parentNode.removeChild(chartDataElements[i]);    }      //call the draw() function    new Piechart(        {        canvas:canvas,        data:chartData,        colors:colors        }    ).draw();}customTag("codingdude-piechart",PiechartTag);

Функций customTag() точно такая же как и в Примере #1. Реализация тега <codingdude-piechart> помещена в функцию PiechartTag(). В частности данная функция:

  • Создаёт элемент <canvas> где будет отрисован график. Ширина и высота элемента canvas будет извлечена из атрибутов нашего пользовательского тега.
  • Ищет атрибут colors, преобразует его значение в массив цветов для элементов круговой диаграммы.
  • Последовательно подгружает элементы <codingdude-data> и помещает их в разметку графика. Текст, указанный в данных элементах будет отображён браузером. Мы этого не хотим, поэтому удалим элементы со страницы после того как извлечём из них значения.
  • В конце вызывает конструктор Piechart() с необходимыми параметрами и выполняет функцию draw() для отрисовки графика.

Если зайти на страницу index.html, то можно увидеть следующий круговой график:

Расширяем возможности HTML за счёт создания собственных тегов...

Наша круговая диаграмма выглядит очень даже ничего. Изменение значений атрибутов <codingdude-data> приведёт к изменению вида графика. Эта же техника применялась для создания Библиотеки графических объектов и HTML графики на CodeCanyon.

Расширяем возможности HTML за счёт создания собственных тегов...
Библиотека графиков с CodeCanyon

Данная библиотека содержит не только круговые диаграммы, но и другие типы графиков: линейные диаграммы, гистограммы и др.

В завершении

В этом уроке мы рассмотрели два примера создания пользовательских HTML тегов различной сложности. С помощью функции customTag() вы с лёгкостью можете создать свои собственные теги.

Если вам понравилась эта статья, то у нас есть ещё множество других уроков по HTML5 и схожим темам, так что не пропустите.

Теги:CodeHTML
Просмотры 40310