Динамическое отображение с CSS

Вот и пришло время второй статьи, посвящённой использованию CSS. К этому времени у меня нашлась цитата об актуальном использовании JS: «Если же вы пишете web-приложение, то постарайтесь вообще не выполнять ресурсоёмких операций на клиенте, по крайней мере продолжительное время, поскольку в Javascript до сих пор нет единого стандарта для создания многопоточности, и весь код исполняется в однопоточном режиме, что также может вызывать существенную задержку в обработке событий ». Не, подумайте, я не противник JS, как такового, я сам его использую и даже чаще, чем хотелось бы. Я за актуальное его использование и экономию вычислительных ресурсов клиентских машин.

Продолжу тему статьи, динамическое отображение. Все вы часто видели эффекты появления/исчезновения элементов web-страниц по какому-то событию. Обычно это было движение мышью. С большинстве случаев это реализуется при помощи JS, и реализуется достаточно просто — парой событий onmousover и onmouseout. Ну это и дети в песочнице знают, а вот то, что этот функционал можно заменить грамотным использованием знают не все. Да не все, судя по количеству избыточных скриптов на страницах.

Для примера возьмём нашу «тривиальную» таблицу из предыдущего примера. Поменяем её немного таким образом, что бы получилась форма для заказа товаров:

<table class="grid">
    <thead>
        <tr>
            <th>#</th><th>Goods</th><th>Price</th><th style="width: 40px;">Order</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td><td>Клей для носа</td><td>44.12</td><td><input type="submit" value="+" /></td>
        </tr>
        <tr>
            <td>2</td><td>Кофрик подмышковый</td><td>13.11</td><td><input type="submit" value="+" /></td>
        </tr>
        <tr>
            <td>3</td><td>Северный джигит</td><td>13.56</td><td><input type="submit" value="+" /></td>
        </tr>
        <tr>
            <td>4</td><td>Туфля без задника</td><td>42.31</td><td><input type="submit" value="+" /></td>
        </tr>
        <tr>
            <td>5</td><td>Бинокль "Соседка"</td><td>58.00</td><td><input type="submit" value="+" /></td>
        </tr>
    </tbody>
</table>


 ну и стили:

body
{
    font-family: sans-serif;
}

.grid, td, th
{
    border-collapse: collapse;
    border: 1px solid #A4BED4;
}

.grid th
{
    background-color: #A4BED4;
}
.grid tr
{
    background-color: #F0F8FF;
}

.grid tr:hover
{
    background-color: #E3EFFF;
}

Перед вами самая привычная грида с заказом товаров. Кнопка «+» добавляет товар в корзину покупок (функционал допишите сами по необходимости). Что мне не нравится в такой странице — изобилие этих ненужных кнопок. Ведь для заказа товара, нам совершенно нет необходимости держать их перед глазами. А скорее наоборот, показывать их только при необходимости.

Давайте сделаем это:

для начала спрячем кнопку по-умолчанию

.grid tr input
{
    visibility: hidden;
}

заметьте — в таком примере, будут спрятаны все input-контролы в строке (tr), если вас это не устраивает, вы должны подписать input'ту свой класс и тогда поменять строчку на .grid tr .your-class.

теперь покажем по наведению курсора на строку таблицы:

.grid tr:hover input
{
    visibility: visible;
}

Проверяем. Радуемся.

"Enjoy", как я люблю писать на доске в списке практических заданий.

Теперь другой пример, когда нам нужно заказать какое-то определённое количество товара (шт.)

<table class="grid">
    <thead>
        <tr>
            <th>#</th><th>Lunch</th><th>Count</th><th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td><td>Вареники с каротшкой</td><td>1</td><td>18.75</td>
        </tr>
        <tr>
            <td>2</td><td>Борщ со сметаной</td><td>4</td><td>7.19</td>
        </tr>
        <tr>
            <td>3</td><td>Солянка мясная</td><td>1</td><td>9.35</td>
        </tr>
        <tr>
            <td>4</td><td>Курица гриль</td><td>2</td><td>27.45</td>
        </tr>
        <tr>
            <td>5</td><td>Перец острый</td><td>0</td><td>0.58</td>
        </tr>
    </tbody>
</table>


body
{
    font-family: sans-serif;
}

.grid, td, th
{
    border-collapse: collapse;
    border: 1px solid #A4BED4;
}

.grid th
{
    background-color: #A4BED4;
}
.grid tr
{
    background-color: #F0F8FF;
}

.grid tr:hover
{
    background-color: #E3EFFF;
}

Замечательно. Надеюсь у вас получилось то же, что и у меня.

Скажу честно, это пример с моей практики, но я сделал ещё в разы сложнее ;).

Вернёмся к нашему примеру, добавим в третье поле три div-а:

<div class="button"><a href="#">-</a></div>
<div class="field">4</div>
<div class="button"><a href="#">+</a></div>


задумка сделать вот такой Up-Down «контрол»

-

4

+

Реакцию на нажатие ссылок уж потрудитесь описать сами, если вам это нужно. Думаю вот тут без JS или AJAX или... (нужное впишите) не обойтись.

Подпишем кнопки классом button, а поле с цифрой field и придадим желаемый внешний вид:

.grid .button, div.field
{
    float: left;
    border: 1px solid #A4BED4;
    height: 22px;
}

тут в общем-то всё ясно, кроме свойства float. Ему будет посвящена одна из следующих статей (ссылка) о макетизации страницы при помощи div-ов. Для текущей статьи будет достаточно сказать, что float: left заставит элементы прижиматься друг к другу слева.

Ну а для особо любознательных:

• w3.org: Visual formatting model. Floats
• w3.org: Cascading Style Sheets. Floating Elements
• w3schools: CSS float
• w3schools: CSS float property

.grid .button
{
    width: 22px;
    test-align: center;
    background-color: #E6E6FA;     visibility: hidden;
}

По-умолчанию кнопка скрыта visibility: hidden;

.grid .button a
{
    text-decoration: none;
    display: block;
}

Два очень важных свойства стиля ссылки <a... Первое уберёт надоедливое нижнее подчёркивание со ссылки при наведении курсора мыши. Второе заставит элемент отображаться блоком — занимать всё предоставленное пространство в рамках контейнера (определение display: block крайне неточное, но этого будет достаточно, что бы донести суть в рамках этой статьи), это нам даст полезный результат — нажатие мыши будут обрабатываться, как нажатие на ссылку когда курсор находиться над контейнером, даже необязательно над самой ссылкой.

Блок «почемучек»:

• w3.org: Visual formatting model. The 'display' property
• w3.org: Visual formatting model. Relationships between 'display', 'position', and 'float'
• w3schools: CSS display Property
• w3schools: CSS Display and Visibility 

.grid .field
{
    width: 22px;
    text-align: center;
}

тут всё понятно

и..., как всегда — завершающий штрих:

.grid tr:hover .button
{
    visibility: visible;
}

Показывает кнопку, при наведении курсора мыши на строку таблицы.

Дальше вы можете дать волю фантазии и применить полученное умение как вам вздумается и ещё более изощрённым способом. Например в таблице комментариев форума показывать ссылки Edit, Delete, Quote для поста только при наведении курсора мыши на строку с самим постом.

Таким образом мы решаем массу задач:

• скрываем от пользователя ненужные ему элементы страницы и показываем в тот момент, когда это нужно. Это создаёт впечатление интерактивности страницы. Да и вообще страницы смотрится «легче» и воспринимается проще.
  
• отказываемся от JS, в которых не было необходимости.
  
• получаем более простой код страницы.
• ну и в конце-то концов красуемся своими навыками в CSS.