1、以下是KindEditor官方4.x 编辑器拾色器API简介
取色器(ColorPicker) API
Contents
取色器(ColorPicker) API
K.colorpicker(options)
K.colorpicker(options)
创建取色器。
参数:
object options: 配置信息
返回: KColorPicker
继承: KWidget ( K.widget(options) )
示例:
var colorpicker = K.colorpicker({
x : 100,
y : 200,
z : 1000,
selectedColor : 'default',
click : function(color) {
alert(color);
}
});
2、以下是ColorPicker拾色器API使用案例
<script type="text/javascript">
KindEditor.ready(function(K) {
var colorpicker;
K('#colorpicker_one').bind('click', function(e) {
e.stopPropagation();
if (colorpicker) {
colorpicker.remove();
colorpicker = null;
return;
}
var colorpickerPos = K('#colorpicker_one').pos();
colorpicker = K.colorpicker({
x : colorpickerPos.x,
y : colorpickerPos.y + K('#colorpicker1').height(),
z : 19811214,
selectedColor : 'default',
noColor : '默认颜色',
click : function(color) {
K('#color_one').val(color);
colorpicker.remove();
colorpicker = null;
}
});
});
K('#colorpicker_two').bind('click', function(e) {
e.stopPropagation();
if (colorpicker) {
colorpicker.remove();
colorpicker = null;
return;
}
var colorpickerPos = K('#colorpicker_two').pos();
colorpicker = K.colorpicker({
x : colorpickerPos.x,
y : colorpickerPos.y + K('#colorpicker2').height(),
z : 19811214,
selectedColor : 'default',
noColor : '默认颜色',
click : function(color) {
K('#color_two').val(color);
colorpicker.remove();
colorpicker = null;
}
});
});
K('#colorpicker_three').bind('click', function(e) {
e.stopPropagation();
if (colorpicker) {
colorpicker.remove();
colorpicker = null;
return;
}
var colorpickerPos = K('#colorpicker_three').pos();
colorpicker = K.colorpicker({
x : colorpickerPos.x,
y : colorpickerPos.y + K('#colorpicker3').height(),
z : 19811214,
selectedColor : 'default',
noColor : '默认颜色',
click : function(color) {
K('#color_three').val(color);
colorpicker.remove();
colorpicker = null;
}
});
});
K(document).click(function() {
if (colorpicker) {
colorpicker.remove();
colorpicker = null;
}
});
});
</script>
3、以下是拾色器效果 的html内容
<div class="container information">
<ul class="form">
<form action="#" method="post" accept-charset="utf-8">
<li>
<label>导航背景色:</label><input type="text" id="color_one" name="nav_background_color" value="" class="txt" /><input type="button" id="colorpicker_one" value="打开取色器" />颜色值为,例如 #41a981
</li>
<li>
<label>导航字体色:</label><input type="text" id="color_two" name="nav_font_color" value="" class="txt" /><input type="button" id="colorpicker_one" value="打开取色器" />颜色值为,例如 #000000
</li>
<li>
<label>导航选中色:</label><input type="text" id="color_three" name="nav_hover_color" value="" class="txt" /><input type="button" id="colorpicker_one" value="打开取色器" />颜色值为,例如 #349b81
</li>
<li>
<input type="hidden" name="type" value="nav"><input type="submit" value="提交信息" class="submit"/>
</li>
</form>
</ul>
</div>
发表评论 取消回复