javascript - 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');
    });
});

デモフィドル