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:
  1. <html lang="en">  
  2.  <head>  
  3.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
  4.     <script type="text/javascript" src="ddslick.js"></script>  
  5.   <meta charset="UTF-8">  
  6.  </head>  
  7.  <body>  
  8.     <table>  
  9.         <tr>  
  10.             <td>  
  11.                 <div id="myDropdown"> </div>  
  12.   
  13.                 <SCRIPT LANGUAGE="JavaScript">  
  14.                     //Dropdown plugin data  
  15.                     var ddData = [  
  16.                         {  
  17.                             text: "Facebook",  
  18.                             value: 1,  
  19.                             selected: false,  
  20.                             description: "Description with Facebook",  
  21.                             imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"  
  22.                         },  
  23.                         {  
  24.                             text: "Twitter",  
  25.                             value: 2,  
  26.                             selected: false,  
  27.                             description: "Description with Twitter",  
  28.                             imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"  
  29.                         },  
  30.                         {  
  31.                             text: "LinkedIn",  
  32.                             value: 3,  
  33.                             selected: true,  
  34.                             description: "Description with LinkedIn",  
  35.                             imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"  
  36.                         },  
  37.                         {  
  38.                             text: "Foursquare",  
  39.                             value: 4,  
  40.                             selected: false,  
  41.                             description: "Description with Foursquare",  
  42.                             imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"  
  43.                         }  
  44.                     ];  
  45.                 </SCRIPT>  
  46.   
  47.                 <SCRIPT LANGUAGE="JavaScript">  
  48.                     $('#myDropdown').ddslick({  
  49.                         data:ddData,  
  50.                         width:300,  
  51.                         selectText: "Select your preferred social network",  
  52.                         imagePosition:"right",  
  53.                         onSelected: function(selectedData){  
  54.                             //callback function: do something with selectedData;  
  55.                         }     
  56.                     });  
  57.                 </SCRIPT>       
  58.                   
  59.                 <select id="myDropdown">  
  60.                     <option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png" data-description="Description with Facebook">Facebook</option>  
  61.                     <option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"  data-description="Description with Twitter">Twitter</option>  
  62.                     <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>  
  63.                     <option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"  data-description="Description with Foursquare">Foursquare</option>  
  64.                 </select>  
  65.             </td>  
  66.         </tr>  
  67.     </table>  
  68.  </body>  
  69. </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:
  1. <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:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5. </head>  
  6. <body>  
  7.   <select id="demo-htmlselect">  
  8.     <option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png" data-description="Description with Facebook">Facebook</option>  
  9.     <option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png" data-description="Description with Twitter">Twitter</option>  
  10.     <option value="2" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png" data-description="Description with LinkedIn">LinkedIn</option>  
  11.     <option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png" data-description="Description with Foursquare">Foursquare</option>  
  12.   </select>  
  13.   <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>  
  14.   <script src="https://dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.min.js"></script>  
  15.   <script>  
  16.     $('#demo-htmlselect').ddslick();  
  17.   </script>  
  18. </body>  
  19. </html>