Автор

Адаптивная таблица (table) на jQuery

Адаптивная таблица (table) на jQuery


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

 

ДЕМО
ИСХОДНИКИ

 

Независимо от того, является ли это планом подписки или процессом оформления заказа, вы должны видеть все строки в своих проектах. Я заметил, что некоторые веб-сайты просто отсекают некоторые столбцы, чтобы сделать свои таблицы пригодными для телефона, но это решение не работает в большинстве случаев (по крайней мере, если вам нужны 5 + столбцы). Я предлагаю хороший пример таблицы, который позволяя пользователю горизонтально прокручивать столбцы.

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

 

Создание структуры

Мы использовали section как контейнер таблицы. Заголовок содержит функции (какие свойства мы сравниваем?). Причина, по которой столбцы и заголовок не упакованы в один и тот же div, заключается в том, что на мобильном телефоне заголовок фиксирован (в абсолютном положении), а родительский элемент, определяющий его позицию, является section. С другой стороны столбцы будут прокручиваться на меньших устройствах.

Как и ожидалось, данные столбцов - это просто элементы списка.

<section>
<header>
<h2>Features</h2>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>...</li>
</ul>
</header>

<div class="cd-table-container">
<div class="cd-table-wrapper">

<div class="cd-table-column">
<h2>Plan 1</h2>
<ul>
<li>1 GB</li>
<li>2</li>
<li>...</li>
</ul>
</div> <!-- cd-table-column -->

<div class="cd-table-column">
<h2>Plan 2</h2>
<ul>
<li>2 GB</li>
<li>5</li>
<li>...</li>
</ul>
</div> <!-- cd-table-column -->

</div> <!-- cd-table-wrapper -->
</div> <!-- cd-table-container -->
</section>

 

Добавление стиля

Ничто не зацикливается на CSS. Просто одно замечание: мы обернули столбцы в 2 div, .cd-table-container и .cd-table-wrapper. Почему два, а не только один? Потому что я установил ширину первой из них равной 90% с помощью переполнения-x: auto, тогда как ширина второго поля задается суммой всех значений ширины столбцов. Таким образом, у меня может быть некоторый запас справа, и пусть контент прокручивается, если его ширина больше 90% от области просмотра.

Адаптивная таблица (table) на jQuery

 

Обработка событий

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

Статья переведена с зарубежного источника!

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Адаптивная таблица (table) на jQuery

В данном уроке мы рассмотрим слайдер изображений с анимированными подписи, отзывчивым интерфейсом и HTML элементами, как видео, IFrame и регулятора. При этом легко добавить неограниченное количество слайдов и заголовков. Используйте его в качестве слайдера изображений, галереи фотографий, ротатора для баннерной рекламы, или даже презентации. Чтобы существенно сократить время загрузки страницы, предварительная загрузка доступна для каждого слайдера, так что изображение будут загружаться постепенно.


Адаптивная таблица (table) на jQuery

Красивый дизайн всегда положительно сказывается на его репутации. Ведь не секрет, если дизайн плох, то и находиться на таком ресурсе не вызывает интереса. Недавно в одном из премиум шаблонов заметил интересное меню, которое отлично вписывается в темный дизайн сайта. Эта навигация весьма привлекательная, и меня она заинтересовала. Одним из преимуществ такого меню является то, что оно написано полностью на css. Идея меню состоит в том, что ползунок, который находиться над верхней частью меню, плавно скользит к активным пунктам навигации.


Адаптивная таблица (table) на jQuery

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


Адаптивная таблица (table) на jQuery

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close