이미지 드롭 다운리스트

Question

나는 선택할 일련의 이미지를 사용자에게 제공 할 수있는 드롭 다운 목록을 찾고 있습니다. 각 이미지는 약 50x50 픽셀이며 작은 텍스트 설명이 이미지 아래에 표시됩니다. jQuery와 호환 가능한 ASP.NET 솔루션이 선호됩니다.

Answer 1

이 작업을 수행하기 위해 기본 jQuery 플러그인을 작성했습니다. 일어날 일은 가짜 드롭 다운 목록이 기존 select 태그에서 만들어 질 것입니다. 원래 선택 항목이 숨겨지고 가짜 메뉴가 표시됩니다. 새로운 메뉴가 생성 될 때 콜백 (callback)하여 각 옵션에 대해 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; 
      } 
     });