Автор

Адаптивная таблица (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

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


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

В данном уроке мы рассмотрим как можно проложить маршрут на карте Google? при этом у Вас будет самостоятельно указать пункты назначения в специальном  окне навигации, кроме этого после прокладывания пути Вы увидите расстояние в километрах. Для реализации такой манипуляции с картами нам понадобится небольшой кусок стилей, в котором мы укажем параметры для блока ввода информации и линия, которая будет обозначать маршрут. За расчет маршрута у нас будет отвечать функции js, с помощью которой также мы и узнаем дистанцию.


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

Эффект параллакса стал весьма интересовать веб-разработчиков, своей оригинальностью и заинтересованностью пользователей, в данном уроке мы рассмотрим как создать весьма привлекательный слайдер для сайта с помощью CSS3 и jQuery. С помощью анимаций CSS мы можем контролировать каждый элемент на слайде и создавать поразительные эффекты за счет их взаимного смещения. Слайдер будет содержать несколько слайдов, которые будут смещаться, создавая интересный эффект. В демонстрации будет использоваться автоматическая и ручная прокрутка..


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

Используйте данный урок для биографии выбранного сотрудника, без необходимости выделенных страниц или модальных окон.Пусть пользователь встретит вашу команду и доверяет вашей компании!


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close