0

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

有人对这个插件有类似的问题吗？

这是我的代码的样子（在 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='".$data[0]."' />
</p>

. 在我运行这段代码之后。

$('#data_0').miniColors({
   change: function(hex, rgb) {     $('#slide_bg').css("background-color",hex); }   
});

. 它看起来像这样。

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

. 实际的颜色选择器被插入到我的最后一个（所以就在 and 之前，看起来像这样：

<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 的值，但没有垂直定位的值。

4

3 回答 3

1

请考虑尝试MiniColors 2.0，它改变了下拉处理定位的方式。这个版本是对原始版本的完全重写。我们还添加了一些您可能会觉得有用的新功能。

于 2012-12-24T23:41:14.807 回答
0

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

例如 -

<p style="position: absolute; left: 100; top: 100; margin-left: 10px;">
 <input type="input" name="color-picker" class="color-picker" size="7" />               
</p>
于 2012-11-01T06:10:13.330 回答
0

解决方案：

这就是我解决它的方法。解决方案有点生涩。我使用show callback并添加了基于视图的删除类

// 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');
    }
  }
});
于 2018-10-26T11:23:59.053 回答