图片下拉列表

我正在寻找一个下拉列表,可以向用户显示一系列图像供您选择.每张图片大约为50x50像素,图片下方会显示小文字说明.一个jQuery和兼容的ASP.NET解决方案将是首选.

我写了一个超级基本的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 "
" + t; 
            }
        });