Javascript jQuery MiniColor颜色选择器未正确定位

我正在使用jQuery，但在示例代码中，选择器出现在字段和按钮的旁边，在我的示例中，它出现在文档的最底部，就好像它无法读取调用它的按钮的位置数据一样

有人对此插件有类似的问题吗

下面是我的代码的样子（在jQuery将其初始化为颜色选择器之前）

。看起来像这样

<p style="position:absolute;top:0px;left:0px;margin-left:10px;">
<input type="text" class="color-picker miniColors" name="data_0" id="data_0" size="6" value="#ffffff" maxlength="7" autocomplete="off">

<span class="miniColors-triggerWrap">
<a class="miniColors-trigger" style="background-color: #ffffff" href="#"></a>
</span>

</p>

。实际的颜色选择器是在我的最后一个（所以就在

<div class="miniColors-selector color-picker miniColors" style="left: 116px; ">
    <div class="miniColors-hues">
        <div class="miniColors-huePicker" style="top: 0px; "></div>
    </div>
    <div class="miniColors-colors" style="background-color: rgb(255, 0, 0); ">
        <div class="miniColors-colorPicker" style="top: -5px; left: -5px; ">
            <div class="miniColors-colorPicker-inner"></div>
        </div>
    </div>
</div>

。并显示在我的页面页脚下方=(

---

正如您所看到的，它有一个left:116px的值，但对于垂直定位没有任何值。

尝试将字段放在段落内，并使用css定义段落的位置，它将起作用

例如：

<p style="position: absolute; left: 100; top: 100; margin-left: 10px;">
 <input type="input" name="color-picker" class="color-picker" size="7" />               
</p>

< /代码> 
请考虑尝试，这会改变下拉处理的方式。这个版本是对原来的一个完整的重写。我们还添加了一些新的可能有用的特性。
 < P> <强>解决方案：< /强> 

这就是我解决问题的方法。不过这个解决方法有点急躁。
我使用了
showcallback
并基于视图添加和删除类

// add jquery function removeClassPrefix
$.fn.removeClassPrefix = function(prefix) {
  this.each(function(i, it) {
    var classes = it.className.split(' ').map(function(item) {
      return item.indexOf(prefix) === 0 ? '' : item;
    });
    it.className = classes.join(' ');
  });

  return this;
};
// add more selector expressions to jquery
$.extend($.expr[':'], {
  'off-top': function(el) {
    return $(el).offset().top < $(window).scrollTop();
  },
  'off-right': function(el) {
    return $(el).offset().left + $(el).outerWidth() - $(window).scrollLeft() > $(window).width();
  },
  'off-bottom': function(el) {
    return $(el).offset().top + $(el).outerHeight() - $(window).scrollTop() > $(window).height();
  },
  'off-left': function(el) {
    return $(el).offset().left < $(window).scrollLeft();
  }
});

// use show event 
$('#div_id').miniColors({
  theme: 'bootstrap',
  show: function() {
    var $input = $(this);
    var $minicolors = $input.parent();
    var $panel = $minicolors.find('.minicolors-panel');
    var classPrefix = 'minicolors-position-';
    $minicolors.removeClassPrefix(classPrefix);
    if ($panel.is(':off-top')) {
      $minicolors.addClass(classPrefix + 'bottom');
    }
    if ($panel.is(':off-bottom')) {
      $minicolors.addClass(classPrefix + 'top');
    }
    if ($panel.is(':off-left')) {
      $minicolors.addClass(classPrefix + 'right');
    }
    if ($panel.is(':off-right')) {
      $minicolors.addClass(classPrefix + 'left');
    }
  }
});

//添加jquery函数removeClassPrefix
$.fn.removeClassPrefix=函数（前缀）{
这个。每个（功能（i，it）{
var classes=it.className.split（“”）.map（函数（项）{
返回项目。indexOf（前缀）==0？''：项目；
});
it.className=classes.join（“”）；
});
归还这个；
};
//向jquery添加更多选择器表达式
$.extend（$.expr['：']{
“离顶”：函数（el）{
返回$（el）.offset（）.top<$（窗口）.scrollTop（）；
},
“右偏”：函数（el）{
返回$（el）.offset（）.left+$（el）.outerWidth（）-$（窗口）.scrollLeft（）>$（窗口）.width（）；
},
“离底”：函数（el）{
返回$（el）.offset（）.top+$（el）.outerHeight（）-$（窗口）.scrollTop（）>$（窗口）.height（）；
},
“左偏”：函数（el）{
返回$（el）.offset（）.left<$（窗口）.scrollLeft（）；
}
});
//使用显示事件
$（'#div_id'）。迷你色({
主题：“引导”，
show:function（）{
var$input=$（此）；
var$minicolors=$input.parent（）；
var$panel=$minicolors.find（'.minicolors-panel'）；
var classPrefix='minicolors位置-'；
$minicolors.removeClassPrefix（classPrefix）；
如果（$panel.is（'：off-top'））{
$minicolors.addClass（classPrefix+'bottom'）；
}
如果（$panel.is（':off-bottom'））{
$minicolors.addClass（classPrefix+'top'）；
}
如果（$panel.is（':off left'））{
$minicolors.addClass（classPrefix+'right'）；
}
如果（$panel.is（':off right'））{
$minicolors.addClass（classPrefix+'left'）；
}
}
});
谢谢你对我的问题感兴趣。我已经添加了上面的示例代码，你的解决方案是不在盒子里工作。现在，我不想绝对定位，但是我试过了，它仍然不起作用，所以问题必须在其他地方……我求助于使用这个，而是完美地工作。版本2和2.1仍然没有考虑。e自动定位。如果颜色选择输入位于页面底部，则打开“颜色选择”对话框时，文档将有一个滚动条。可以选择位置：顶部，但颜色对话框将始终在输入顶部打开。如果要自动执行此操作，则需要使用“显示”事件。正确，则插件当前不支持视口检测。您可以结合使用
show
事件动态更改位置。
<p style="position: absolute; left: 100; top: 100; margin-left: 10px;">
 <input type="input" name="color-picker" class="color-picker" size="7" />               
