Initial import.

rachel-carvalho · Oct 19, 2010 · 9f07f51 · 9f07f51
commit 9f07f51
Show file tree

Hide file tree

Showing 4 changed files with 312 additions and 0 deletions.
diff --git a/example.html b/example.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head runat="server">
+    <title>simpleColorPicker example</title>
+	<link type="text/css" href="jquery.simple-color-picker.css" rel="stylesheet" />
+	<style type="text/css">
+		body { font-family: sans-serif; font-size: 12px; }
+		h1 { font-size: 16px; margin: 10px 0px; }
+		h2 { font-size: 14px; margin: 10px 0px; }
+		h3 { font-size: 12px; margin: 5px 0px; }
+		ul { list-style-type: none; padding: 0px; margin: 0px 10px; }
+		p { margin: 10px 0px; }
+		label { display: block; }
+		input#color { width: 150px; }
+		pre { font-family: monospace; display: block; margin: 5px; }
+	</style>
+    <script type="text/javascript" src="jquery-1.4.3.min.js"></script>
+    <script type="text/javascript" src="jquery.simple-color-picker.js"></script>
+    <script type="text/javascript">
+        $(document).ready(function() {
+            $('input#color').simpleColorPicker();
+            $('input#color2').simpleColorPicker({ colorsPerLine: 16 });
+			var colors = ['#000000', '#444444', '#666666', '#999999', '#cccccc', '#eeeeee', '#f3f3f3', '#ffffff'];
+            $('input#color3').simpleColorPicker({ colors: colors });
+        });
+    </script>
+</head>
+<body>
+	<h1>simpleColorPicker example</h1>
+
+	<p>Just attach the simpleColorPicker to an input text and, as it gains focus, the color palette appears aligned to its bottom right corner.</p>
+
+	<h2>Live samples</h2>
+	<ul>
+		<li>
+			<h3>Default options</h3>
+
+			<label for="color">Choose a color:</label>
+			<input type="text" id="color" name="color" />
+
+			<pre>
+$(document).ready(function() {
+    $('input#color').simpleColorPicker();
+});
+			</pre>
+		</li>
+		<li>
+			<h3>More colors per line</h3>
+
+			<label for="color2">Choose a color:</label>
+			<input type="text" id="color2" name="color2" />
+
+			<pre>
+$(document).ready(function() {
+    $('input#color2').simpleColorPicker({ colorsPerLine: 16 });
+});
+			</pre>
+		</li>
+		<li>
+			<h3>Different colors</h3>
+
+			<label for="color3">Choose a color:</label>
+			<input type="text" id="color3" name="color3" />
+
+			<pre>
+$(document).ready(function() {
+    var colors = ['#000000', '#444444', '#666666', '#999999', '#cccccc', '#eeeeee', '#f3f3f3', '#ffffff'];
+    $('input#color3').simpleColorPicker({ colors: colors });
+});
+			</pre>
+		</li>
+	</ul>
+</body>
+</html>