0

まず、 jPicker JavaScriptが大好きです。背景には非常にうまく機能します。小さな問題が 1 つあります (これは私のせいか、プログラムに含まれていない機能だと思います)。私が知りたいのは、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;”&gt;
  <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プログラミングの経験がほとんどなく、コードを読もうとしましたが、すぐに圧倒されました. また、ページ全体には h1 と h2 の 2 つのテキスト カラーがあります。「ライブ アップデート」はこれをサポートしますか、それともテキストに対してのみ「コミット」が必要ですか、それとも、このスクリプトが意図していないことをしようとしているだけですか? 事前に助けてくれてありがとう。

4

1 に答える 1

0

多分私は遅れています。しかし、訪問ユーザーには役立つかもしれません。ご覧のとおり、色を設定するときは 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-29T13:33:46.563 に答える