Question

I'm using Spectrum color picker plugin. I have 2 color pickers showing. I want the majority of the settings to be the same. The only setting differences is color, localStorageKey, and move: function (color). The rest of the settings should be the same.

I have 1 class - "full", and 2 id's - "first", "second". The settings I want for both of them are in full, and the others are in the id.

The problem is, when I add the settings for first and second, the color picker plugin disappears. What am I doing wrong, and how can I fix it?

JSFiddle

$(".full").spectrum({
    	color: false,
        flat: false,
        showInput: true,
        allowEmpty: false,
        showInitial: false,
        showPalette: true,
        showPaletteOnly: false,
        hideAfterPaletteSelect: false,
        showSelectionPalette: true,
        localStorageKey: false,
        showAlpha: true,
        palette: [
            ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
            ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
            ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"]
        ]
    });
    
// The problem is, when the following code gets uncommented:

    /*$("#first").spectrum({
        color: "green",
        localStorageKey: "first",
        
        move: function (color) {
            // Perform Some Code
        }
    });
    
    $("#second").spectrum({
        color: "orange,
        localStorageKey: "second",
        
        move: function (color) {
            // Perform Some Code
        }
    });*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://bgrins.github.io/spectrum/spectrum.js"></script>
<link href="http://bgrins.github.io/spectrum/spectrum.css" rel="stylesheet"/>



<a href='http://bgrins.github.com/spectrum'>Spectrum Homepage</a>

<h2>First</h2>
<input type='text' class="full" id="first"/>

<h2>Second</h2>
<input type='text' class="full" id="second"/>

Answer 1

You forgot to quote the orange string. You give it only 1 quote at the start, when you should put it inside 2 quotes like the following:

 $("#second").spectrum({
        color: "orange",
        localStorageKey: "second",

        move: function (color) {
            // Perform Some Code
 } 
});

Always perform debugging using available tool such as firebug or google chrome web inspector when you find error with your js code.

EDIT

Just found that you can use extend to shorten your color picker code:

// define your color picker object in a variable
var rules = {
        color: false,
        flat: false,
        showInput: true,
        allowEmpty: false,
        showInitial: false,
        showPalette: true,
        showPaletteOnly: false,
        hideAfterPaletteSelect: false,
        showSelectionPalette: true,
        localStorageKey: false,
        showAlpha: true,
        palette: [
            ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
            ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
            ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"]
        ]
    };

// use and add other key value pair it inside the color picker with $.extend method

    // first id
    $("#first").spectrum(        
     $.extend(rules, {
        color: "green",
        localStorageKey: "first",
        move: function (color) {
            alert();
        }
     })
    );

    // second id
    $("#second").spectrum(
        $.extend(rules, {
        color: "orange",
        localStorageKey: "second",
        move: function (color) {
            // Perform Some Code
        }
        })
    );

FIDDLE DEMO

Spectrum not loading when adding my own settings

JSFiddle

1 个答案: