困难的HTML、JavaScript、CSS网格页面

Question

困难的HTML、JavaScript、CSS网格页面

9

请注意，以下是我正在处理的一个简化/通用示例。我只需要能够使其工作的HTML、JavaScript和/或CSS。我希望不使用任何javascript库就可以实现这个功能。此外，该页面将基于从数据库加载的数据构建。这只需要在较新的IE / Firefox浏览器中工作。

我需要创建一个网页，其中有一个固定大小的“单元格”网格，每个单元格大小为150像素 x 150像素。这是一个6x3网格的示例，但我的网格大小将根据数据库数据变化（例如4x10或3x5等）：

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

每个单元格将需要以下内容： 1）包含一个150像素×150像素的“主”图像。希望可以使用CSS sprites在浏览器中更改此图像。我希望将所有这些图像粘贴到单个文件中，并裁剪到每个单元格所需的大小。 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 绝对不是我的强项。我已经尝试了很长时间，并见过/使用了许多关于如何制作各种组件的示例。但当把所有东西放在一起时，我还没有找到任何能够实现的东西。

- KM.

这可能需要使用display: table（以及相关的显示样式），特别是因为您正在针对支持这些样式的较新浏览器。http://www.w3.org/TR/CSS2/tables.html#table-display - Tim M.

有没有可能使用表格？比如说，每个单元格（根据数据库数据生成）都有自己的div（可能还有自己的css），可以进行操作。这只是一个想法。 - Gobbledigook

@Gobbledigook，是的，我完全可以使用表格。 - KM.

@KM，请您看一下我的解决方案，如果有不符合您的期望之处，请您告诉我。 - zatatatata

你不需要使用表格来完成这个任务。 - Rob

@Rob 实际上..你需要这样做，否则在IE7中无法正常工作（真正的IE7，而不是IE8在IE7兼容模式下）。 - I.G. Pascual

5个回答

2

我确实建议使用大表格。

而且，如果这更或多或少是您需要的内容，那么实现起来并不是很难：

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

（我今天有点无聊 :-)）

- ptriek

即使我使用了新的示例，仍然无法在第二行上实现鼠标悬停效果。当我说“保留50x50”时，即使我将src =“http：//placehold.it/50x50”编辑为src =“LocalFile.png”，我仍然看到50x50的图形。 - KM.

第二行：奇怪，它对我来说完美无缺（而且如之前所述，代码中没有任何可能引发此问题的东西） 50x50图像：现在更奇怪了。尝试清除缓存，尝试其他浏览器？ - ptriek

你好，jblasco的解决方案比我的好一点（尽管相信我，表格并不是魔鬼，有时只是有点棘手）。 - ptriek

访问http://jsfiddle.net/gNBSc/4/时，在IE 8中可以正常工作，但在Firefox 8中无法正常工作。在Firefox中，第二行的鼠标悬停叠加层不会显示。 - KM.

我恐怕@jblasco是你唯一的选择，如果不使用表格，就无法保持垂直居中。所以我希望你能在IE7上让它正常工作... - ptriek

显示剩余4条评论

1

尝试了一下，你可以在这里找到尝试结果。如果有误解，请告诉我。在FF5、最新的Chrome、IE8（以及IE7兼容模式）中进行了测试。不使用任何库，实际上不需要是一个网格（取决于您可以在CSS中设置的宽度），并且会给您点击的图像和按钮的索引。哦，而且网格应该很容易在PHP等中生成（基于您的数据库）。编辑：现在文本也是垂直对齐的。

- zatatatata

@Nacho，现在文本已经垂直对齐。 - zatatatata

检查IE7，文本垂直不对齐。 - I.G. Pascual

1

我刚想出这个解决方案 http://jsfiddle.net/LNw3G。它是使用table和div元素的混合。

我还添加了一个图片雪碧图，通过类名left、center、right、top和bottom来定位（这样您就不必编辑css中的所有图片位置），以及根据锚点class解析特定调用的javascript。

这是单元格HTML的示例。cell-wrap cell1包含元素并定位背景图像精灵，表格将文本垂直对齐，而cell则包含受控定位的图像包装到image div中。

<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。

附注：对于IE6，您可以使用一个解决方法来模拟非锚元素的悬停效果，即添加一个特定的hover.htc文件和CSS行body { behavior: url(hover.htc); }（更详细信息请参见此处）。

附注：请注意<!DOCTYPE声明。如果留下空格，可能会出现这样的情况<! DOCTYPE，IE7可能会将其视为无效并跳转到怪异模式（在测试时，这让我抓狂！）。

- I.G. Pascual

0

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

这基本上是您想要的一个示例，其中包括：

浮动的div...允许自定义“表格大小”；
反应灵敏的鼠标悬停效果“有点随机化”；最后，
集中的内容（请参见每个网格中的集中文本）；

注意：您可以调整所需的各种行/列数。=）

- PicoCreator

我认为OP并不是想让表格元素随机闪烁，而是有不同外观的表格元素。 - kontur

@kontur，= / 问题没有说明确定显示/隐藏哪个元素的逻辑...所以我将其随机化，以显示可以显示/隐藏他可以投掷的任何组合。= P - PicoCreator

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- justisb · Accepted Answer

个人认为表格很麻烦，所以我更喜欢使用浮动的div，下面是我会做的一些内容：

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

您可以轻松地将文本内容替换为图像，或通过CSS添加背景图片，以及根据每个“控制”div具有的1-9类调用单独的JS函数。

编辑：

这里是解决方案的最新版本，它包括一个实际的表格而不是使用display: table-cell，以及额外的图像和包装示例标记，以及一个基本的JavaScript示例。这是为了修复旧版浏览器支持的问题，并满足KM的要求。虽然总体结构与原始 fiddle 相比仍然非常相似。