Question

首先，我喜欢jPicker javascript.它非常适合背景。我有一个很小的问题（我认为是我的错，或者是一个未包含在程序中的功能）。我想知道的是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将“实时更新”支持这个或者它只需要在文本上“提交”还是我只是想尝试做这个脚本从来没有用过的东西？感谢您提前提供任何帮助。

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是一个优秀且维护良好的库。

jPicker实时更新字体颜色

1 个答案: