Quería crear un desplegable, seleccione el que tiene imágenes en lugar de texto como de las opciones. He hecho un poco de Google y la búsqueda aquí en Stack Overflow, y la respuesta por lo general es el uso de la jQuery combobox.

El problema con esta solución, me parece, es que usted tiene que proporcionar texto. Parece que las imágenes son solo los iconos que acompañan a los que el texto a la izquierda. Me corrija si estoy equivocado, pero esta solución no cubrir lo que estoy tratando de hacer, que es completamente reemplazar el texto con imágenes.

Algunos antecedentes sobre lo que estoy tratando de hacer … estoy tratando de crear un menú desplegable para que los usuarios seleccionar el grosor de la línea en una línea de pintura/de los garabatos de la aplicación. Las imágenes serían líneas de diferente grosor, una especie de mspaint.

InformationsquelleAutor bgcode | 2012-02-29

9 Comentarios

  1. 26

    Comprobar este ejemplo .. todo ha sido hecho fácilmente http://jsfiddle.net/GHzfD/

    EDITAR: Actualizado/trabajo en 2013, 02 de julio: 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();
    • Ashraf es el uso de la msDropDown plugin de jQuery. Usted puede encontrar más detalles aquí: marghoobsuleman.com/jquery-image-dropdown
    • Ya he utilizado el plugin mencionado en babonk pregunta
    • no sé por qué, pero no me funciona
    • He actualizado el script : jsfiddle.net/GHzfD/357
    • Su actualización funciona… he actualizado tu respuesta
  2. 51

    Usted incluso no necesita tener javascript para hacer esto!

    Espero que esto te tiene intrigada, así que aquí va. En primer lugar, la estructura 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? Los botones de la Radio? Correcto. Vamos a estilo de aspecto de una lista desplegable con imágenes, porque eso es lo que buscas! El truco está en saber que cuando las etiquetas están correctamente vinculados a las entradas (que atributo «for» y el elemento de destino id), la entrada implícitamente a ser activo; haga clic en una etiqueta = haz clic en un botón de radio. Aquí viene viene ligeramente abreviado css con los comentarios en línea:

    #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;
    }

    Ejemplo completo aquí: http://jsfiddle.net/NDCSR/1/

    NB1: usted va a necesitar para el uso con las position:absolute dentro de un contenedor con position:relative +alta z-index.

    NB2: al agregar más fondos para individuales, estilos de línea, considere la posibilidad de tener los selectores basados en el atributo «for» de la etiqueta así:

    label[for=linestyle2] {background-image:url(...);}
    • muy inteligente. +1 para el seguro.
    • Increíble! +1 por el seguro 🙂
    • jsfiddle no trabajo para mí, pero éste lo hizo! Increíble
    • Gee, este es creativo 🙂 thx. … pero finalmente, uno probablemente va a terminar de envolver algunos detalles en la propia JS marco. Lo que conduce a terminado JS marcos…
    • Me gusta este enfoque, y no JS necesarios 🙂
    • Este es bonita respuesta. Pero me pregunto, por qué no se utiliza .on("change","[name='line-style']") en lugar de la configuración de intervalo de tiempo para cada 100ms para conseguir elemento activado ?
    • Aquí está una mejora. Tengo una cosa en contra de los identificadores, ya que no se puede poner en un webcomponent, así que me tomé la etiqueta de fors y en lugar de poner los botones de radio dentro de la etiqueta. Otro problema es que desde el botón de la radio se coloca con la parte superior:0, cada vez que seleccione un ítem en el que se seleccione salta de nuevo a la parte superior, lo cual es muy molesto. Yo también quería que mi desplegable para poder tener muchos elementos por fila. Compruebe esto hacia fuera jsfiddle.net/NDCSR/623
    • Muy cuidada. Hay una razón por la que no uso display:none para ocultar los botones de radio?

  3. 4

    Parece un sencillo menú html sería más simple. El uso de html5 atributos de datos para los valores o el método que se desea guardarlos y css para manejar imágenes como fondos o ponerlos en el propio html.

    Edit: Si usted se ve forzado a convertir a partir de una selección existente que usted no puede deshacerse de, hay algunos plugins buenos así como para modificar un select de html. Wijmo y Elegido son una pareja que vienen a la mente

  4. 3

    Si te pones a pensar el concepto detrás de un desplegable, seleccione es bastante simple. Para lo que estamos tratando de lograr, un simple <ul> va a hacer.

    <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>

    Estilo con css y, a continuación, algunos simple jQuery va a hacer. No he probado este tho:

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

    LLANURA JAVASCRIPT:

    DEMO: http://codepen.io/tazotodua/pen/orhdp

    JS:

    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]);
    }

    CSS:

    #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;
    }

    HTML:

    <!-- 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>

    • el enlace está roto.
  6. 0

    Uso combobox y añadir la siguiente regla css .ddTitleText{ display : none; }

    No más de texto, sólo imágenes.

  7. 0

    Soy un poco tarde a esto, pero usted puede hacer esto con un simple bootstrap desplegable y, a continuación, hacer su código en seleccionar evento de cambio en cualquier lenguaje o framework. (Esta es una solución básica, para que otras personas como yo que estamos empezando y que buscan una solución para un pequeño proyecto sencillo.)

    <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>
  8. 0

    Es el uso de ms-Desplegable : https://github.com/marghoobsuleman/ms-Dropdown

    Pero los datos de los recursos es json.

    Ejemplo : http://jsfiddle.net/tcibikci/w3rdhj4s/6

    HTML

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

    Script

    <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>
  9. -1

    He intentado varias jquery basado seleccionar personalizado con imágenes, pero ninguna funcionó en responsive layouts. Finalmente me encontré con Bootstrap-Seleccione. Después de algunas modificaciones que yo era capaz de producir este código.

    repo de github enlace aquí

    Desplegable, seleccione con las imágenes

Dejar respuesta

Please enter your comment!
Please enter your name here