DropDownliste mit Bildern
Verfasst: Sa 23. Mai 2020, 06:52
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 **********************/
In der Datei flags.css ist nur folgendes zu belassen:
Hier kann die Größe der Bilder im Dropdown verändert werden.
Der Rest kann gelöscht werden.
Auch hier wieder beachten: Url's zu den Dateien anpassen.
In die Textseite:
Hier dazu eine Demoseite: https://hapes-javascript-demo-page.hpag ... pdown.html
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;}
Code: Alles auswählen
.flag{float:left;padding:0 !important;margin:0 5px 0 0;width:240px;height:30px;
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" />
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>