0

我按照icodeya的教程在文本字段中添加颜色选择器。不同的是，我使用了twitter bootstrap而不是 miniColor.js。但我无法让它工作。

这是我的代码：

配置文件

grails.resources.modules = {
jQuery{
resource url:'http://code.jquery.com/jquery-1.8.2.min.js', disposition: 'head'
}

colorPicker{
dependsOn 'jQuery'

resource url: '/js/jquery.twitterBootstrap.js', disposition: 'head'
resource url: '/css/jquery.twitterBootstrap.css'
}
}

/css/twitterBootStrap.css

 /*
    Colorpicker for Bootstrap
    Copyright 2012 Stefan Petre 
    Licensed under the Apache License v2.0
    http://www.apache.org/licenses/LICENSE-2.0
*/
 .colorpicker-saturation { width: 100px; height: 100px; background-image: url(/img/saturation.png); cursor: crosshair; float: left; } .colorpicker-saturation i { display: block; height: 5px; width: 5px; border: 1px solid #000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: absolute; top: 0; left: 0; margin: -4px 0 0 -4px; } .colorpicker-saturation i b { display: block; height: 5px; width: 5px; border: 1px solid #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .colorpicker-hue, .colorpicker-alpha { width: 15px; height: 100px; float: left; cursor: row-resize; margin-left: 4px; margin-bottom: 4px; } .colorpicker-hue i, .colorpicker-alpha i { display: block; height: 1px; background: #000; border-top: 1px solid #fff; position: absolute; top: 0; left: 0; width: 100%; margin-top: -1px; } .colorpicker-hue { background-image: url(/img/hue.png); } .colorpicker-alpha { background-image: url(/img/alpha.png); display: none; } .colorpicker { *zoom: 1; top: 0; left: 0; padding: 4px; min-width: 120px; margin-top: 1px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .colorpicker:before, .colorpicker:after { display: table; content: ""; } .colorpicker:after { clear: both; } .colorpicker:before { content: ''; display: inline-block; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-bottom-color: rgba(0, 0, 0, 0.2); position: absolute; top: -7px; left: 6px; } .colorpicker:after { content: ''; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; position: absolute; top: -6px; left: 7px; } .colorpicker div { position: relative; } .colorpicker.alpha { min-width: 140px; } .colorpicker.alpha .colorpicker-alpha { display: block; } .colorpicker-color { height: 10px; margin-top: 5px; clear: both; background-image: url(/img/alpha.png); background-position: 0 100%; } .colorpicker-color div { height: 10px; } .input-append.color .add-on i, .input-prepend.color .add-on i { display: block; cursor: pointer; width: 16px; height: 16px; }

在我的 gsp 文件中，我添加了：

<r:require module="colorPicker" / >
<script> 
jQuery.noConflict();
jQuery(document).ready( function() {
jQuery('#myColorPicker').colorpicker();
});
</script>
<br/><br/>

我还在grails的js文件夹中添加了js文件。但是，它看起来像这样：

在此处输入图像描述

我看不到从黑色到粉红色的渐变；只是全是粉红色的。但是当我点击一个点时，比如在右下角，我会得到预期的深色。我的代码的结果并没有显示出来。

我正在使用 Google Chrome 的 21.0.1180.75 版本。它看起来确实与 eyecon.ro 网站上演示的不同。

为什么这不起作用？

4

1 回答 1

0

图像的路径不正确。假设 colorpicker 文件夹在您下载它时是完整的，那么指向文件的 css 链接应该是../img/*而不是/img/*. 原始的css是错误的。但是，包含的 .less 文件是正确的。

于 2012-12-11T21:25:22.020 回答