Статьи

Foundation 5 Interchange — Создание динамического содержимого страницы

Ноябрь 21, 2018

Основа Foundation не нова для отрасли, но она еще не изучена полностью. Последняя версия Foundation 5 вынудила разработчиков использовать ее, не задумываясь. Наряду с серьезным обновлением со времени Foundation 4, он принес много инновационных и полезных инструментов, не реализованных ни одной платформой до настоящего времени. Одним из таких инструментов, который мы рассмотрим в этой статье, является Interchange .

Фреймворк Foundation 5 включен в список лучших рамок веб-дизайна на 2014 год .

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

Представьте, что вы использовали скрипт Google Maps для отображения текущего местоположения вашего автономного магазина. Он выглядит и хорошо работает в настольной и планшетной версии вашего сайта. Но когда дело доходит до небольших экранов на мобильных устройствах, где скорость вашего веб-сайта имеет наибольшее значение, вы задумываетесь о том, действительно ли скрипт Live Maps является лучшим решением.

Используя Interchange, вы можете решить эту проблему, заменив скрипт Maps статическим изображением местоположения на ходу. Звучит круто, не правда ли?

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

Interchange — это функция JS, которая предварительно загружена в пакет Foundation 5. Если у вас уже настроена среда Foundation 5, вы можете пропустить тему «Настройка» ниже. С другой стороны, если вы совершенно новичок в Foundation, внимательно прочитайте следующий раздел.

Создание проекта Foundation 5

Как и любая другая платформа CSS, Foundation 5 также поставляется с набором файлов CSS, JS и Font. Все необходимые файлы, необходимые для запуска Foundation 5, заархивированы с их сайта, foundation.zurb.com . Идите и скачайте файл. Разархивируйте папку и скопируйте папку CSS, JS и IMG внутри вашего веб-приложения.

Создайте индексный файл с именем index.html и вставьте в него приведенный ниже код. 

    <!DOCTYPE html>
    <!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
    <html class="no-js" lang="en" >

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Foundation 5</title>

      <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/foundation.css">

      <!-- If you are using the gem version, you need this only -->
      <link rel="stylesheet" href="css/app.css">

      <script src="js/vendor/modernizr.js"></script>

    </head>
    <body>

      <!-- body content here -->

      <script src="js/vendor/jquery.js"></script>
      <script src="js/foundation.min.js"></script>
      <script>
        $(document).foundation();
      </script>
    </body>
    </html>

Приведенный выше HTML является основной рекомендуемой разметкой Foundation. Он имеет все правильные метатеги и правильные ссылки на необходимые файлы. Убедитесь, что все пути к статическим ресурсам (JS, CSS и т. Д.) Правильно настроены и работают в соответствии с вашим собственным проектом.

Foundation 5 использует Normalize и Mordernizr, поэтому убедитесь, что они правильно связаны, как показано выше. Здесь app.css Вы можете заменить его именем вашего основного CSS-файла.

Вот и все. Вы готовы запустить свой первый проект Фонда.

Понимание Foundation 5 Interchange

Документ Фонда гласит:

Interchange теперь может извлекать HTML-партиалы, чтобы вы могли загружать различные разделы вашей страницы для определенных медиа-запросов.

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

Interchange использует атрибут data-interchange Это пользовательский атрибут, созданный Foundation 5 и перехваченный foundation.intercept.jsjs/foundation

В этом уроке мы рассмотрим следующие демонстрации:

  • Обмен скрипта Maps со статическим изображением карты на маленьких экранах.
  • Обмен изображениями.
  • Что происходит, когда JavaScript отключен в браузере? Будет ли Interchange работать? Посмотрим.

Начиная с первого примера:

Смена типа карты

Ситуация: отображение динамической карты Google в браузерах Desktop, увеличенное статическое изображение карты в планшетах и ​​меньшее статическое изображение на мобильных устройствах.

Разметка: 

     <div data-interchange="[maps/small.html, (small)], [maps/medium.html, (medium)], [maps/large.html, (large)]">
              <div data-alert class="alert-box secondary radius">
                This is the default content.
                <a href="#" class="close">&times;</a>
              </div>
        </div>

Присмотритесь к значению атрибута data-interchange Он принимает различные правила в качестве своей ценности. Каждое правило заключено в квадратные скобки (синтаксис массива JavaScript) и разделено запятой.

С каждым правилом у нас есть два параметра: первый параметр принимает путь к контенту, а второй параметр указывает медиа-запрос, заключенный в круглые скобки.

Существует семь типов предопределенных медиазапросов: по умолчанию, маленький, средний, большой, альбомный, портретный и сетчатка.

Последнее правило, которое возвращает true, будет использовано для загрузки содержимого в указанном разделе.

Внутри каждого раздела Interchange у нас снова есть дочерний раздел, который будет отображаться в случае, если содержимое, указанное в правиле, недоступно. В нашем случае контентом по умолчанию является окно оповещения с надписью «Это контент по умолчанию» с кнопкой закрытия в правом углу.

Посетите демонстрационную страницу и попробуйте изменить размер своего браузера, и вы увидите, как раздел «Карты» меняет свое содержимое.

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

Обмен изображениями

Interchange Foundation 5 также можно использовать для замены изображений для различных типов браузеров. Например, у нас есть версия HD, версия среднего размера и уменьшенная версия того же изображения. Давайте посмотрим, как реализовать это с помощью обмена данными. 

 <img data-interchange="[img/space-small.jpg, (small)], [img/space-medium.jpg, (medium)], [img/space-large.jpg, (large)]">

При использовании Interchange для изображений рекомендуется не использовать атрибут src. Это сделано по 2 причинам. Во-первых, изображение, указанное в теге src, в любом случае будет переопределено сценарием обмена Foundation, а во-вторых, чтобы предотвратить два одновременных запроса браузера для одного и того же <img>

Если вы хотите оптимизировать изображение для отображения на сетчатке, вы можете указать новое правило с медиа-запросом как «сетчатка». 

 data-interchange="[img/retina.jpg, (retina)]"

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

 data-interchange="[img/def.jpg, (default)]"

Переопределение медиазапросов по умолчанию

Если вы не удовлетворены стандартами медиа-запросов, предоставляемыми платформой, вы всегда можете указать свой собственный медиа-запрос. Это легко сделать, написав сценарий Foundation. 

     $(document).foundation('interchange', {
      named_queries : {
        ipad_4 : 'only screen and (max-width: 700px)'
      }
    });

В следующий раз вы можете использовать «ipad_4» вместо одного из семи медиа-запросов.

Foundation 5’s Interchange in Non-Foundation Project

Если вы хотите использовать Interchange в своем неосновном проекте, вам нужно включить три файла JavaScript: jQuery, FoundationJS и FoundationInterchangeJS. 

     <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation/foundation.js"></script>
    <script src="js/foundation/foundation.interchange.js"></script>

JavaScript отключен

Вы всегда можете разместить <noscript> 

     <img data-interchange="[img/retina.jpg, (retina)]" />
    <noscript><img src="img/default.jpg"></noscript>

Тег <noscript> Эта функция дополнительно гарантирует раздел с некоторым содержанием.

Вывод

Это все о том, как оптимизировать HTML-страницу для различных типов браузеров. Я думаю, что скрипт Interchange Foundation является важным инструментом для каждого проекта в наши дни. Следовательно, простого создания мобильного дружественного дизайна недостаточно — оптимизированный дизайн является требованием часа!

Чтобы узнать больше о среде Foundation, вы можете обратиться к следующим статьям SitePoint:

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

Демо-страница

36
Share: