javascript - 如何在 HTML javascript 中创建带有图标的选择框？

Question

我想创建一个对话框来从图标网格中选择特定图标。如下所示:

我正在使用 jQuery 即兴对话框来进行其他对话框的使用。但我不知道如何制作这个东西。请帮助我，我对此很陌生。

Answer 1

我想你可以把一堆链接放在一个容器中，然后在里面放一个img。

<div class="iconSelector">
    <a href="selecticon.php?icon=1" title="Select 'computer icon'"
       ><img src="computer.png" alt="computer icon"/></a>
    <a href="selecticon.php?icon=2" title="Select 'other icon'"
       ><img src="computer.png" alt="other icon"/></a>
    <a href="selecticon.php?icon=3" title="Select 'computer icon'"
       ><img src="computer.png" alt="computer icon"/></a>
  ...
</div>

然后，只需一点点 CSS 就可以了:

.iconSelector {
    display: inline-block;
    padding: 8px;
}
.iconSelector a img {
    width: 32px; 
    height: 32px;
}

Demo fiddle

如果您喜欢/需要，您也可以添加一些 Javascript 来处理点击。

$(function(){
    $('.iconSelector').on('click', 'a', function(e){
        e.preventDefault();
        alert($(this).attr('href') + ' was clicked');
    });
});

Demo fiddle