0

このjqueryカラーピッカープラグインhttp://www.eyecon.ro/colorpicker/をWebアプリケーションで使用しています。デザインを微調整する必要があります。アプリケーションのいくつかのサンプル機能を紹介します。こちらのhttp://jsfiddle.net/FSDPH/8/をご覧ください。アコーディオン付きの可動ボックスがあります。カラーセクションでは、jsfiddleに表示できないカラーピッカープラグインを実装しました。必要なのは、カラーピッカーが選択されていて、ボックスが（ドキュメント）セクションを超えて移動した場合、ボックスとカラーピッカーパレットがドキュメント領域内の位置を動的に変更する必要があることです。ボックスの位置を動的に変更することに成功しましたが、カラーピッカーパレットで機能させることができません。

jqueryコードは次のとおりです:(ボックスとカラーピッカーパレットの位置を動的に変更するため）

var dwidth = $(document).width() - 225; // #box_bg width
$("#box_bg").draggable({
stop: function(event, ui) {
      var npos = $("#box_bg").position();
      if ( npos.left > dwidth)
      {
          $(".colorpicker").css("left","-133px!important");
          $("#box_bg").css("left", dwidth+"px");
      }
      } 
});

上記のコードでは、ボックスがドキュメント領域を超えて移動すると、$（ "＃box_bg"）が機能します。ただし、$（ "。colorpicker"）では機能しません。colorpicker.cssファイルの左側のプロパティは変更されていません。なんでそうなの？

アップデート

ここで私はより明確に示しました、これをチェックしてください:)

http://jsfiddle.net/rkumarnirmal/4GrsD/3/

誰かが私を案内してもらえますか？

ありがとう！

4

1 に答える 1

0

The left property of the colorpicker is calculated in the plugin every it is shown. Until you change the plugin, the left property will always be calculated on the fly.

Here is the code from the plugin:

show = function (ev) {
    var cal = $('#' + $(this).data('colorpickerId'));
    cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
    var pos = $(this).offset();
    var viewPort = getViewport();
    var top = pos.top + this.offsetHeight;
    var left = pos.left;
    if (top + 176 > viewPort.t + viewPort.h) {
        top -= this.offsetHeight + 176;
    }
    if (left + 356 > viewPort.l + viewPort.w) {
        left -= 356;
    }
    cal.css({left: left + 'px', top: top + 'px'});
    if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
        cal.show();
    }
    $(document).bind('mousedown', {cal: cal}, hide);
    return false;
}
于 2012-05-16T21:15:22.730 に答える