</p>

// add jquery function removeClassPrefix
$.fn.removeClassPrefix = function(prefix) {
  this.each(function(i, it) {
    var classes = it.className.split(' ').map(function(item) {
      return item.indexOf(prefix) === 0 ? '' : item;
    });
    it.className = classes.join(' ');
  });

  return this;
};
// add more selector expressions to jquery
$.extend($.expr[':'], {
  'off-top': function(el) {
    return $(el).offset().top < $(window).scrollTop();
  },
  'off-right': function(el) {
    return $(el).offset().left + $(el).outerWidth() - $(window).scrollLeft() > $(window).width();
  },
  'off-bottom': function(el) {
    return $(el).offset().top + $(el).outerHeight() - $(window).scrollTop() > $(window).height();
  },
  'off-left': function(el) {
    return $(el).offset().left < $(window).scrollLeft();
  }
});

// use show event 
$('#div_id').miniColors({
  theme: 'bootstrap',
  show: function() {
    var $input = $(this);
    var $minicolors = $input.parent();
    var $panel = $minicolors.find('.minicolors-panel');
    var classPrefix = 'minicolors-position-';
    $minicolors.removeClassPrefix(classPrefix);
    if ($panel.is(':off-top')) {
      $minicolors.addClass(classPrefix + 'bottom');
    }
    if ($panel.is(':off-bottom')) {
      $minicolors.addClass(classPrefix + 'top');
    }
    if ($panel.is(':off-left')) {
      $minicolors.addClass(classPrefix + 'right');
    }
    if ($panel.is(':off-right')) {
      $minicolors.addClass(classPrefix + 'left');
    }
  }
});