This repository has been archived by the owner on Nov 27, 2018. It is now read-only.
/
demo.html
99 lines (71 loc) · 3.77 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Really Simple Color Picker</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery.colorPicker.js"/></script>
<script type="text/javascript">
//Run the code when document ready
$(function() {
//use this method to add new colors to pallete
//$.fn.colorPicker.addColors(['000', '000', 'fff', 'fff']);
$('#color1').colorPicker();
$('#color2').colorPicker();
$('#color3').colorPicker({pickerDefault: "ffffff", colors: ["ffffff", "000000", "111FFF", "C0C0C0", "FFF000"], transparency: true});
$('#color4').colorPicker();
$('#color5').colorPicker({showHexField: false});
//fires an event when the color is changed
//$('#color1').change(function(){
//alert("color changed");
//});
$("#button1").click(function(){
$("#color1").val("#ffffff");
$("#color1").change();
});
$("#button2").click(function(){
$("#color2").val("#000000");
$("#color2").change();
});
});
</script>
<style type="text/css">
/* styles adopted from Nidahas - Forms markup and CSS (http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/) */
/* General styles */
body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }
/* Form styles */
div.form-container { margin: 10px; padding: 5px; background-color: #FFF; }
p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }
div.form-container div.controlset {display: block; float:left; width: 100%; padding: 0.25em 0;}
div.form-container div.controlset label,
div.form-container div.controlset input,
div.form-container div.controlset div { display: inline; float: left; }
div.form-container div.controlset label { width: 200px;}
</style>
<link rel="stylesheet" href="./css/colorPicker.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<h2>Really Simple Color Picker (jQuery)</h2>
<p>More information about this can be found in <a href="http://laktek.com/2008/10/27/really-simple-color-picker-in-jquery/" title="Really Simple Color Picker in jQuery">this blog article</a>.</p>
<div class="form-container">
<form action="#" method="post">
<fieldset>
<div class="controlset"><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div>
<div class="controlset"><label for="color2">Color 2</label> <input id="color2" type="text" name="color2" value="#FF0000" /></div>
<div class="controlset"><label for="color3">Color 3 (with custom colors)</label> <input id="color3" type="text" name="color3" value="#99cc00" /></div>
<div class="controlset"><label for="color4">Color 4 (with text in box)</label> <input id="color4" type="text" name="color4" value="#FF0000" data-text="AG" /></div>
<div class="controlset"><label for="color5">Color 5 (without hex field)</label> <input id="color5" type="text" name="color5" value="#FF00FF" /></div>
</fieldset>
<div class="buttonrow">
<div><button type="button" id="button1">Set Color 1 to #FFF</button></div>
<div><button type="button" id="button2">Set Color 2 to #000</button></div>
</div>
</form>
</div>
</body>
</html>