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

图片下拉列表

1 个答案: