1

是否有任何 CSS 工具包可以让您重现单选按钮功能，但使用以网格布局的照片/图像？例如，汽车租赁网站上的汽车模型网格，用户需要通过单击汽车图片为其租赁应用程序选择首选汽车。

这类似于 HTML 选择菜单小部件，除了：

  • 布局是一个网格，而不是一行项目（即需要换行）。
  • 当前选定的项目是持久的并且始终可见，可选择带有复选标记（或其他基于图标的指示器以显示选择）
  • 如果在浏览器调整大小时网格能够智能地布局（重新计算行和列），那就太好了。
  • 可以选择在单选（单选按钮）和多选（复选框按钮）模式之间进行选择也很好。

我认为这很简单，但我很难找到这样的东西。JQuery UI 按钮功能很接近，但（我认为）不提供以图像为中心的按钮或重排网格。

4

1 回答 1

2

这应该适合你。您将每辆车包装在 a 中DIV，在其中放置一个复选框，然后将图像包装在label复选框中。单击图像会选中该框。

然后 jQuery 将包装的类更改DIV为 selected 以便您可以对其进行样式设置以使汽车被选中。

jQuery 

jQuery(document).ready(function ($) {
    'use strict';
    $('input:checkbox').click(function () {
        $(this).closest('.photo').toggleClass('selected');
    });
});

HTML

<div class="photo">
    <input type="checkbox" name="image[0][status]" value="1" />
    <label for="image[0][status]">
        <img src="#" />
    </label>
</div>
于 2012-04-17T23:54:55.970 回答