—»     —»   ReView.js - переключение между обычной и адаптивной разметкой (практическое применение)
  Раздел: Библиотеки скриптов, Java-Скрипты   Комментариев: 1  

ReView.js - переключение между обычной и адаптивной разметкой (практическое применение)



Благодаря media queries, разработка веб-шаблонов для различных разрешений экранов становится гораздо проще. Тем не менее, не каждый посетитель удовлетворен ситуацией, так как breakpoint’ы и окна просмотра, которые выставляются при помощи media queries, ограничивают посетителей в том, чтобы самостоятельно выставлять разрешение используемого разрешения. Новый инструмент, написанный на javascript, предлагает посетителям возможность вручную переключаться между разметкой для настольного ПК и мобильного устройства по собственному желанию. ReView.js – это новый виток независимости веб-пользователей.

ReView.js - переключение между обычной и адаптивной разметкой (практическое применение)

Вкратце о ReView.js

Инструмент ReView (сокращение от Responsive Viewport, что означает «адаптивное окно просмотра»), предназначен для того, чтобы позволить пользователям мобильных устройств самостоятельно изменять разметку с мобильной на предназначенную для настольных ПК. Часто мобильная ограничена не только с точки зрения различных виджетов и инструментов на странице, но также и с точки зрения контента ввиду того, что экран мобильного устройства не может предоставить необходимое пространство, где уместилась бы вся нужная информация. При помощи ReView.js пользователь может свободно решать, использовать ему мобильную версию или же полную. Обращая внимание на стремительно растущий рынок Android-устройств с таким разнообразием размеров и разрешений экранов, это решение можно называть самым оптимальным.

Интегрируем ReView.js

ReView.js не зависит от каких-либо сторонних платформ вроде jQuery или MooTools. Для того чтобы разрешить ручное переключение, мы интегрируем javascript в головную секцию веб-сайта, сразу после определения окна просмотра:

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />
<script type="text/javascript" src="ReView.js"></script>

Готово. Теперь мы можем определить ссылку для функции переключения в любой области тела нашего HTML-документа. Нам нужно задать этой ссылке класс review для того, чтобы позволить ReView.js обнаружить ее и обработать:

<a class="reView" href="/">ReView</a>

Если вы используете настольный ПК, то никогда не заметите, используется ли на сайте ReView, так как инструмент отображает переключатель только мобильным устройствам. Пользователи мобильных устройств увидят ссылку под названием Default View (Стандартный вид). После переключения режима настольного стола (то есть стандартного вида), ссылка изменится на Core View (Мобильная версия). Причем изменение в разметке производятся без перезагрузки страницы.

Если вам не нравятся исходные названия ссылок, то вам не нужно иметь глубоких навыков в разработке кода, чтобы изменить дата-атрибуты в HTML5:

<a class="reView" data-defaultText="Mobile Layout" data-coreText="Desktop Layout" href="/">ReView</a>

Вывод: с помощью ReView.js вы позволяете вашим посетителям решать, хотят ли они использовать стандартный режим или переключиться на мобильный. Вряд ли здесь кто-то запутается, так как пользователи мобильных устройств по умолчанию всегда будут видеть мобильную версию сайта. В целом, у данного инструмента сложно найти отрицательные стороны, так почему бы не попробовать на собственном сайте?
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн, javascript
Опубликовал Design FactoRy   Прочитано (раз): 9413   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 30 октября 2012 @ 18:08
Написал: Андрей — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Надо бы попробывать!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Диэнай купить в москве
Официальный дистрибьютор. Доставка. Скидки.
biopark-moscow.ru
Купить питьевую воду москва
Поставка питьевой воды! Удобный поиск! Полная база поставщиков! Цены
premiumaqua.ru
Ohsas 18001
Электронная библиотека. Срочная сертификация по ГОСТ Р ИСО 9001.
mco-ck.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31