0

我在我的 Web 应用程序中使用这个 jquery 颜色选择器插件http://www.eyecon.ro/colorpicker/ 。我需要做一些设计调整。我将在应用程序上展示一些示例功能。请看这个http://jsfiddle.net/FSDPH/8/有一个带手风琴的可移动盒子。在颜色部分，我实现了无法在 jsfiddle 中显示的颜色选择器插件。What I need is, when the color picker is selected and if the box is moved beyond the (document) section, the box and color picker palette should dynamically change its position inside the document area. 我已经成功地动态改变了盒子的位置，但我不能让它适用于颜色选择器调色板。

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

每次显示时，都会在插件中计算颜色选择器的 left 属性。在您更改插件之前，left 属性将始终动态计算。

这是插件中的代码：

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