it-roy-ru.com

Выпадающий выбор с изображениями

Я хотел создать выпадающий список с изображениями вместо текста в качестве параметров. Я выполнил поиск в Google и выполнил поиск по переполнению стека, и обычно дается ответ на использование jQuery combobox .

Мне кажется, что проблема с этим решением заключается в том, что вы должны предоставить текст. Похоже, изображения просто значки, которые сопровождают этот текст слева. Поправьте меня, если я ошибаюсь, но это решение не будет охватывать то, что я пытаюсь сделать - полностью заменить текст изображениями.

Некоторые сведения о том, что я пытаюсь сделать - я пытаюсь создать выпадающий список для пользователей, чтобы выбрать толщину линий в онлайн-приложении для рисования/рисования. Изображения были бы линиями различной толщины, вроде mspaint.

35
bgcode

Проверьте этот пример ... все было сделано легко http://jsfiddle.net/GHzfD/

EDIT: обновлено/работает с 2013 года, 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();
26
Ashraf

Вам даже не нужен 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" и идентификатор целевого элемента), входные данные неявно становятся активными; нажмите на ярлык = нажмите на переключатель. Приходит немного сокращенная 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: вам, вероятно, понадобится использовать его с position: absolute внутри контейнера с позицией: относительный + высокий z-индекс.

NB2: при добавлении дополнительных фонов для отдельных стилей линий рассмотрите возможность выбора селекторов на основе атрибута «for» метки, например:

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

Похоже, простое HTML-меню будет проще. Используйте атрибуты данных html5 для значений или любой другой метод, который вы хотите сохранить, и css для обработки изображений в качестве фона или для помещения их в сам html.

Правка: Если вы вынуждены конвертировать из существующего выбора, от которого вы не можете избавиться, есть также несколько хороших плагинов для изменения выбора в HTML. Wijmo и Chosen - пара, которая приходит на ум

4
charlietfl

Если подумать, концепция выпадающего списка довольно проста. Для того, что вы пытаетесь достичь, подойдет простой <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, и тогда подойдет какой-нибудь простой jQuery Я не пробовал это, хотя:

$('#menu ul li').click(function(){
    var $a = $(this).find('a');
    $(this).parents('#menu').children('li a').replaceWith($a).
});
3
elclanrs

PLAIN JAVASCRIPT:

ДЕМО: 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/tv/images/socialyoutube.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/learn/images/icons/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/tv/images/lplay.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/learn/images/icons/cloudprintlite.png" /> <span class="iTEXT">Fourth</span>
  </div>
</div>

3
T.Todua

Это использует ms-Dropdown: https://github.com/marghoobsuleman/ms-Dropdown

Но ресурс данных - это JSON. 

Пример: http://jsfiddle.net/tcibikci/w3rdhj4s/6

HTML

<div id="byjson"></div>

Скрипт

<script>
        var jsonData = [
            {description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
            {image:'https://via.placeholder.com/50', description:'My life. My card...', value:'amex', text:'Amex'},
            {image:'https://via.placeholder.com/50', description:'It pays to Discover...', value:'Discover', text:'Discover'},
            {image:'https://via.placeholder.com/50', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
            {image:'https://via.placeholder.com/50', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
            {image:'https://via.placeholder.com/50', description:'All you need...', value:'Visa', text:'Visa'},
            {image:'https://via.placeholder.com/50', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
        ];
        $("#byjson").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
    }
</script>
0
Tolga

Я немного опоздал с этим, но вы можете сделать это с помощью простого выпадающего меню и затем выполнить свой код на событии select change на любом языке или в любой среде. (Это просто очень простое решение для других людей, таких как я, которые только начинают и ищут решение для небольшого простого проекта.)

<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>
0
Devanshi Parikh

Используйте выпадающий список и добавьте следующий css .ddTitleText{ display : none; }

Нет больше текста, только изображения.

0
Fresheyeball