Как вы могли бы реализовать что-то вроде панелей данных Excel 2007 в HTML / CSS / JS? - PullRequest
Новая
       24

Как вы могли бы реализовать что-то вроде панелей данных Excel 2007 в HTML / CSS / JS?

1 голос
/ 13 ноября 2008

То, что я хотел бы сделать, это создать HTML / CSS / JS-версию следующего. Линии сетки и другие аспекты не важны. Это больше вопрос, как сделать фоновые панели данных.

alt text
(источник: tech-recipes.com )

Ответы [ 3 ]

1 голос
/ 13 ноября 2008

Сделать бары в качестве фоновых изображений и расположить их, чтобы показать значения. например. с фиксированной шириной столбца 100px: 

<div style="background: url(bg.gif) -50px 0 no-repeat;">5</div>
<div style="background: url(bg.gif) -20px 0 no-repeat;">8</div>

Если ваши столбцы должны иметь гибкий размер (не фиксированный и неизвестный во время создания страницы), это немного сложнее: 

<style type="text/css">
    .cell { position: relative; }
    .cell .back { position: absolute; z-index: 1; background: url(bg.gif); }
    .cell .value { position: relative; z-index: 2; }
</style>

<div class="cell">
    <div class="back" style="width: 50%;">&nbsp;</div>
    <div class="value">5</div>
</div>
<div class="cell">
    <div class="back" style="width: 80%;">&nbsp;</div>
    <div class="value">8</div>
</div>
0 голосов
/ 13 ноября 2008

Я бы использовал компонент Grid из библиотеки Ext JS или библиотеку YUI Yahoo! компонента DataTable . Кросс-браузерная совместимость и т. Д. Работа сделана за вас.

0 голосов
/ 13 ноября 2008

Подобное решение на основе javascript кросс-браузерный градиент может быть хорошим началом.

С помощью некоторого DHTML вы можете сделать полосу с заданной длиной .

...