1

wordpress テーマのオプション ダッシュボードを作成していて、ほぼすべての作業を行うことができましたが、ここに問題があります。入力フィールドをクリックすると、カラーピッカーがポップアップ表示されるので、色を選択 (または代わりに HEX を記述) できます。カラーピッカーの外側をクリックすると、カラーピッカーは消えます。

しかし、2 つ目を追加すると、最初の入力がカラーピッカーをポップし、色の値を両方の入力に取り込み、ポップの外側をクリックしても消えません。次に、2 番目の入力をクリックすると、カラーピッカーはポップしません。

他のシナリオでは、最初に 2 番目のものをクリックすると、カラーピッカーがポップしますが、いずれかの入力が値を取ります。

私のコードはこれです：

HTML と PHP:

case 'colorpicker':
?>

<div class="options_input options_text color-picker">

<input class="pickcolor" name="<?php echo $value['id']; ?>"
id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>"
value="<?php if ( get_option( $value['id'] ) != "") { 
echo stripslashes(get_option( $value['id'])  ); } else { echo $value['std']; } ?>" />

            <div id="colorpicker"></div>
</div>

<?php
break;

私のjs：

jQuery(document).ready(function($) {
$('#colorpicker').hide();
$('#colorpicker').farbtastic('.pickcolor');

$('#color').click(function() {
    $('#colorpicker').fadeIn();
});

$(document).mousedown(function() {
    $('#colorpicker').each(function() {
        var display = $(this).css('display');
        if ( display == 'block' )
            $(this).fadeOut();
    });
});

});

jQuery(document).ready(function($) {

$('.pickcolor').click( function(e) {
colorPicker = jQuery(this).next('div');
input = jQuery(this).prev('input');
$(colorPicker).farbtastic(input);
colorPicker.show();
e.preventDefault();
$(document).mousedown( function() {
    $(colorPicker).hide();
});
});

});

複数のツインフィールドで動作するようにjsを微調整するのを手伝ってくれる人はいますか?

4

2 に答える 2

1

これがまだ関連しているかどうかはわかりません...しかし、HTMLDriveでこのデモを見つけて、トリックを実行しました。

基本的に、それはすでに farbtastic プラグインに組み込まれています...正しく設定する必要があるだけで、その後、いくつかのアクションで必要なテキスト ボックスにピッカーを割り当てるだけです。

var farbPicker = $.farbtastic('#colorpicker');

$('.tbColourPicker').each(function ()
{
    farbPicker.linkTo(this);
})

$('.showColourPanel').click(function ()
{
     var targetObject = input you want to edit;
     farbPicker.linkTo(targetObject);
});

ピッカーで編集する前に、テキスト ボックスに既定の色の値を設定することだけに注意してください。

于 2014-01-16T04:40:13.580 に答える