it-swarm.com.de

Auswahl mit Bildern auswählen

Ich wollte eine Dropdown-Auswahl erstellen, die Bilder anstelle von Text als Optionen enthält. Ich habe hier etwas nach Stapeln gesucht und gesucht, und die Antwort ist im Allgemeinen die Verwendung der Kombinationsbox jQuery .

Das Problem bei dieser Lösung scheint mir, dass Sie Text angeben müssen. Es sieht so aus, als wären die Bilder nur Symbole, die den Text auf der linken Seite begleiten. Korrigieren Sie mich, wenn ich falsch liege, aber diese Lösung würde nicht das abdecken, was ich versuche, nämlich den Text vollständig durch Bilder zu ersetzen.

Einige Hintergrundinformationen zu dem, was ich versuche - ich versuche, ein Dropdown-Menü zu erstellen, in dem Benutzer die Liniendicke in einer Online-Mal-/Kritzeleien-App auswählen können. Die Bilder würden unterschiedlich dicke Linien sein, ähnlich wie mspaint.

35
bgcode

Überprüfen Sie dieses Beispiel .. alles wurde leicht gemacht http://jsfiddle.net/GHzfD/

EDIT: Aktualisiert/arbeitet seit dem 02. Juli 2013: 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

Sie brauchen dazu nicht einmal Javascript!

Ich hoffe, das hat Sie fasziniert, also geht es hier weiter. Zuerst die HTML-Struktur:

<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? Optionsfelder? Korrigieren. Wir werden sie so gestalten, dass sie wie eine Dropdown-Liste mit Bildern aussehen, denn danach streben Sie nach! Der Trick besteht darin, zu wissen, dass die Eingabe implizit aktiv wird, wenn Labels korrekt mit Eingaben verknüpft sind (Attribut "for" und Zielelement-ID). Klicken Sie auf ein Etikett = Klicken Sie auf ein Optionsfeld. Hier kommt ein leicht abgekürztes CSS mit Kommentaren inline:

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

Vollständiges Beispiel hier: http://jsfiddle.net/NDCSR/1/

NB1: Sie müssen es wahrscheinlich mit position: absolute in einem Container mit position: relative + high z-index verwenden.

Anmerkung 2: Wenn Sie weitere Hintergründe für einzelne Linienstile hinzufügen, sollten Sie die Selektoren auf der Grundlage des Attributs "for" der Beschriftung wie folgt festlegen:

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

Scheint, als wäre ein einfaches HTML-Menü einfacher. Verwenden Sie die html5-Datenattribute für Werte oder die Methode, die Sie speichern möchten, und css, um Bilder als Hintergrund zu behandeln, oder fügen Sie sie in die HTML-Datei ein.

Bearbeiten: Wenn Sie gezwungen sind, aus einer vorhandenen Auswahl zu konvertieren, die Sie nicht loswerden können, gibt es einige gute Plugins, mit denen Sie eine Auswahl in html ändern können. Wijmo und Chosen sind ein Paar, das mir in den Sinn kommt

4
charlietfl

Wenn Sie darüber nachdenken, welches Konzept hinter einer Dropdown-Auswahl steht, ist es ziemlich einfach. Für das, was Sie erreichen möchten, wird ein einfacher <ul> ausgeführt.

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

Sie stylen es mit css und dann wird es ein paar einfache jQuery geben. Ich habe das nicht probiert:

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

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

Dies verwendet ms-Dropdown: https://github.com/marghoobsuleman/ms-Dropdown

Aber Datenquelle ist Json. 

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

HTML

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

Skript

<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

Ich bin zu spät dran, aber Sie können dies mit einem einfachen Bootstrap-Dropdown tun und dann Ihren Code für select change event in einer beliebigen Sprache oder einem beliebigen Framework ausführen. (Dies ist nur eine sehr einfache Lösung für andere Leute wie mich, die gerade erst anfangen und nach einer Lösung für ein kleines einfaches Projekt suchen.)

<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

Verwenden Sie die Combobox und fügen Sie die folgende Datei hinzu: .ddTitleText{ display : none; }

Kein Text mehr, nur Bilder.

0
Fresheyeball