jPicker字體顏色的實時更新

首先我喜歡jPicker javascript.它對背景非常有用。我有一個小問題（我認爲是我的錯，或者是程序中沒有包含的一個功能），它的功能非常出色。我想知道的是可以使用jPicker來改變字體顏色以及背景。我有一個使用jPicker這樣一個網站：jPicker字體顏色的實時更新

在頭

<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>

然後在體內

<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」 />

如果您嘗試在後臺工作完美不過的代碼，文字顏色不不變。您會注意到我創建了一個Callbacks2函數，並將backgroundColor更改爲fontColor。希望CSS元素background-color和font-color會被改變。我有最小的Java編程經驗，並嘗試閱讀代碼，但很快就被淹沒了。另外，整個頁面將有2種文字顏色h1和h2將「實時更新」支持這種情況，還是隻需要在文本上提交「提交」，或者我只是試圖做一些這個腳本從來沒有打算的？感謝您提前提供任何幫助。

來源

2013-01-08 Peter Blomgren

也許我遲到了。但可能對訪問用戶有所幫助。正如你所看到的，當設置顏色時，它使用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是一個良好且維護良好的圖書館。

來源

2013-01-29 13:33:46

jPicker字體顏色的實時更新

回答

相關問題