我想使用颜色选择器选择两种颜色,然后使用这两种颜色绘制一个渐变矩形,通过php/GD.
我目前正在使用prototype.js/script.alicio。我们
那么,两个颜色选择器html字段:
<form>
<p>color 1 #<input type="text" id="colorfield1" value="FF33FF"></p>
<p>color 2 #<input type="text" id="colorfield2" value="CC3366"></p>
</p>
</form>
使用prototype.js,看起来我需要创建某种事件侦听器,然后从它触发我的php脚本。
我想应该是这样的,但我不确定:
<script type="text/javascript">
Event.observe(window, 'load', function() {
Event.observe('colorfield1', 'submit', what goes here???);
Event.observe('colorfield2 , 'submit', what goes here???);
});
</script>
我使用这个颜色选择器代码:http://code.google.com/p/colorpickerjs/
我同意@clockworkgeek关于尝试做这个客户端,但如果我理解正确的话,你可以用ajax这样做:
<script type="text/javascript">
Event.observe(window, 'load', function() {
Event.observe('colorfield1', 'submit', doFormSubmit);
Event.observe('colorfield2 , 'submit', doFormSubmit);
});
function doFormSubmit(event) {
// fire off an ajax request/updater, sending along the values
// in colorfield1 and colorfield2
new Ajax.Updater('myImageDisplay', '/myPhpScript.php', {
parameters: {
colorfield1: $F('colorfield1'),
colorfield2: $F('colorfield2')
}
});
}
</script>
这将使用输入字段中的数据向php脚本发出请求。请务必查看Ajax Updater的文档,看看这是否是您所需要的。
从您链接的页面来看,onClose
事件将是最有用的。(onUpdate
会经常开火)
如果在服务器端生成图像,那么使用image元素而不是AJAX是有意义的。
<form>
<p>color 1 #<input type="text" id="colorfield1" value="FF33FF"></p>
<p>color 2 #<input type="text" id="colorfield2" value="CC3366"></p>
<img src="" id="gradient" />
</form>
document.observe('dom:loaded', function() {
new Control.ColorPicker('colorfield1', { onClose: update });
new Control.ColorPicker('colorfield2', { onClose: update });
});
function update(event)
{
// `this` is the input field
var url = this.form.action;
url += (action.indexOf('?') < 0 ? '?' : '&') + this.form.serialize();
$('gradient').writeAttribute('src', url);
}