1

スクリプトで qTip2 の背景色を制御できるかどうかは誰にもわかりませんか? メッセージを動的に設定することはできますが、背景色を変更するのに問題があります。一連の異なる色の DIV があり、DIV の背景色に応じてツール ヒントの色を変更する必要があります。私のJavaScriptでは、DIVの背景色を取得できますが、qTip2で背景色を設定することはできません.

jQuery(document).ready(function($){
    $(".tooltip").each(function(){
        $toolTip = $(this).data('title');
        var bgColor = $(this).css('backgroundColor');
        hexc(bgColor);
        function hexc(colorval) {
            var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
            delete(parts[0]);
            for (var i = 1; i <= 3; ++i) {
                parts[i] = parseInt(parts[i]).toString(16);
                if (parts[i].length == 1) parts[i] = '0' + parts[i];
            }
            color = '#' + parts.join('');
            $bgColor = color;
        }

        $('.tool-tip').css('backgroundColor', $bgColor)

        $(this).qtip({
            content: {
                text: $toolTip
            },
            position: {
                my: 'bottom right',
                at: 'top right',
                target: 'mouse'
            },
            style: {
                classes: 'tool-tip',
                tip: {
                    height: 15  
                }
            }
        })
    });
});
4

1 に答える 1

0

スタイル クラスを動的に変更する方法については、QTip2 動的表示/非表示イベントと slideDownを参照してください。その後、div に合わせてクラスを調整できるはずです。

はい、この質問がずっと前に尋ねられたことは知っていますが、他の人の助けになることを願っています.

リンクは次の情報を提供します。

Qtip オプションを動的に設定するには、少なくとも 3 つの方法があります。

qtip プロパティの外で変数を設定し、それらを使用する 可能な場合はコールバック関数を使用する イベント関数を使用する これを達成する方法は他にもあると思いますが、以下のコードは必要なすべての状況で機能し、3 つの方法すべてを示しています。フェードイン メソッドでは変数を使用できないため、少なくとも 2 つ使用する必要がありました。また、intFade が定義されていない場合にのみ、fadeIn メソッドを呼び出すこともできません。

したがって、うまくいけば、この答えは他の誰かに役立ちます。

function setupQtips()
{
  $("*[qtipiddiv]").each
  (
      function ()
      {
          //Title
          var elmTarget = $(this);
          var strTitle = elmTarget.attr('qtiptitle');
          if (strTitle == undefined)
          {
              strTitle = false;
          }

          //Title Button
          var binTitleButton = elmTarget.attr('qtipbutton');
          if (binTitleButton == undefined)
          {
              binTitleButton = false;
          }

          //Show
          var strShow = elmTarget.attr('qtipshow');
          if (strShow == undefined)
          {
              strShow = 'click';
          }

          if (strShow == 'false')
          {
              strShow = false;
          }

          //Hide
          var strHide = elmTarget.attr('qtiphide');
          if (strHide == undefined)
          {
              strHide = 'unfocus';
          }

          if (strHide == 'false')
          {
              strHide = false;
          }

          //Modal
          var binModal = elmTarget.attr('qtipmodal');
          var binBlur = false;
          if (binModal == undefined)
          {
              binModal = false;
          }
          else if (strHide == 'unfocus')
          {
              binBlur = true;
          }

          //Tip Height / width
          var intTipWidth = elmTarget.attr('qtiptipwidth');
          if (intTipWidth == undefined)
          {
              intTipWidth = 6;
          }

          var intTipHeight = elmTarget.attr('qtiptipheight');
          if (intTipHeight == undefined)
          {
              intTipHeight = 6;
          }

          //Style
          var strStyle = elmTarget.attr('qtipstyle');
          if (strStyle == undefined)
          {
              strStyle = '';
          }

          //____________________________________________________
          //Set qtip
          $(this).qtip
          (
              {
                  overwrite: false,
                  content:
                  {
                      text: function (event, api)
                      {
                          var strId = $(this).attr('qtipiddiv');
                          return ($('#' + strId));
                      },

                      title:
                      {
                          text: strTitle,

                          button: binTitleButton
                      }
                  },

                  show: 
                  {
                      event: strShow,

                      effect: function (offset)
                      {
                          var strFade = offset.target.attr('qtipfade');
                          if (strFade == undefined)
                          {
                              $(this).fadeIn(0);
                          }
                          else
                          {
                              var intFade = parseInt(strFade);
                              $(this).fadeIn(intFade);
                          }
                      },

                      solo: true,
                      modal:
                      {
                          on: binModal,
                          blur: binBlur
                      }
                  },  

                  hide:
                  {
                      event: strHide
                  },

                  position:
                  {
                      viewport: $(window),

                      adjust:
                      {
                          screen: true
                      }
                  },

                  style: 
                  {
                      classes: 'qtip-rounded qtip-shadow ' + strStyle,
                      tip:
                      {
                          width: intTipWidth,
                          height: intTipHeight
                      }
                  },

                  events:
                  {
                      show: function (event, api)
                      {
                          //Position
                          var elmTarget = $(api.elements.target[0]);
                          var strPositionMy = elmTarget.attr('qtippositionmy');
                          if (strPositionMy != undefined)
                          {
                              elmTarget.qtip('option', 'position.my', strPositionMy);
                          }

                          var strPositionAt = elmTarget.attr('qtippositionat');
                          if (strPositionAt != undefined)
                          {
                              elmTarget.qtip('option', 'position.at', strPositionAt);
                          }

                          //Height / width
                          var strWidth = elmTarget.attr('qtipwidth');
                          if (strWidth != undefined)
                          {
                              elmTarget.qtip('option', 'style.width', strWidth);
                          }

                          var strHeight = elmTarget.attr('qtipheight');
                          if (strHeight != undefined)
                          {
                              elmTarget.qtip('option', 'style.height', strHeight);
                          }
                      }
                  }
              }
          )
      }
  );

  return;

}

于 2013-10-19T13:27:36.083 に答える