图片下拉列表

Question

我正在寻找一个下拉列表，它可以为用户提供一系列可供选择的图像。每张图像大约为 50x50 像素，图像下方将有一个小文本描述。 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; 
            }
        });