0

最近http://www.eyecon.ro/colorpickerのカラーピッカーを使い始めました

非常に優れたプラグインのように思えますが、大きな問題があります。自分のサイトで動作させることができません。

このコードを使用して、「ヘッダーに含める

<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<style type="text/css">

#colorSelector {
    width: 50px;
    height: 50px;
}
</style>

体内で

<p>
    <div id="colorSelector"><div style="background-color: #0000ff"></div></div>
</p>

<script type="text/javascript">
$('#colorSelector').ColorPicker({
    color: '#0000ff',
    onShow: function (colpkr) {
        $(colpkr).fadeIn(500);
        return false;
    },
    onHide: function (colpkr) {
        $(colpkr).fadeOut(500);
        return false;
    },
    onChange: function (hsb, hex, rgb) {
        $('#colorSelector div').css('backgroundColor', '#' + hex);
    }
});
</script>

解決するのは非常に簡単な問題だと思いますが、何が問題なのかわかりません。

すべてに前もって感謝します

4

1 に答える 1

0

私はちょうど実用的な例を作りました。

まず、カラー ピッカーに必要なすべてのリソースをリンクします。

<head>
    <link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
    <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/colorpicker.js"></script>
    <script type="text/javascript" src="js/eye.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
</head>

次に、div 要素を作成します。

<div id="colorSelector"></div>

最後に、プラグインをセットアップします。

<script type="text/javascript">
    $(function() {
        $('#colorSelector').ColorPicker();
    });
</script>

「onChange、onPreview ...」が必要なイベントを処理するだけです。

編集：

すべてのリソース ファイルは、提供されたカラー ピッカー サイトからダウンロードされました。

于 2013-07-10T18:52:20.410 に答える