下拉选择图像

Question

我想创建一个下拉选择,其中包含图像而不是文本作为选项.我已经完成了一些谷歌搜索并在这里搜索Stack Overflow,通常给出的答案是使用jQuery组合框.

在我看来,这个解决方案的问题在于你必须提供文本.看起来图像只是左侧文本旁边的图标.如果我错了,请纠正我,但这个解决方案不会涵盖我正在尝试做的事情 - 这完全取代了带有图像的文本.

关于我正在尝试做什么的一些背景 - 我正在尝试为用户创建一个下拉列表,以便在在线绘画/涂鸦应用上选择线条粗细.图像将是不同厚度的线条,有点像mspaint.

Answer 1

你甚至不需要javascript来做到这一点!

我希望这会引起你的兴趣,所以这就是它.一,html结构:

<div id="image-dropdown">
    <input type="radio" id="line1" name="line-style" value="1" checked="checked" />
    <label for="line1"></label>
    <input type="radio" id="line2" name="line-style" value="2" />
    <label for="line2"></label>
    ...
</div>

Whaaat？单选按钮？正确.我们将它们设计为带有图像的下拉列表,因为这就是您所追求的!诀窍是知道当标签正确链接到输入("for"属性和目标元素id)时,输入将隐式变为活动状态; 单击标签=单击单选按钮.这里有一些略有缩写的css,注释内联:

#image-dropdown {
    /*style the "box" in its minimzed state*/
    border:1px solid black; width:200px; height:50px; overflow:hidden;
    /*animate the dropdown collapsing*/
    transition: height 0.1s;
}
#image-dropdown:hover {
    /*when expanded, the dropdown will get native means of scrolling*/
    height:200px; overflow-y:scroll;
    /*animate the dropdown expanding*/
    transition: height 0.5s;
}
#image-dropdown input {
    /*hide the nasty default radio buttons!*/
    position:absolute;top:0;left:0;opacity:0;
}
#image-dropdown label {
    /*style the labels to look like dropdown options*/
    display:none; margin:2px; height:46px; opacity:0.2; 
    background:url("http://www.google.com/images/srpr/logo3w.png") 50% 50%;}
#image-dropdown:hover label{
    /*this is how labels render in the "expanded" state.
     we want to see only the selected radio button in the collapsed menu,
     and all of them when expanded*/
    display:block;
}
#image-dropdown input:checked + label {
    /*tricky! labels immediately following a checked radio button
      (with our markup they are semantically related) should be fully opaque
      and visible even in the collapsed menu*/
    opacity:1 !important; display:block;
}

这里有完整的例子:http://jsfiddle.net/NDCSR/1/

NB1:你可能需要在位置:相对+高z-index的容器内使用position:absolute.

NB2:为各个线条样式添加更多背景时,请考虑使用基于标签的"for"属性的选择器,如下所示:

label[for=linestyle2] {background-image:url(...);}

Answer 2

检查这个例子..一切都很容易完成http://jsfiddle.net/GHzfD/

编辑:截至2013年7月2日更新/工作:jsfiddle.net/GHzfD/357

#webmenu{
    width:340px;
}

<select name="webmenu" id="webmenu">
    <option value="calendar" title="http://www.abe.co.nz/edit/image_cache/Hamach_300x60c0.JPG"></option>
    <option value="shopping_cart" title="http://www.nationaldirectory.com.au/sites/itchnomore/thumbs/screenshot2013-01-23at12.05.50pm_300_60.png"></option>
    <option value="cd" title="http://www.mitenterpriseforum.co.uk/wp-content/uploads/2013/01/MIT_EF_logo_300x60.jpg"></option>
    <option value="email"  selected="selected" title="http://annualreport.tacomaartmuseum.org/sites/default/files/L_AnnualReport_300x60.png"></option>
    <option value="faq" title="http://fleetfootmarketing.com/wp-content/uploads/2013/01/Wichita-Apartment-Video-Tours-CTA60-300x50.png"></option>
    <option value="games" title="http://krishnapatrika.com/images/300x50/pellipandiri300-50.gif"></option>
</select>

$("body select").msDropDown();