初始化spectrum项目

bower.json

+{
+  "name": "spectrum",
+  "version": "1.8.0",
+  "main": ["./spectrum.css", "./spectrum.js"],
+  "docs": "http://bgrins.github.com/spectrum",
+  "homepage": "http://bgrins.github.com/spectrum",
+  "demo": "http://jsfiddle.net/bgrins/ctkY3/",
+  "dependencies": {
+    "jquery": ">=1.7.2"
+  },
+  "ignore": [
+    ".gitignore",
+    ".travis.yml",
+    "build/",
+    "docs/",
+    "example/",
+    "Gruntfile.js",
+    "LICENSE",
+    "README.md",
+    "test/"
+  ]
+}

i18n/jquery.spectrum-ar.js

+// Spectrum Colorpicker
+// Arabic (ar) localization
+// https://github.com/bgrins/spectrum
+(function ( $ ) {
+
+var localization = $.spectrum.localization["ar"] = {
+    cancelText: "إلغاء",
+    chooseText: "إختار",
+    clearText: "إرجاع الألوان على ما كانت",
+    noColorSelectedText: "لم تختار أي لون",
+    togglePaletteMoreText: "أكثر",
+    togglePaletteLessText: "أقل"
+};
+
+$.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-de.js

+// Spectrum Colorpicker
+// German (de) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["de"] = {
+        cancelText: "Abbrechen",
+        chooseText: "Wählen",
+        clearText: "Farbauswahl zurücksetzen",
+        noColorSelectedText: "Keine Farbe ausgewählt",
+        togglePaletteMoreText: "Mehr",
+        togglePaletteLessText: "Weniger"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-dk.js

+// Spectrum Colorpicker
+// Danish (dk) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["dk"] = {
+		cancelText: "annuller",
+		chooseText: "Vælg"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-es.js

+// Spectrum Colorpicker
+// Spanish (es) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["es"] = {
+        cancelText: "Cancelar",
+        chooseText: "Elegir",
+        clearText: "Borrar color seleccionado",
+        noColorSelectedText: "Ningún color seleccionado",
+        togglePaletteMoreText: "Más",
+        togglePaletteLessText: "Menos"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-fa.js

+// Spectrum Colorpicker
+// Persian (fa) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["fa"] = {
+        cancelText: "لغو",
+        chooseText: "انتخاب"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-fi.js

+// Spectrum Colorpicker
+// Finnish (fi) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["fi"] = {
+        cancelText: "Kumoa",
+        chooseText: "Valitse"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-fr.js

+// Spectrum Colorpicker
+// French (fr) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["fr"] = {
+        cancelText: "Annuler",
+        chooseText: "Valider",
+        clearText: "Effacer couleur sélectionnée",
+        noColorSelectedText: "Aucune couleur sélectionnée",
+        togglePaletteMoreText: "Plus",
+        togglePaletteLessText: "Moins"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-gr.js

+// Spectrum Colorpicker
+// Greek (gr) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["gr"] = {
+        cancelText: "Ακύρωση",
+        chooseText: "Επιλογή",
+        clearText: "Καθαρισμός επιλεγμένου χρώματος",
+        noColorSelectedText: "Δεν έχει επιλεχθεί κάποιο χρώμα",
+        togglePaletteMoreText: "Περισσότερα",
+        togglePaletteLessText: "Λιγότερα"
+    };
+
+    $.extend($.gr.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-he.js

+// Spectrum Colorpicker
+// Hebrew (he) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["he"] = {
+        cancelText: "בטל בחירה",
+        chooseText: "בחר צבע",
+        clearText: "אפס בחירה",
+        noColorSelectedText: "לא נבחר צבע",
+        togglePaletteMoreText: "עוד צבעים",
+        togglePaletteLessText: "פחות צבעים"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-hr.js

+// Spectrum Colorpicker
+// Croatian (hr) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["hr"] = {
+        cancelText: "Odustani",
+        chooseText: "Odaberi",
+        clearText: "Poništi odabir",
+        noColorSelectedText: "Niti jedna boja nije odabrana",
+        togglePaletteMoreText: "Više",
+        togglePaletteLessText: "Manje"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-id.js

+// Spectrum Colorpicker
+// Indonesia/Bahasa Indonesia (id) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["id"] = {
+        cancelText: "Batal",
+        chooseText: "Pilih",
+        clearText: "Hapus Pilihan Warna",
+        noColorSelectedText: "Warna Tidak Dipilih",
+        togglePaletteMoreText: "tambah",
+        togglePaletteLessText: "kurangi"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-it.js

+// Spectrum Colorpicker
+// Italian (it) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["it"] = {
+		cancelText: "annulla",
+		chooseText: "scegli",
+		clearText: "Annulla selezione colore",
+		noColorSelectedText: "Nessun colore selezionato"
+	};
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-ja.js

+// Spectrum Colorpicker
+// Japanese (ja) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["ja"] = {
+        cancelText: "中止",
+        chooseText: "選択"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-lt.js

+// Spectrum Colorpicker
+// Lithuanian (lt) localization
+// https://github.com/liesislukas
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["lt"] = {
+        cancelText: "Atšaukti",
+        chooseText: "Pasirinkti",
+        clearText: "Išvalyti pasirinkimą",
+        noColorSelectedText: "Spalva nepasirinkta",
+        togglePaletteMoreText: "Daugiau",
+        togglePaletteLessText: "Mažiau"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-nl.js

+// Spectrum Colorpicker
+// Dutch (nl-nl) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["nl-nl"] = {
+        cancelText: "Annuleer",
+        chooseText: "Kies",
+        clearText: "Wis kleur selectie",
+        togglePaletteMoreText: 'Meer',
+        togglePaletteLessText: 'Minder'
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-pl.js

+// Spectrum Colorpicker
+// Polish (pl) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["pl"] = {
+        cancelText: "Anuluj",
+        chooseText: "Wybierz",
+        clearText: "Usuń wybór koloru",
+        noColorSelectedText: "Nie wybrano koloru",
+        togglePaletteMoreText: "Więcej",
+        togglePaletteLessText: "Mniej"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-pt-br.js

+// Spectrum Colorpicker
+// Brazilian (pt-br) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["pt-br"] = {
+        cancelText: "Cancelar",
+        chooseText: "Escolher",
+        clearText: "Limpar cor selecionada",
+        noColorSelectedText: "Nenhuma cor selecionada",
+        togglePaletteMoreText: "Mais",
+        togglePaletteLessText: "Menos"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-ru.js

+// Spectrum Colorpicker
+// Russian (ru) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["ru"] = {
+        cancelText: "Отмена",
+        chooseText: "Выбрать",
+        clearText: "Сбросить",
+        noColorSelectedText: "Цвет не выбран",
+        togglePaletteMoreText: "Ещё",
+        togglePaletteLessText: "Скрыть"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-sv.js

+// Spectrum Colorpicker
+// Swedish (sv) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["sv"] = {
+        cancelText: "Avbryt",
+        chooseText: "Välj"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-tr.js

+// Spectrum Colorpicker
+// Turkish (tr) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["tr"] = {
+		cancelText: "iptal",
+		chooseText: "tamam"
+	};
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-zh-cn.js

+// Spectrum Colorpicker
+// Simplified Chinese (zh-cn) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["zh-cn"] = {
+        cancelText: "取消",
+        chooseText: "选择",
+        clearText: "清除",
+        togglePaletteMoreText: "更多选项",
+        togglePaletteLessText: "隐藏",
+        noColorSelectedText: "尚未选择任何颜色"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

i18n/jquery.spectrum-zh-tw.js

+// Spectrum Colorpicker
+// Traditional Chinese (zh-tw) localization
+// https://github.com/bgrins/spectrum
+
+(function ( $ ) {
+
+    var localization = $.spectrum.localization["zh-tw"] = {
+        cancelText: "取消",
+        chooseText: "選擇",
+        clearText: "清除",
+        togglePaletteMoreText: "更多選項",
+        togglePaletteLessText: "隱藏",
+        noColorSelectedText: "尚未選擇任何顏色"
+    };
+
+    $.extend($.fn.spectrum.defaults, localization);
+
+})( jQuery );

package.json

+{
+    "name": "spectrum-colorpicker",
+    "description": "Spectrum: the no hassle jQuery colorpicker",
+    "version": "1.8.0",
+    "main": "spectrum.js",
+    "license": "MIT",
+    "keywords": ["jquery-plugin", "ecosystem:jquery", "color", "colorpicker", "ui"],
+    "homepage": "http://bgrins.github.com/spectrum",
+    "repository": {
+        "type": "git",
+        "url": "https://bgrins.github.com/spectrum"
+    },
+    "author": {
+        "name" : "Brian Grinstead",
+        "email" : "briangrinstead@gmail.com",
+        "url" : "http://briangrinstead.com/"
+    },
+    "devDependencies": {
+        "grunt": "~0.4.0",
+        "grunt-contrib-jshint": "~0.4.3",
+        "grunt-contrib-qunit": "~0.2.0",
+        "grunt-contrib-uglify": "~0.2.0"
+    }
+}

themes/index.html

+<!doctype html>
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <title>Spectrum - The No Hassle jQuery Colorpicker</title>
+
+    <meta name="description" content="Spectrum is a JavaScript colorpicker plugin using the jQuery framework.  It is highly customizable, but can also be used as a simple input type=color polyfill">
+    <meta name="author" content="Brian Grinstead and Spectrum contributors">
+
+    <link rel="stylesheet" type="text/css" href="../spectrum.css">
+    <link rel="stylesheet" type="text/css" href="../docs/bootstrap.css">
+    <link rel="stylesheet" type="text/css" href="../docs/docs.css">
+    <script type="text/javascript" src="../docs/jquery-1.9.1.js"></script>
+    <script type="text/javascript" src="../spectrum.js"></script>
+
+
+    <link rel="stylesheet" type="text/css" href="sp-dark.css">
+
+</head>
+<body>
+<div id='header'>
+    <h1><a href='http://bgrins.github.com/spectrum'>Spectrum</a></h1> <h2><em>The No Hassle jQuery Colorpicker</em></h2>
+    <div id='links'>
+        View the <a href='http://github.com/bgrins/spectrum'>Source code</a>.
+        Spectrum is a project by <a href='http://twitter.com/bgrins'>@bgrins</a>.
+    </div>
+    <br style='clear:both;' />
+</div>
+
+<div class="container">
+    <h2>Themes</h2>
+
+    <div class="alert">
+        This page is in development.
+    </div>
+
+    <div id="theme-gallery">
+        <h3>Gallery of existing themes</h3>
+
+        <div class="theme" id="sp-light">
+            <h4>sp-light</h4>
+            <p>This is the default theme that you know and love.</p>
+
+            <div class='example'>
+                <input type='text' />
+            </div>
+        </div>
+
+        <div class="theme" id="sp-dark">
+            <h4>sp-dark</h4>
+            <p>Similar to sp-light, only ... darker</p>
+
+            <div class='example'>
+                <input type='text' />
+            </div>
+        </div>
+    </div>
+
+    <div id="theme-instructions">
+        <h3>Instructions for building themes</h3>
+        <p>
+            You can change most any property on spectrum using CSS.  Anything from  borders and colors, to the size of the draggable areas, to the layout of the colorpicker can be changed with plain CSS.
+        </p>
+        <h4>Playing friendly with other themes</h4>
+        <p>
+            Please prefix all of your rules with <code>.theme-name</code>.  The exception is for changes to <code>.sp-container</code> and <code>.sp-replacer</code>, which will have your theme name applied.
+        </p>
+        <p>
+            See a basic scaffold for a super simple theme.  See <a href='sp-dark.css'>sp-dark.css</a> for a slightly more advanced example.
+        </p>
+        <pre>
+.theme-name.sp-container {
+
+}
+.theme-name.sp-replacer {
+
+}
+.theme-name .sp-preview {
+
+}
+        </pre>
+        <h3>Submitting a theme</h3>
+        <p>
+            If you have made some customizations that you would like to share, please open a <a href="http://bgrins.github.com/spectrum/pulls">pull request</a> with the theme file inside of this themes/ directory in the project.  Or <a href="http://bgrins.github.com/spectrum/issues">open an issue</a> with a link to the theme.
+        </p>
+    </div>
+</div>
+
+
+<script>
+    $("#sp-light input").spectrum({
+        theme: "sp-light"
+    });
+    $("#sp-dark input").spectrum({
+        theme: "sp-dark"
+    });
+</script>
+<script type="text/javascript" src="../docs/prettify.js"></script>
+<script type="text/javascript">
+
+  var _gaq = _gaq || [];
+  _gaq.push(['_setAccount', 'UA-8259845-4']);
+  _gaq.push(['_trackPageview']);
+
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+
+</script>
+</body>
+</html>

themes/sp-dark.css

+/* Container */
+.sp-dark.sp-container {
+    background-color: #333;
+    border: solid 1px #555;
+}
+
+/* Replacer (the little preview div that shows up instead of the <input>) */
+.sp-dark.sp-replacer {
+    border: solid 1px #fff;
+    background: #333;
+    color: #eee;
+    vertical-align: middle;
+}
+.sp-replacer:hover, .sp-replacer.sp-active {
+    border-color: #F0C49B;
+    color: #fff;
+}
+.sp-replacer.sp-disabled {
+    border-color: silver;
+    color: silver;
+}
+.sp-dark .sp-preview {
+    border: solid 1px #999;
+}
+.sp-dark .sp-cancel {
+    color: #f99f9f !important;
+}
+
+.sp-dark, .sp-dark button, .sp-dark input, .sp-color, .sp-hue {
+
+}
+
+/* Input */
+.sp-dark .sp-input-container {
+
+}
+.sp-dark .sp-initial-disabled .sp-input-container {
+
+}
+.sp-dark .sp-input {
+
+}
+.sp-dark .sp-input:focus  {
+
+}
+.sp-dark .sp-input.sp-validation-error {
+
+}
+
+.sp-dark .sp-picker-container , .sp-dark .sp-palette-container {
+
+}
+.sp-dark .sp-picker-container {
+
+}
+
+/* Palettes */
+.sp-dark .sp-palette-container {
+
+}
+
+.sp-dark .sp-palette .sp-thumb-el {
+
+}
+.sp-dark .sp-palette .sp-thumb-el:hover, .sp-dark .sp-palette .sp-thumb-el.sp-thumb-active {
+
+}
+.sp-dark .sp-thumb-el {
+}
+
+/* Initial */
+.sp-dark .sp-initial {
+
+}
+.sp-dark .sp-initial span {
+
+}
+
+/* Buttons */
+.sp-dark .sp-button-container {
+
+}
+
+/* Replacer (the little preview div that shows up instead of the <input>) */
+.sp-dark.sp-replacer {
+
+}
+.sp-dark.sp-replacer:hover, .sp-dark.sp-replacer.sp-active {
+    border-color: #F0C49B;
+    color: #111;
+}
+.sp-dark.sp-replacer.sp-disabled {
+
+}
+.sp-dark .sp-dd {
+
+}
+
+
+
+.sp-dark .sp-preview {
+
+}
+.sp-dark .sp-palette {
+
+}
+.sp-dark .sp-palette .sp-thumb-el {
+
+}
+
+.sp-dark button {
+
+}
+.sp-dark button:hover {
+
+}
+.sp-dark button:active {
+
+}
+.sp-dark .sp-cancel {
+
+}
+.sp-dark .sp-cancel:hover {
+
+}
+.sp-dark .sp-palette span:hover, .sp-dark .sp-palette span.sp-thumb-active {
+
+}