如何在HTML javascript中創建帶有圖標的選擇框？

Question

我想創建一個對話框以從圖標網格中選擇一個特定的圖標。

我將jQuery Impromptu對話框用於其他對話框。但是我不知道該如何制作。請幫助我。

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;
}

演示小提琴

如果您願意/可以，可以添加一些Javascript來處理點擊。

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

演示小提琴