forked from bvaughn/jqolor
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
executable file
·166 lines (139 loc) · 4.44 KB
/
example.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<html>
<head>
<title>jQolor: JavaScript Color Picker</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/jqolor.css" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}
a.bold {
font-weight: bold;
}
h2 {
font-size: 180%;
}
#jqolor-logo-container {
display: inline-block;
width: 322px;
background-color: #1C72B5;
-moz-border-radius: 20px;
border-radius: 20px;
}
#jqolor-logo-container img {
height: 100px;
width: auto;
}
.container {
margin-bottom: 25px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript" src="javascript/jquery.virtual-events.js"></script>
<script type="text/javascript" src="javascript/jqolor.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
function onColorChange( event, data ) {
// data keys: hex, red, green, blue, hue, saturation, brightness
$('#jqolor-logo-container').css( 'background-color', data.hex );
logo = $('#jqolor-logo');
if ( data.brightness > 80 && logo.attr( 'src' ) != 'images/jqolor-logo-inverted.png' ) {
logo.attr( 'src', 'images/jqolor-logo-inverted.png' );
} else if ( data.brightness <= 80 && logo.attr( 'src' ) != 'images/jqolor-logo.png' ) {
logo.attr( 'src', 'images/jqolor-logo.png' );
}
}
$('#jqolor-simple-example').jQolor();
var jQolorEventHandlingExample =
$('#jqolor-event-handling-example').jQolor(
{
color : '1C72B5',
colorChange : onColorChange
} );
} );
</script>
</head>
<body>
<div class="container">
<h1>
jQolor
<small>
JavaScript color picker
</small>
</h1>
<p>
Written by <a href="http://www.briandavidvaughn.com">Brian Vaughn</a>
</p>
<h2>Using jQolor in a Form</h2>
<p>
To use jQolor in a <code>form</code> you simply need to assign a text-input as a color picker:
<pre class="prettyprint"><input id="my-color-picker" name="my-color-picker" />
<script type="text/javascript">
$('#my-color-picker').jQolor();
</script></pre>
</p>
<p>
The above code will create a jQolor selector like this:
</p>
<p>
<input id="jqolor-simple-example" name="jqolor-simple-example" />
</p>
<p>
The user-selected color will be passed to the form-handler as a HEX string on form-submit.
</p>
<h2>Handling jQolor Events</h2>
<p>
You can also attach an event-handler to a jQolor picker:
<pre class="prettyprint"><input id="my-color-picker" name="my-color-picker" />
<script type="text/javascript">
$('#my-color-picker').jQolor(
{
color : '1C72B5', // Default color value
colorChange : function( event, data ) {
// data keys: hex, red, green, blue, hue, saturation, brightness
}
} );
</script></pre>
</p>
<p>
This color picker has an event handler that modifies the graphic above it.
To do this it uses the <code>data</code> object's "hex" property.
</p>
<p>
<div id="jqolor-logo-container">
<img id="jqolor-logo" src="images/jqolor-logo.png" />
</div>
</p>
<p>
<input id="jqolor-event-handling-example" name="jqolor-event-handling-example" />
</p>
<h2>How to Use jQolor</h2>
<ol>
<li>
jQolor is built on top of
<a class="bold" href="http://jquery.com/">jQuery <small>(1.9.1)</small></a> and
<a class="bold" href="http://twitter.github.com/bootstrap/">Bootstrap</a>
so both of those libraries must be loaded before jQolor.
<li>
Next define one or more text-type inputs to become color pickers.
</li>
<li>
Lastly, once the document has loaded, jQolor can be initialized by telling it which text inputs to decorate.
</li>
</ol>
<h2>Where to get jQolor</h2>
<p>
jQolor is available on Github under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache license</a>.
You can download it from <a href="https://github.com/bvaughn/jqolor">Github</a> directly or from the
<a href="http://plugins.jquery.com/jqolor/">jQuery plug-ins site</a>.
</p>
<p>
Please feel free to contact me on Github with questions, comments, or suggestions.
</p>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=html&skin=sunburst"></script>
</div>
</body>
</html>