Как бы вы реализовали веб-интерфейс с некоторым текстом, повернутым на 90 °? - PullRequest
0 голосов
/ 25 марта 2011

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

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

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

Моя форма работает на Ajax. При загрузке страницы заполняется только календарь, а заголовки групп добавляются в столбцы.

Проблемы

  1. Я не уверен, как реализовать эту таблицу в первую очередь? Как использовать элемент table или использовать плавающий div/ul? Все ячейки содержимого (не заголовки и не первый столбец с календарными датами) имеют одинаковое измерение, поэтому я могу использовать другие вещи, кроме таблицы. Почему я склоняюсь к реализации div/ul? Потому что с плавающей точкой было бы проще динамически загружать дополнительные столбцы, которые представляют элементы группы. Я предполагаю, что это было бы сложно реализовать с использованием таблиц, потому что у нас не может быть групп столбцов, поскольку у нас может быть TBODY элементов строк столбцов (транспонирование этих данных невозможно).

  2. Поскольку ширина моих столбцов должна быть одинаковой, я должен отображать имена групп и элементов по вертикали. Таким образом, все столбцы будут иметь одинаковую ширину, но они должны отображать текст таким образом в IE (если возможно V7 +), FF и CH.

Вопросы

  1. Как вы предлагаете сделать это представление (с использованием table или div/ul элементов)? Вы также можете предложить совершенно другую альтернативу, которая мне не пришла в голову; может быть, вы сами реализовали нечто подобное ...

  2. Как надежно вращать текст моих заголовков? Я видел матричные фильтры в IE и трансформации в браузерах Mozilla и Webkit, но текст выглядит позиционированным из оригинального поля контента. Я также видел реализации SVG, но я не знаю о его поддержке браузера (AFAIK IE не поддерживает его без плагинов).

  3. Есть ли способ сохранить столбцы одинаковой ширины, но не использовать поворот текста?

Ответы [ 2 ]

0 голосов
/ 02 августа 2011

Решение, которое работает на FF, CH и IE

Это то, что я закончил с и работает довольно хорошо в разных основных браузерах (FF, CH и IE). Я протестировал его в IE8, и он работал, и он также работает в IE9. Так что здесь для дальнейшего использования, если вам может понадобиться это самостоятельно:

  1. Я использую не таблицы, а плавающие DIV
  2. Каждая ячейка является отдельным DIV с заголовком
  3. Заголовки повернули текст

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

Это упрощенный HTML-код:

<div class="head">
    <div class="vert">Vertical text example</div>
</div>

и сопровождающий CSS:

.container .head
{
    /* float your elements or inline-block them to display side by side */
    float: left;
    /* these are height and width dimensions of your header */
    height: 10em;
    width: 1.5em;
    /* set to hidden so when there's too much vertical text it will be clipped. */
    overflow: hidden;

    /* these are not relevant and are here to better see the elements */
    background: #eee;
    margin-right: 1px;
}
    .container .head .vert
    {
        /* line height should be equal to header width so text will be middle aligned */
        line-height: 1.5em;
        /* setting background may yield better results in IE text clear type rendering */
        background: #eee;
        display: block;

        /* this will prevent it from wrapping too much text */
        white-space: nowrap;
        /* so it stays off the edge */
        padding-left: 3px;

        /* IE specific rotation code */
        writing-mode: tb-rl;
        filter: flipv fliph;

        /* CSS3 specific totation code */
        /* translate should have the same negative dimension as head height */
        transform: rotate(270deg) translate(-10em,0);
        transform-origin: 0 0;
        -moz-transform: rotate(270deg) translate(-10em,0);
        -moz-transform-origin: 0 0;
        -webkit-transform: rotate(270deg) translate(-10em,0);
        -webkit-transform-origin: 0 0;
    }
0 голосов
/ 25 марта 2011

Чтобы ответить на вопрос 2:

Проблема, с которой вы столкнулись, возможно, связана с тем, что filter в IE и стандартное вращение CSS3 используют разные точки вращения, то есть точку, вокруг которой вращается элемент.

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

Наилучший справочный сайт для кросс-браузерной ротации, который я знаю, это: http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

Надеюсь, это поможет.

...