下拉select图像
我想创build一个下拉select，其中有图像，而不是文本作为选项。 我做了一些谷歌search，并在这里search堆栈溢出，通常给出的答案是使用jQuerycombobox 。
这个解决scheme的问题在我看来，就是你必须提供文本。 它看起来像图像只是伴随左边的文字的图标。 纠正我，如果我错了，但这个解决scheme不会包括我想要做的 – 这是完全用图像replace文字。
一些我想要做的背景 – 我试图创build一个下拉列表，供用户select在线绘画/涂鸦应用的线条粗细。 图像将是不同厚度的线，类似mspaint。
检查这个例子..一切都轻松完成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.comhttp://img.dovov.com300x50/pellipandiri300-50.gif"></option> </select> $("body select").msDropDown();
你甚至不需要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？ 单选button？ 正确。 我们将它们的样式设置为带有图像的下拉列表，因为这就是您要做的！ 诀窍在于，当标签正确链接到input（即“for”属性和目标元素ID）时，input将隐式地变为活动的; 点击一个标签=点击一个单选button。 这里来来略带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.comhttp://img.dovov.comsrpr/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：您可能需要使用位置：绝对位置：relative + high z-index。
NB2：当为单独的线条样式添加更多的背景时，考虑使用基于标签的“for”属性的select器，如下所示：
label[for=linestyle2] {background-image:url(...);}
看起来像一个简单的HTML菜单会更简单。 使用html5数据属性的值或任何你想存储的方法和CSS来处理图像的背景或把它们放在HTML本身。
编辑：如果你被迫从一个现有的select，你不能摆脱，也有一些很好的插件，以及修改select为HTML。 Wijmo和Chosen是一对夫妇想到的
如果你想一下下拉选项的概念，select它非常简单。 对于你想要完成的事情，一个简单的<ul>就可以了。
<ul id="menu"> <li> <a href="#"><img src="" alt=""/></a> <!-- Selected --> <ul> <li><a href="#"><img src="" alt=""/></a></li> <li><a href="#"><img src="" alt=""/></a></li> <li><a href="#"><img src="" alt=""/></a></li> <li><a href="#"><img src="" alt=""/></a></li> </ul> </li> </ul>
你用CSS来devise它，然后一些简单的jQuery就可以完成。 我没有尝试过这个：
$('#menu ul li').click(function(){ var $a = $(this).find('a'); $(this).parents('#menu').children('li a').replaceWith($a). });
PLAIN JAVASCRIPT：
DEMO： http : //codepen.io/tazotodua/pen/orhdp
var shownnn = "yes"; var dropd = document.getElementById("image-dropdown"); function showww() { dropd.style.height = "auto"; dropd.style.overflow = "y-scroll"; } function hideee() { dropd.style.height = "30px"; dropd.style.overflow = "hidden"; } //dropd.addEventListener('mouseover', showOrHide, false); //dropd.addEventListener('click',showOrHide , false); function myfuunc(imgParent) { hideee(); var mainDIVV = document.getElementById("image-dropdown"); imgParent.parentNode.removeChild(imgParent); mainDIVV.insertBefore(imgParent, mainDIVV.childNodes[0]); }
#image-dropdown { display: inline-block; border: 1px solid; } #image-dropdown { height: 30px; overflow: hidden; } /*#image-dropdown:hover {} */ #image-dropdown .img_holder { cursor: pointer; } #image-dropdown img.flagimgs { height: 30px; } #image-dropdown span.iTEXT { position: relative; top: -8px; }
<!-- not tested in mobiles --> <div id="image-dropdown" onmouseleave="hideee();"> <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();"> <img class="flagimgs first" src="http://www.google.com/tvhttp://img.dovov.comsocialyoutube.png" /> <span class="iTEXT">First</span> </div> <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();"> <img class="flagimgs second" src="http://www.google.com/cloudprint/learnhttp://img.dovov.comicons/fiabee.png" /> <span class="iTEXT">Second</span> </div> <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();"> <img class="flagimgs second" src="http://www.google.com/tvhttp://img.dovov.comlplay.png" /> <span class="iTEXT">Third</span> </div> <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();"> <img class="flagimgs second" src="http://www.google.com/cloudprint/learnhttp://img.dovov.comicons/cloudprintlite.png" /> <span class="iTEXT">Fourth</span> </div> </div>
使用combobox并添加以下css .ddTitleText{ display : none; } .ddTitleText{ display : none; }
没有更多的文字，只是图像。
我有点晚了，但你可以使用简单的引导程序下拉，然后在任何语言或框架中select更改事件上执行代码。 （这只是一个非常基本的解决scheme，对于像我这样刚开始寻找小型简单项目解决scheme的其他人来说。）
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select Image <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li> <a style="background-image: url(../Content/Images/Backgrounds/background.png);height:100px;width:300px" class="img-thumbnail" href=""> </a></li> <li role="separator" class="divider"></li> <li> <a style="background-image: url(../Content/Images/Backgrounds/background.png);height:100px;width:300px" class="img-thumbnail" href=""> </a></li> </ul> </div>
我尝试了几个基于jQuery的自定义select与图像，但没有工作在响应式布局。 最后我遇到Bootstrap-Select。 经过一些修改后，我能够产生这个代码。
github回购链接在这里
