2013-08-18 4 views
0

내 응용 프로그램에 jquery 플러그인을 추가하려고하지만 작동하지 않습니다.jquery color on index.html

<link rel="stylesheet" media="screen" type="text/css" href="./style/colorpicker.css" /> 
<script type="text/javascript" src="./scripts/jqueryColorPicker/colorpicker.js"></script> 

어딘가에 몸에 : 그래서 머리에 난이

<script> 
     $("./images/colorwheel.png").ColorPicker({ 
      color: '#0000ff', 
      onShow: function (colpkr) { 
       $(colpkr).fadeIn(500); 
       return false; 
      }, 
      onHide: function (colpkr) { 
       $(colpkr).fadeOut(500); 
       return false; 
      }, 
      onChange: function (hsb, hex, rgb) { 
       $('#footer').css('backgroundColor', '#' + hex); 
       $('#header').css('backgroundColor', '#' + hex); 
      } 
     }); 
    </script> 

하지만 휠 didnt 한 내 페이지에 표시 : | JQuery와 새로운 메신저 ... :(

+1

당신의 선택은'$이 ("./ 이미지/colorwheel.png")'잘못된 .... –

+0

내가 대신 무엇을 넣어야입니까 ?? : | – TheAndrew

답변

0

1.You처럼 위로의 ColorPicker를 초기화해야한다. 당신이 텍스트 상자 #colorpicker에 색상 선택기를 연결하려는 경우

2. 선택 예를 들어, 잘못된 코드는해야한다 : 코드 내부 $ (문서) .ready 3.Put

<input type="text" id="colorpicker">  

$("#colorPicker").ColorPicker({ ... }); 

..

$(document).ready(function() { 
    $("#colorPicker").ColorPicker({ ... }); 
}); 
0

당신의 ColorPicker를 개최한다 요소 추가 :

<input type="text" id="colorPicker"> 

해당 요소에 ColorPicker의 초기화는 :

$("#colorPicker").ColorPicker({ 
... 

당신은 또한 할 ready를 사용한다 js를 실행할 때 요소가로드되었는지 확인하십시오.

$(document).ready(function() { 
    //Your code 
}); 

그리고 y 페이지에 여러 색상 선택기가 있으면 ID 대신 클래스를 사용해야합니다.

+0

나는 아직도 그것을 얻지 않았다. ... : | : | 마지막 부분은 $ (document) .... – TheAndrew

+0

그냥 자바 스크립트 코드를 넣어서'// Your code'를 썼습니다. 준비가되지 않은 문제는'ColorPicker'를 호출 할 때 요소가로드되지 않을 수도 있다는 것입니다. –

1

색상 선택기 $ ("./ images/colorwheel.png")의 선택자가 잘못되었습니다.

색상 선택 도구가 작동해야하는 html 요소가 있어야합니다.

당신은

<div class="someClass"><div> 

뭔가를 할 수 있습니다 그리고 당신은 <head>에서 jquery 라이브러리를 포함하고 있지 않습니다

$(".someClass").ColorPicker({ 
     color: '#0000ff', 
     onShow: function (colpkr) { 
      $(colpkr).fadeIn(500); 
      return false; 
     }, 
     onHide: function (colpkr) { 
      $(colpkr).fadeOut(500); 
      return false; 
     }, 
     onChange: function (hsb, hex, rgb) { 
      $('#footer').css('backgroundColor', '#' + hex); 
      $('#header').css('backgroundColor', '#' + hex); 
     } 
    });