Seite 1 von 1

DropDownliste mit Bildern

Verfasst: Sa 23. Mai 2020, 06:52
von Hape
Hier die Beschreibung zum Einbau der Dropdown-Liste:

Hier kann man es runterladen: https://github.com/marghoobsuleman/ms-D ... master.zip

Verzeichniss entpacken, folgende Dateien werden gebraucht:

jquery-1.9.0.min.js

jquery.dd.min.js

jquery.dd.js

flags.css

dd.css

je nachdem welche Pfeilsymbole (Skin1 oder Skin2) man verwenden möchte:

dd_arrow.gif
title_bg.gif

Dateien in den Account hochladen. In der Datei dd.css sind die Url's zu den Pfeilsymbolen anzupassen:

im Abschnitt /*************** default theme **********************/

Code: Alles auswählen

.dd .ddArrow{width:16px;height:16px; margin-top:-8px; background:url(dd_arrow.gif) no-repeat;}
.dd .ddArrow:hover{background-position:0 100%;}
.dd .ddTitle{color:#000;background:#e2e2e4 url(title-bg.gif) repeat-x left top;}
In der Datei flags.css ist nur folgendes zu belassen:

Code: Alles auswählen

.flag{float:left;padding:0 !important;margin:0 5px 0 0;width:240px;height:30px;
Hier kann die Größe der Bilder im Dropdown verändert werden.
Der Rest kann gelöscht werden.

Code: Alles auswählen

<script src="URL zur Datei/jquery-1.9.0.min.js"></script>
<!-- <msdropdown> -->
<link rel="stylesheet" type="text/css" href="URL zur Datei/dd.css" />

In den Header kommen folgende Aufrufe:

<script src="URL zur Dateil/jquery.dd.min.js"></script>
<!-- </msdropdown> -->
<link rel="stylesheet" type="text/css" href="URL zur Datei/flags.css" />
Auch hier wieder beachten: Url's zu den Dateien anpassen.

In die Textseite:

Code: Alles auswählen

<form action="picture">
    <select name="picture" id="picture" style="width:300px;" onchange="location.href=this.options[this.selectedIndex].value">
      <option value="URL zur Homepage" data-image="URL zum Bild" data-imagecss="flag ad" data-title="Bild1"></option>
      <option value="URL zur Homepage" data-image="URL zum Bild" data-imagecss="flag ad" data-title="Bild2"></option>
      <option value="URL zur Homepage" data-image="URL zum Bild" data-imagecss="flag ad" data-title="Bild1">   </option>
      <option value="URL zur Homepage" data-image="URL zum Bild" data-imagecss="flag ad" data-title="Bild2"></option>
    </select>
    </div>
    </form>
<script>
$(document).ready(function(e) {
	$("#picture").msDropdown(); //image can have css class; Please check source code.
//no use
	try {
		var pages = $("#pages").msDropdown({on:{change:function(data, ui) {
												var val = data.value;
												if(val!="")
													window.location = val;
											}}}).data("dd");

		var pagename = document.location.pathname.toString();
		pagename = pagename.split("/");
		pages.setIndexByValue(pagename[pagename.length-1]);
		$("#ver").html(msBeautify.version.msDropdown);
	} catch(e) {
		//console.log(e);
	}

	$("#ver").html(msBeautify.version.msDropdown);

});
</script>
Hier dazu eine Demoseite: https://hapes-javascript-demo-page.hpag ... pdown.html