1.
<!doctype html>
2.
<html>
3.
<head>
4.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
5.
<title>Spectrum - The No Hassle jQuery Colorpicker</title>
6.
7.
<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">
8.
<meta name="author" content="Brian Grinstead and Spectrum contributors">
9.
10.
<link rel="stylesheet" type="text/css" href="../spectrum.css">
11.
<link rel="stylesheet" type="text/css" href="../docs/bootstrap.css">
12.
<link rel="stylesheet" type="text/css" href="../docs/docs.css">
13.
<script type="text/javascript" src="../docs/jquery-1.9.1.js"></script>
14.
<script type="text/javascript" src="../spectrum.js"></script>
15.
<script type="text/javascript" src="../i18n/jquery.spectrum-fi.js"></script>
16.
<script type='text/javascript' src='example.js'></script>
17.
18.
<style>
19.
20.
.example-container {
21.
margin-top: 10px;
22.
text-align: center;
23.
background: #333;
24.
background: linear-gradient(to bottom, #eee, #ccc);
25.
padding: 3px;
26.
padding-top: 0;
27.
border-radius: 5px;
28.
}
29.
.example-controls {
30.
background: #999;
31.
margin: 0 -3px;
32.
padding: 10px 0;
33.
margin-bottom: 15px;
34.
35.
}
36.
label {
37.
display: inline-block;
38.
font-weight: bold;
39.
40.
}
41.
#palettes .sp-palette {
42.
max-width: 500px;
43.
}
44.
45.
46.
.newGmail .sp-palette-row-0, .newGmail .sp-palette-row-1 {
47.
margin-bottom: 5px;
48.
}
49.
50.
.newGmail .sp-palette .sp-thumb-el {
51.
width: 20px;
52.
height: 20px;
53.
margin: 1px 1px;
54.
}
55.
56.
.newGmail .sp-palette .sp-thumb-el:hover, .newGmail .sp-palette .sp-thumb-el.sp-thumb-active {
57.
border-color: #000;
58.
}
59.
</style>
60.
</head>
61.
<body>
62.
<div id='header'>
63.
<h1><a href='http://bgrins.github.com/spectrum'>Spectrum</a></h1> <h2><em>The No Hassle jQuery Colorpicker</em></h2>
64.
<div id='links'>
65.
View the <a href='http://github.com/bgrins/spectrum'>Source code</a>.
66.
Spectrum is a project by <a href='http://twitter.com/bgrins'>@bgrins</a>.
67.
</div>
68.
<br style='clear:both;' />
69.
</div>
70.
71.
<div class="container">
72.
73.
<h2>Spectrum Colorpicker Crazy Configurator</h2>
74.
<div class='alert'>NOTE: this page is currently in development. Please refer to the <a href='http://github.com/bgrins/spectrum'>Home Page</a> for demos and documentation instead.
75.
</div>
76.
<p>
77.
Spectrum can be customized to show and hide different portions of the colorpicker. Try clicking some of the buttons below to see how it can change.
78.
</p>
79.
80.
<div class="example-container">
81.
<div class="example-controls">
82.
<div class='btn-group'>
83.
<button class='btn toggleBtn' data-rule='showPalette'>Show Palette</button>
84.
<button class='btn toggleBtn' data-rule='showInput'>Show Input</button>
85.
<button class='btn toggleBtn' data-rule='showInitial'>Show Initial</button>
86.
<button class='btn toggleBtn' data-rule='showAlpha'>Show Alpha</button>
87.
<button class='btn toggleBtn' data-rule='showPaletteOnly'>Show Palette Only</button>
88.
<button class='btn toggleBtn' data-rule='togglePaletteOnly'>Show Picker Toggle Button</button>
89.
<button class='btn toggleBtn' data-rule='showButtons'>Show Buttons</button>
90.
</div>
91.
<br />
92.
<br />
93.
<p>
94.
<label>Draggable Size <input type='range' value='172' id='size' max='500' min='50' /></label>
95.
96.
<label>Hue Size <input type='range' value='16' id='huesize' max='90' min='5' /></label>
97.
</p>
98.
</div>
99.
100.
<input id="full">
101.
102.
</div>
103.
104.
<hr />
105.
<h2>Spectrum Colorpicker Localization</h2>
106.
<div class='alert'>
107.
<p>
108.
This page has loaded the German localization. Here is a list of all <a href='https://github.com/bgrins/spectrum/tree/master/i18n'>spectrum localizations</a>. <strong>Please help expand our localizations</strong> if you know a language that isn't represented! You can copy and paste one of the files, and update the text for 'cancel' and 'choose', then submit a pull request at: <a href'https://github.com/bgrins/spectrum'>https://github.com/bgrins/spectrum</a>.
109.
</p>
110.
</div>
111.
112.
<input id="langdemo" />
113.
114.
<hr />
115.
<h2>Spectrum Colorpicker Sample Palettes</h2>
116.
<div class='alert'>
117.
118.
<p>
119.
NOTE: these palettes are also a work in progress. Ideally the site will eventually allow you to choose between a few options and download them.
120.
</p>
121.
122.
<p>
123.
The <code>newGmail</code> palette below is an example of customizing the palette size and layout with CSS.
124.
</p>
125.
126.
</div>
127.
<div id="palettes" class="example-container">
128.
129.
</div>
130.
131.
</div>
132.
133.
134.
<script type="text/javascript" src="../docs/prettify.js"></script>
135.
<script type="text/javascript">
136.
137.
var _gaq = _gaq || [];
138.
_gaq.push(['_setAccount', 'UA-8259845-4']);
139.
_gaq.push(['_trackPageview']);
140.
141.
(function() {
142.
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
143.
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
144.
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
145.
})();
146.
147.
</script>
148.
</body>
149.
</html>
150.