unable to get spectrum colorpicker working

StackOverflow https://stackoverflow.com/questions/16334779

  •  14-04-2022
  •  | 
  •  

문제

I am trying to implement the spectrum colorpicker http://bgrins.github.io/spectrum/

I have the spectrum css file and the spectrum js file and also jquery 1.9.0 file in the same folder as the html file.

All I am getting is a input box on the screen and no colorpicker. I have tried in firefox/chrome and IE but nothing.

I cant see anywhere where it says I need any additional files

Can anyone please help as I think its probably something really obvious

here is the code of the html file

<!DOCTYPE html>
 <html>
 <meta charset="utf-8" />
 <head>
   <link rel="stylesheet" type="text/css" href="spectrum.css ">
   <script type="text/javascript" src="jquery-1.9.0.js"></script>
   <script type="text/javascript" src="spectrum.js"></script>
   <script>
     $(".my_color").spectrum({
        color: "#f00"
     });
   </script>
  </head>

  <body>
   <input type='text' class="my_color" />
  </body>
  </html>
도움이 되었습니까?

해결책

Make sure to call your scripts after the DOM is finished loading e.g.,

$(document).ready(function() {
   $(".my_color").spectrum({
      color: "#f00"
   });
});

Works fine with the correct execution order: http://jsfiddle.net/xqdBd/

Notice how this: http://jsfiddle.net/xqdBd/1/ doesn't work anymore as the JavaScript is called before the DOM has finished loading.

Another problem is here: 

<link rel="stylesheet" type="text/css" href="spectrum.css ">

Notice the extra space at the end of "spectrum.css ", that or your JavaScript files aren't being loaded. Without seeing the page you are using it is impossible to tell.

다른 팁

The js 

$(".my_color").spectrum({
    color: "#f00"
});

has to go after the input box

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top