Создание своих тегов html

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

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

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

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

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

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

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

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

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

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

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

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

    This is my Gravatar picture: 

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

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

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

     This is my Gravatar picture: 

Теперь приступим к реализации нашего тега. Первая задача: написать код, который будет идентифицировать наш тег, а вторая — реализовать сам тега. Весь код поместим в файл 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)";>>customTag("codingdude-gravatar",codingdudeGravatar);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отредактируем файл 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 sub-tags var chartData = <>; var chartDataElements = element.querySelectorAll("codingdude-data"); for (var i=0;i //call the draw() function new Piechart( < canvas:canvas, data:chartData, colors:colors >).draw();>customTag("codingdude-piechart",PiechartTag);

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

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

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

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

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

В завершении

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

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

Источник

Создание своих тегов html

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

В этом разделе перечислены все уроки без разделения по рубрикам.

Выбирайте тот урок, который интересует Вас больше всего на данный момент. К каждому уроку Вы можете оставить свой комментарий, а также проголосовать.

Как выбрать хороший хостинг для своего сайта?

Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

Создан: 15 Апреля 2020 Просмотров: 10596 Комментариев: 0

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Создан: 23 Ноября 2018 Просмотров: 18146 Комментариев: 0

Разработка веб-сайтов с помощью онлайн платформы Wrike

Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

Почему WordPress лучше чем Joomla ?

Этот урок скорее всего будет психологическим, т.к. многие люди работают с WordPress и одновременно с Joomla, но не могут решится каким CMS пользоваться.

Создан: 26 Августа 2017 Просмотров: 28582 Комментариев: 0

Про шаблоны WordPress

После установки и настройки движка нам нужно поработать с дизайном нашего сайта. Это довольно долгая тема, но мы постараемся рассказать всё кратко и ясно.

Создан: 3 Августа 2017 Просмотров: 26535 Комментариев: 0

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Самые первые настройки после установки движка WordPress

Сегодня мы вам расскажем какие первые настройки нужно сделать после установки движка WordPress. Этот урок будет очень полезен для новичков.

Источник