글꼴 색상의 jPicker 라이브 업데이트

Question

먼저 jPicker javascript.을 좋아합니다. 배경에 매우 적합합니다. 나는 그것이 하나의 작은 문제 (나는 내 ​​잘못이라고 생각하거나 프로그램에 포함되지 않은 기능)로 놀랍도록 일해왔다. 내가 알고 싶은 것은 jPicker를 사용하여 배경색뿐만 아니라 글꼴 색도 변경할 수 있습니다. 나는이 같은 jPicker를 사용하는 사이트가 : 당신이 배경이 있지만 완벽하게 작동 코드를하려고하면 몸

<span id=”Live” style=”display: block; height: 72px; margin: 10px; width: 192px;”> 
    <h1> Primary Text </h1> 
    <h2> Secondary Text </h2> 
</span> 
<p> 
    Please select your Background color: 
</p> 
<input id=”Callbacks” type=”text” value=”FFFFFF” /> 
<p>Please select your Text Color:</p> 
<input id=”Callbacks2” type=”text” value=”000000” /> 

에

<script type="text/javascript"> 
    $(document).ready(
    function() 
    { 
     var LiveCallbackElement = $('#Live'), 
      LiveCallbackButton = $('#LiveButton'); // you don't want it searching this on every live callback!!! 
     $('#Callbacks').jPicker(
     {}, 
     function(color, context) 
     { 
      var all = color.val('all'); 
      alert('Color chosen - hex: ' + (all && '#' + all.hex || 'none')); 
      $('#Commit').css(
      { 
       backgroundColor: all && '#' + all.hex || 'transparent' 
      }); // prevent IE from throwing exception if hex is empty 
     }, 
     function(color, context) 
     { 
      if (context == LiveCallbackButton.get(0)) alert('Color set from button'); 
      var hex = color.val('hex'); 
      LiveCallbackElement.css(
      { 
       backgroundColor: hex && '#' + hex || 'transparent' 
      }); // prevent IE from throwing exception if hex is empty 
     }, 
     function(color, context) 
     { 
      alert('"Cancel" Button Clicked'); 
     });  
     $('#Callbacks2').jPicker(
     {}, 
     function(color, context) 
     { 
      var all = color.val('all'); 
      alert('Color chosen - hex: ' + (all && '#' + all.hex || 'none')); 
      $('#Commit').css(
      { 
       fontColor: all && '#' + all.hex || 'transparent' 
      }); // prevent IE from throwing exception if hex is empty 
     }, 
     function(color, context) 
     { 
      if (context == LiveCallbackButton.get(0)) alert('Color set from button'); 
      var hex = color.val('hex'); 
      LiveCallbackElement.css(
      { 
       fontColor: hex && '#' + hex || 'transparent' 
      }); // prevent IE from throwing exception if hex is empty 
     }, 
     function(color, context) 
     { 
      alert('"Cancel" Button Clicked'); 
     }); 
    }); 
</script> 

다음 헤더에서

을, 텍스트 색상을 수행합니다 변경 없음. Callbacks2 함수를 만들고 backgroundColor를 fontColor로 변경했음을 알 수 있습니다. CSS 요소의 background-color와 font-color가 변경 되길 바란다. 나는 최소한의 자바 프로그래밍 경험을 가지고 있으며 코드를 읽으려고 시도했지만 빨리 압도 당했다. 또한 전체 페이지에는 2 개의 텍스트 색상 h1과 h2가 있습니다. "라이브 업데이트"가이를 지원합니까, 아니면 텍스트에 대해서만 "커밋"이 필요합니까? 아니면이 스크립트가 의도 한 적이없는 것입니까? 사전에 도움을 주셔서 감사합니다.

Answer 1

아마도 늦었을 것입니다. 그러나 방문하는 사용자에게 도움이 될 수 있습니다. 색상을 설정할 때 jQuery의 .css 함수를 사용하므로 jQuery에서 사용 된 것과 동일한 변수 이름을 사용한다는 것을 알 수 있습니다. 그래서 그 대신

 $('#Commit').css(
     { 
      fontColor: all && '#' + all.hex || 'transparent' 
     }); // prevent IE from throwing exception if hex is empty 

사용하는 데 도움이

 $('#Commit').css(
     { 
      color: all && '#' + all.hex || 'transparent' 
     }); // prevent IE from throwing exception if hex is empty 

희망의. 그리고 예 jPicker는 잘 유지 관리가 잘되어있는 라이브러리입니다.