Автор

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

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


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

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


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

Шумиха по поводу CSS4 возникла абсолютно из ниоткуда, так как мы только привыкли к CSS3, и все планируют использовать эту технологию еще какое-то время. Разработчики браузеров усиленно работают над тем, чтобы их продукт поддерживал самые последние эффекты и свойства, а разработчики внешних интерфейсов создают все больше и больше инструментов для более эффективной работы с таблицами стилей. И сейчас довольно странно слышать что-либо о CSS4. Сразу навязывается вопрос: «А как же CSS3? Разве уже всё?».


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close