Epg

Epg больше не поддерживается

Он был написан, когда я разрабатывал телевизионные приставки много лет назад. Изначально он был основан на jQuery, но позже я решил использовать нативный JavaScript с открытым исходным кодом. Когда я открывал исходный код, я намеренно написал документ на китайском английском, что означает, что его не рекомендуется использовать напрямую, поскольку он не прошёл тестирование телевизионных приставок. После открытия исходного кода время от времени я получаю сообщения от разработчиков, и я не могу дать им слишком много советов. Я уже давно не понимаю совместимость телевизионных приставок, и этот плагин может служить только в качестве руководства. Поскольку я всё ещё не знаю, как установить код в состояние без поддержки, я изменил документ на китайский и оставил это сообщение.

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

Введение

Скопируйте файл epg.min.js из каталога build в свой проект.

Включите его на своей странице:

<script type="text/javascript" src="epg.min.js"></script>

Теперь вы можете использовать epg, сначала инициализируйте его:

epg.init({
	// 配置项
});

Затем установите класс для обозначения позиции фокуса (по умолчанию в телевизионной приставке фокус находится на теге <a>).

Что за шутка? У телевизионной приставки уже есть стиль фокуса, почему бы не использовать его? Это похоже на HTML-теги, которые мы обычно сбрасываем. Стиль фокуса телевизионной приставки также отличается, и каждый производитель имеет разные правила для стиля рамки и внешней рамки, а у телекоммуникационных компаний нет стандартов, даже если они могут быть внутренними данными (не передаваемыми). Внешние рамки HTML включают border, outline и box-shadow, которые работают на некоторых телевизионных приставках. Разработчики должны были столкнуться с этим, некоторые телевизионные приставки могут изменять форму рамки фокуса вместе с формой текста, чего явно нельзя достичь с помощью стилей HTML.

Поэтому, чтобы добиться единообразия фокуса, мы можем только придумать способ, поэтому появился Epg.

Помните, что если владелец телекоммуникационной компании не ваш друг, пожалуйста, не пытайтесь использовать тег <a> в качестве фокуса.

Тогда возникает вопрос, без тега <a>, как настроить ссылку и как реализовать переход? При необходимости вы можете использовать пользовательские атрибуты для размещения ссылок на элементы, помеченные как фокус, например data-*. С наличием ссылки всё становится проще, document.location.herf завершает работу по переходу.

Если вы хотите использовать некоторые специальные эффекты, Epg предоставляет поддержку swiper, которая имеет два эффекта: эффект слайд-шоу и эффект перемещения списка.

new epg.swiper({
	// 配置项
});

Следует помнить, что он должен использоваться после загрузки файла. Вы можете использовать его в window.onload или написать его в конце HTML. Если используется синхронная загрузка, инициализация должна быть выполнена в функции завершения синхронизации.

Epg справочный документ.

Связанный demo, sample — это использование swiper, project — использование Epg в проекте.

Модификация исходного кода

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

Сначала клонируйте мой исходный код. Хотя он выглядит как мусор, мне он нравится, потому что он помог мне решить проблему.

Затем запустите установку зависимостей в каталоге Epg:

npm install

Скомпилируйте производственный код, файл будет находиться в папке build:

grunt