图片DROPDOWNLIST [英] Image Dropdownlist

问题描述

我要寻找一个下拉列表，可以present用户提供一系列的图像可供选择。每个图像将约50x​​50像素和一个小的文字说明将成为下的图像。一个jQuery和ASP.NET compatable解决方案将是preferred。

I am looking for a drop down list which can present the user with a series of images to choose from. Each image will be about 50x50 pixels and a small text description will be under the image. A jQuery and compatable ASP.NET solution would be preferred.

推荐答案

我写了一个超级基本的jQuery插件中做到这一点。会发生什么事是假的下拉列表将会从现有的select标签来创建。最初的选择将被隐藏，而假的菜单将显示。作为正在创建的新菜单，将回调来获取HTML来显示每个选项。在这个功能可以传回的图像。

I wrote a super basic jQuery plug in to accomplish this. What will happen is a a fake drop down list will be created from an existing select tag. The original select will be hidden, and the fake menu will be shown. As the new menu is being created, it will callback to get the HTML to show for each option. In this function you can pass back an image.

(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在现有的选择。也传递一个函数来解决模板每个项目

To use, call templatedSelect on your existing select. Also pass in a function to resolve the template for each item

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

这篇关于图片DROPDOWNLIST的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！