сложный HTML, JavaScript, CSS сетка

Question

К вашему сведению, это упрощенный / общий пример того, над чем я работаю.Я просто ищу HTML, JavaScript и / или CSS, которые могут сделать эту работу.Я бы предпочел, чтобы это можно было сделать без какой-либо библиотеки JavaScript.Также страница будет построена на основе данных, загруженных из базы данных.Это необходимо для работы только в новых браузерах IE / Firefox.

Мне нужно создать веб-страницу с сеткой «ячеек» фиксированного размера, каждая ячейка будет размером 150 на 150 пикселей.Вот пример сетки 6x3, но мои сетки будут различаться по размеру (4x10 или 3x5 и т. Д. В соответствии с данными базы данных):

-------------------------------------
|     |     |     |     |     |     |
|     |     |     |     |     |     |
|     |     |     |     |     |     |
-------------------------------------
|     |     |     |     |     |     |
|     |     |     |     |     |     |       6x3 grid of "cells"
|     |     |     |     |     |     |
-------------------------------------
|     |     |     |     |     |     |
|     |     |     |     |     |     |
|     |     |     |     |     |     |
-------------------------------------

каждой из этих ячеек потребуется следующее:

1) содержит «основное» изображение размером 150 на 150 пикселей.Это изображение нужно будет изменить в браузере, возможно, используя CSS-спрайты, если это возможно.Я хотел бы вставить все эти изображения в один файл и обрезать до того, что необходимо в каждой ячейке.

2) Когда мышь находится над «Ячейкой»,наложение кликабельных изображений будет отображаться.В приведенном ниже примере я использую буквы, но изображения не будут буквами, больше похожими на значки.Эти щелчки должны иметь возможность запускать различные функции JavaScript для каждого изображения (поэтому нажатие на изображение «A» запускает функцию A, а нажатие на «F» запускает функцию F и т. Д.).Изображения будут зависеть от информации базы данных, поэтому для разных ячеек некоторые будут включены, а другие нет.Их положение внутри клетки всегда будет фиксированным и контролируемым.Вот как может выглядеть одна ячейка с изображениями (буквами) сверху:

---------
|A  B  C|
|D  E  F|     a single cell where all overlay images appear
|G  H  I|
---------

---------
|A     C|
|   E   |     a single cell where only some overlay images appear
|G      |
---------

3) свободная переноса текста и центрирование внутри ячейки.Было бы лучше, если бы этот свободный текст был выше основного изображения # 1 и ниже изображений # 2, способных щелкать мышью, но если бы он был поверх всего, то это тоже было бы хорошо.Для этого текста будет разумное ограничение длины, поэтому прокрутка свыше 150px x 150px не должна быть проблемой, но ее нужно будет обернуть.

Для справки, это не домашняя работа!и HTML / Javascript / CSS, конечно, не моя сила.Я работал над этим некоторое время и видел / работал со многими примерами того, как сделать различные компоненты этого.Я еще не нашел ничего, что могло бы сработать, когда все было собрано.

Answer 1

Лично я думаю, что таблицы - это дьявол, так что здесь есть кое-что более похожее на то, что я бы сделал, используя плавающие div:

http://jsfiddle.net/gbcd6/11/

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

РЕДАКТИРОВАТЬ:

Вот самая последняя версия решения , которая включает в себя фактическую таблицу вместо использования display: table-cell, а также дополнительную разметку примера для изображений и обтекания и базовый пример Javascript.Это было сделано, чтобы исправить проблему с поддержкой старых браузеров и удовлетворить требования KM.Хотя общая структура все еще в значительной степени совпадает с оригинальной скрипкой.

Answer 2

Я бы действительно пошел за большим столом.

И это не так сложно сделать, по крайней мере, если это более или менее то, что вам нужно:

http://jsfiddle.net/gNBSc/4/

(мне немного скучно, сегодня: -)

Answer 3

Попробуйте, вы можете найти попытку здесь . Дайте мне знать, если что-то неправильно понял. Протестировано в FF5, новейшем Chrome, IE8 (и в режиме совместимости с IE7). Не использует библиотеки, не обязательно должен быть сеткой (зависит от ширины, которую вы можете установить в CSS) и дает вам индекс изображения и нажатой кнопки. Да, и сетка должна быть легко генерируемой (на основе вашей БД) в PHP и т. Д.

EDIT : Текст теперь также выровнен по вертикали.

Answer 4

Я только что предложил это решение http://jsfiddle.net/LNw3G. Это микс между использованием table и div элементов.

Я также добавил изображение sprite , расположенное по именам классов left , center , right , top и bottom (чтобы вам не приходилось редактировать все позиции изображения в вашем css) и javascript для разбора определенных вызовов в зависимости от привязки class.

Это пример HTML для отдельной ячейки. cell-wrap cell1 содержит элементы и позиции спрайта фонового изображения, таблица выравнивает текст по вертикали, а cell содержит управляемые позиционированные изображения, заключенные в image divs.

<div class="cell-wrap cell1">
    <table class="content">
        <tr>
            <td>Connection is not correct</td>
        </tr>
    </table>
    <div class="cell hidden">
        <div class="image left top">
            <a href="#linkA" class="linkA"><img src="http://goo.gl/wNDMe"></a>
        </div>
        <div class="image right top">
            <a href="#linkB" class="linkB"><img src="http://goo.gl/wNDMe"></a>
        </div>
        <div class="image left bottom">
            <a href="#linkC" class="linkC"><img src="http://goo.gl/wNDMe"></a>
        </div>
    </div>
</div>

Это значимый код JavaScript, который фильтрует якоря, содержащие имена классов с link, для требуемых конкретных функций:

$(function() {
    $(".cell a").click(function(e) {
        if ($(this).attr("class").match(/link(.)(\\s[\\b]*)?/)) {
            var param = $(this).attr("class").replace(/(.*\s)*link(.).*$/, "$2");
            doThings(param);
        }
    });
});

function doThings(param) {
    switch (param) {
    case 'A':
        //specific 'A' functions
        break;
    case 'B':
        //specific 'B' functions
        break;
    default:
        //default functions
        break;
}

Было протестировано IE7 +, FF, Chrome, Safari и Opera.

Ps: существует обходной путь для IE6 , который вы можете использовать для этого примера, состоящий в добавлении определенного файла hover.htc и строки css body { behavior: url(hover.htc); } ( более подробно здесь ) для имитации эффекта наведения на неядерных элементов.

Ps: будьте осторожны с декларацией <!DOCTYPE. Если вы оставите пустые места, возможно, что-то вроде <! DOCTYPE, IE7 может воспринимать это как недопустимый переход в режим причуд (во время тестирования это сводило меня с ума!).

Answer 5

http://jsfiddle.net/F37qs/1/

Пример того, чего бы вы хотели от

1. плавающие div-ы ... Допускаются пользовательские "размеры таблицы";
2. Реактивный ролловер "abit randomized"; и наконец,
3. Централизованный контент (см. Централизованный текст в каждой сетке);

Примечание: вы можете настроить различное количество строк / столбцов по вашему желанию. =)