ugrás a tartalomhoz

json dropdown menu probléma

Radon · 2015. Feb. 8. (V), 10.47
Sziasztok. Ezt szeretném megoldani, de valamiért nem működik: http://designwithpc.com/Plugins/ddSlick Sokat próbálgattam, de semmire nem reagál. Jshez sajna nem értek, de fontos lenne ez a képes legördülő. Ha van egyszerűbb megoldás, vagy ezt össze tudja rakni valaki, annak örülnék.
Itt a kód, ahogy én összeraktam:
<html lang="en">
 <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="ddslick.js"></script>
  <meta charset="UTF-8">
 </head>
 <body>
	<table>
		<tr>
			<td>
				<div id="myDropdown">	</div>

				<SCRIPT LANGUAGE="JavaScript">
					//Dropdown plugin data
					var ddData = [
						{
							text: "Facebook",
							value: 1,
							selected: false,
							description: "Description with Facebook",
							imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
						},
						{
							text: "Twitter",
							value: 2,
							selected: false,
							description: "Description with Twitter",
							imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
						},
						{
							text: "LinkedIn",
							value: 3,
							selected: true,
							description: "Description with LinkedIn",
							imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
						},
						{
							text: "Foursquare",
							value: 4,
							selected: false,
							description: "Description with Foursquare",
							imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
						}
					];
				</SCRIPT>

				<SCRIPT LANGUAGE="JavaScript">
					$('#myDropdown').ddslick({
						data:ddData,
						width:300,
						selectText: "Select your preferred social network",
						imagePosition:"right",
						onSelected: function(selectedData){
							//callback function: do something with selectedData;
						}   
					});
				</SCRIPT>		
				
				<select id="myDropdown">
					<option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png" data-description="Description with Facebook">Facebook</option>
					<option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"  data-description="Description with Twitter">Twitter</option>
					<option value="2" selected="selected" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png" data-description="Description with LinkedIn">LinkedIn</option>
					<option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"  data-description="Description with Foursquare">Foursquare</option>
				</select>
			</td>
		</tr>
	</table>
 </body>
</html>
‹ jQuery datatable kép feltöltése tallózás után, "feltöltés" gomb nélkül ›
 ■
1

JavaScript

Poetro · 2015. Feb. 8. (V), 15.45
Jshez sajna nem értek, de fontos lenne ez a képes legördülő.

Akkor ajánlom, hogy vagy tanulj bele, vagy pedig nézz körbe, hogy milyen kész megoldások vannak erre a problémára, vagy pedig fizess meg valakit, aki lefejleszti neked.
Sokat próbálgattam, de semmire nem reagál.

Mit próbálgattál? A weboldalán levő megoldás működik? Nálam igen. Akkor lehet valami kimaradt, ami ott volt. Mi a hibaüzenet?
2

Nem ir ki hibát. A select

Radon · 2015. Feb. 8. (V), 17.03
Nem ir ki hibát. A select menu megy, de sima html kinézettel, js nélkül. Képet nem rak be. Azért irtam le a teljes html kodom, hogy aki ért hozzá esetleg látja mit rontottam el, esetleg a sorrend, vagy nem tudom miért hagyja figyelmen kivül a js részt.
3

Ilyesmi?

Poetro · 2015. Feb. 8. (V), 17.22
Ilyesmi?
4

igen.

Radon · 2015. Feb. 8. (V), 17.53
oké. köszi. megy. de amit a weboldalon írtak, az nem ilyen. tiedet copyztam, így már megy. köszi.
5

És hogy állítom a stílusát? A

Radon · 2015. Feb. 8. (V), 21.53
És hogy állítom a stílusát? A kódban nincs css, de a látható stílusok hol vannak itt beállítva?
6

CSS-sel

Poetro · 2015. Feb. 8. (V), 23.17
És hogy állítom a stílusát? A kódban nincs css

CSS-sel tudod állítani a stílusát, és a kódban van CSS. Legalábbis a ddSlick kódjában. Nekem nincsen semmi kódom. Az egészet a ddSlick oldaláról másoltam.
7

oké a ddSlick oldalán lévő

Radon · 2015. Feb. 9. (H), 00.47
oké a ddSlick oldalán lévő file-okkal működik, és ott vannak a css-ek.
De ha ezeket letöltöm és ezekre hivatkozok, már nem működik a kód.
Ezt letöltöm: 
<script src="https://dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.min.js"></script>
, a megfelelő könyvtárba teszem, már nem működik.
8

Érdekes

Poetro · 2015. Feb. 9. (H), 01.31
Érdekes, az én kódom, ami működik, így néz ki:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <select id="demo-htmlselect">
    <option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png" data-description="Description with Facebook">Facebook</option>
    <option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png" data-description="Description with Twitter">Twitter</option>
    <option value="2" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png" data-description="Description with LinkedIn">LinkedIn</option>
    <option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png" data-description="Description with Foursquare">Foursquare</option>
  </select>
  <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="https://dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.min.js"></script>
  <script>
    $('#demo-htmlselect').ddslick();
  </script>
</body>
</html>