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

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

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


Диэнай купить в москве
Официальный дистрибьютор. Доставка. Скидки.
biopark-moscow.ru
Поклейка авто
Купить авто с аукциона! Полная база! Удобный поиск по категориям! Заходи
vilex.com.ua
Разработка и создание сайтов
Создание И Разработка Сайтов. Гарантия. Договор. Звони
rusich-web.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930