0

jQuery miniColors colorpickerを使用していますが、サンプル コードでは、ピッカーはフィールドとボタンのすぐ隣に表示されます。私の場合、ドキュメントの一番下に表示されます。それを呼び出すボタン。

このプラグインで同様の問題が発生した人はいますか?

これが私のコードの外観です（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>

. そして、実際のカラーピッカーは my の最後に挿入されます (したがって、 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 に答える