我正在尝试向特色图像元框添加颜色选择器。
以下是一些背景：
我使用特色图像元框来放置视差背景图像
由于允许用户在图像上放置文本，因此（到目前为止）有一个保持白色背景的div
在特色图像框中，用户可以调整白色div的不透明度，请参见：this
现在，我想为用户添加一种更改白色div颜色的可能性
好了，现在我们到了
为此，我找到了一个js，它可以为我做到这一点：here
我已经将“代码”实现到特色图像元框中，并且我可以更改颜色的值。我遇到的问题是输出rgb值<这是我所做的（请记住这是我的functions.php)
add_filter( \'admin_post_thumbnail_html\', \'basic_add_opacity_to_feature_thumb_box\');
function basic_add_opacity_to_feature_thumb_box( $myhtml ) {
$selected_option = get_post_meta( get_the_ID(), \'basic_opacity\', true ); // get the current value
for ( $i = 0; $i <= 1; $i = $i + 0.1 ) { //loop from 0 to 1 in 0.1 increments
$selects .= \'<option value="\' . $i . \'" \' . selected( $selected_option, $i, false ) . \'>\' . $i . \'</option>\';
}
//create the return html, with the selects created before
return $myhtml .= \'
<script src="\'.get_bloginfo(\'template_directory\').\'/js/jscolor.js"></script>
<form>
Opacity:
<select name="basic_opacity">
\' . $selects . \'
</select><br><br>
Color:<input class="jscolor {onFineChange:"update(this)"}" value="ffcc00">
toRGBString = <span id="rgb-str"></span><br />
</form>
<script>
function update(picker) {
document.getElementById("rgb-str").innerHTML = picker.toRGBString();
</script>
\';
}
有人能看出我做错了什么吗？
SO网友:Interactive
可以让它工作。。。。
我使用了简单的版本：
add_filter( \'admin_post_thumbnail_html\', \'basic_add_opacity_to_feature_thumb_box\'); //same as before
function basic\\u add\\u opacity\\u to\\u feature\\u thumb\\u box（$myhtml）{
$selected_option = get_post_meta( get_the_ID(), \'basic_opacity\', true ); // get the current value
for ( $i = 0; $i <= 1; $i = $i + 0.1 ) { //loop from 0 to 1 in 0.1 increments
$selects .= \'<option value="\' . $i . \'" \' . selected( $selected_option, $i, false ) . \'>\' . $i . \'</option>\'; //add a option field, and select it if it is the one saved before
}
//create the return html, with the selects created before
return $myhtml .= \'
<script src="\'.get_bloginfo(\'template_directory\').\'/js/jscolor.js"></script>
<form>
Transparantie:
<select name="basic_opacity">
\' . $selects . \'
</select><br><br>
Kleur:
<div id="color">
<input id="colorpicker" class="jscolor {onFineChange:"update(this)"}" value="FFFFFF">
<div id="selected_color"></div>
</div>
</form>
<script type="text/javascript">
jQuery(document).ready(function($){
$("input#colorpicker").change(function() {
var contentString =$("input#colorpicker").css("background-color");
$("#selected_color").html(contentString);
});
});
</script>
\';
}
选择颜色后，我将内容（RGB）输出到空div。
