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

问题描述

仅供参考，这是我正在研究的简化/通用示例.我只是在寻找可以使它工作的 HTML、JavaScript 和/或 CSS.我希望这可以在没有任何 javascript 库的情况下完成.此外，该页面将基于从数据库加载的数据构建.这只需要在较新的 IE/Firefox 浏览器中工作.

FYI, This is a simplified/generic example of what I'm working on. I'm just looking for the HTML, JavaScript, and/or CSS that can make this work. I'd prefer that this can be done without any javascript library. Also, the page will be built based on data loaded from a database. This only needs to work in newer IE/Firefox browsers.

我需要创建一个网页，上面有一个固定大小的单元格"网格，每个单元格将是 150 像素 x 150 像素.这是示例 6x3 网格，但我的网格大小会有所不同(4x10 或 3x5 等，根据数据库数据):

I need to create a web page that has a grid of fixed size "cells" on it, each cell will be 150 pixels by 150 pixels. Here is sample 6x3 grid, but my grids will vary in size (4x10 or 3x5, etc. as per the database data):

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

每个单元都需要以下内容:

each of these cells will need the following:

1) 包含一个 150 x 150 像素的主"图像.需要在浏览器中更改此图像，如果可能的话，希望使用 CSS sprites.我想将所有这些图像粘贴到一个文件中并裁剪为每个单元格中需要的内容.

1) contain a "main" image that is 150 pixels by 150 pixels. This image will need to be changed in the browser, hopefully using CSS sprites if possible. I'd like to stick all of these images into a single file and crop down to what is needed in each cell.

2) 当鼠标悬停在单元格"上时，将显示可点击图像的叠加层.在下面的示例中，我使用了字母，但图像不会是字母，更像是图标.这些点击需要能够为每个图像运行不同的 javascript 函数(因此单击A"图像将运行函数 A，而单击F"将运行函数 F，等等).图像将取决于数据库信息，因此对于不同的单元格，一些将被包括在内，而另一些则不包括在内.它们在细胞内的位置将始终是固定和控制的.以下是单个单元格在顶部显示图像(字母)时的外观:

2) When the mouse is over a "Cell", an overlay of click-able images will display. In the sample below I use letters, but the images will not be letters, more like icons. These clicks need to be able to run a different per image javascript function (so a click on the "A" image will run function A, while a click on "F" will run function F, etc). Images will be dependent on database info, so for different cells, some will be included and other not. Their position within the cell will always be fixed and controlled. Here is what a single cell might look with the images (letters) over top:

---------
|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 下方，那将是最好的，但如果它位于所有内容之上，那也可以.此文本会有一个合理的长度限制，因此滚动超过 150 像素 x 150 像素应该不是问题，但需要换行.

3) free text wrapping and centered within the cell. It would be best if this free text was above the main image #1 and below the click-able images #2, but if it was on top of everything than that would be OK too. There will be a reasonable length limit on this text, so scrolling beyond the 150px x 150px should not be an issue, but it will need to wrap.

郑重声明，这不是家庭作业！而 HTML/javascript/CSS 肯定不是我的强项.我已经为此工作了一段时间，并且已经看到/使用了许多有关如何执行此操作的各种组件的示例.当所有的东西放在一起时，我还没有找到任何可以工作的东西.

For the record, this is not homework! and HTML/javascript/CSS is certainly not my strength. I have been working at this for a while and have seen/worked with many examples of how to do various components of this. I've yet to find anything that can work when everything id put together.

推荐答案

我个人认为表格是魔鬼，所以这里更像是我会使用浮动 div 做的事情:

Personally I think tables are the devil, so here is something more like what I would do that uses floated divs:

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

您可以轻松地将文本内容替换为图像，或通过 CSS 添加背景图像，以及基于每个控件"div 具有的九类调用单独的 JS 函数.

You could easily swap out the text content for images, or add background images through CSS, as well as call separate JS functions based on the one-nine class each "control" div has.

这是解决方案的最新版本，它确实包含一个实际的表格，而不是使用display: table-cell，以及用于图像和包装的附加示例标记，以及一个基本的 Javascript 示例.这样做是为了解决旧浏览器支持的问题，并满足 KM 的要求.虽然整体结构还是和原来的小提琴差不多.

Here is the most current version of the solution, which does include an actual table rather than using display: table-cell, as well as additional example markup for images and wrapping, and a basic Javascript example. This was done to fix an issue with older browser support, and to meet KM's requirements. Though the overall structure is still pretty much the same as the original fiddle.

这篇关于困难的 HTML、JavaScript、CSS 网格页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！