Выпадающий список изображений

Question

Я ищу раскрывающийся список, который может предоставить пользователю серию изображений на выбор. Каждое изображение будет размером около 50х50 пикселей, а под изображением будет небольшое текстовое описание Было бы предпочтительным jQuery и совместимое решение ASP.NET.

Answer 1

Я написал супер базовый плагин jQuery для достижения этой цели. Что произойдет, это поддельный выпадающий список будет создан из существующего тега выбора. Исходный выбор будет скрыт, и будет показано поддельное меню. Когда создается новое меню, оно вызывает обратный вызов, чтобы отобразить HTML для каждой опции. В этой функции вы можете передать изображение обратно.

(function($) {
$.fn.templatedSelect = function(options) {

var defaults = {
    selectHandleImage : "selectHandle.gif",
    width : "65px",
    getOption : function(value, text) {
            return text;
        }
};
var opts = $.extend(defaults, options);

    var $originalSelect = this;

    var $container = $(document.createElement('div'))
        .css("clear", "both")
        .css("width", opts.width)
        .hover(
            function () {
                $selectBox.css("border-color", "#000000");
            }, 
            function () {
                if (!$menuItems.is(":visible"))
                    $selectBox.css("border-color", "#C0C0C0");
            })
        .attr('id', "imageSelect_container_" + this.attr('id'));

    var $selectBox = $(document.createElement('div'))
        .css("border", "solid 1px #C0C0C0")
        .css("overflow", "hidden")
        .css("width", "100%")

    var $selectedItem = $(document.createElement('div'))
        .css("padding", "4px");

    var $selectHandle = $(document.createElement('div'))
        .css("float", "right")
        .css("background-color", "#F0F0F0")
        .css("padding", "4px") 
        .css("cursor", "hand")          
        .click(function(e) {
            ToggleMenuItems();
        })
        .html(
            $(document.createElement('img')).attr("src", opts.selectHandleImage)
        );

    var $menuItems = $(document.createElement('div'))
        .css("position", "absolute")
        .css("margin-top", "-1px")
        .css("border", "solid 1px #000000")
        .css("background-color", "#FFFFFF")
        .hide();

    $originalSelect.children("option").each(function(i, selected) {   
        var $menuItem = $(document.createElement('div'))
            .css("padding", "4px")
            .html(opts.getOption($(this).val(), $(this).text()))
            .val($(this).val())
            .click(function(e) {
                ToggleMenuItems();
                $originalSelect.val($(this).val());
                $selectedItem.html($(this).html());
            })
            .hover(
                function () {
                    $(this).css("background-color", "#81BEF7");
                }, 
                function () {
                    $(this).css("background-color", "#FFFFFF");
                })
            .appendTo($menuItems);
    });

    //preset the selectedItem
    $selectedItem.html(
        $menuItems.children("div:eq("+$originalSelect[0].selectedIndex+")").html()
    );

    //put everything together
    $selectBox.appendTo($container);
    $selectHandle.appendTo($selectBox);
    $selectedItem.appendTo($selectBox);
    $menuItems.appendTo($container);

    //hide the original select and put ours in
    $originalSelect.hide();
    $container.insertBefore($originalSelect);

    $selectHandle.height($selectBox.height());
    $menuItems.width($selectBox.width());

    function ToggleMenuItems() {
        if ($menuItems.is(":visible")) {
            $menuItems.hide();
            $selectBox.css("border", "solid 1px #C0C0C0");
        } else {
            $menuItems.show();
            $selectBox.css("border", "solid 1px #000000");
        }
    }

}})(jQuery);

Чтобы использовать, вызовите templatedSelect для существующего выбора. Также передайте функцию для разрешения шаблона для каждого элемента

    $().ready(function() {
        $('#selectId').templatedSelect({
            getOption : function(v, t) {
                return "<img src='" + v + "'/><br/>" + t; 
            }
        });