Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
5 lars 1
<!doctype html>
2
<html>
3
 
4
    <head>
5
        <title>jQuery MiniColors</title>
6
        <meta charset="utf-8">
7
        <!-- jQuery -->
8
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
9
        <!-- Bootstrap 3 -->
10
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
11
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
12
        <!-- MiniColors -->
13
        <script src="jquery.minicolors.js"></script>
14
        <link rel="stylesheet" href="jquery.minicolors.css">
15
        <style>
16
            dl {
17
                margin: 20px 0;
18
            }
19
 
20
            dt {
21
                font-size: 120%;
22
            }
23
 
24
            dd {
25
                padding: 10px 20px 20px 20px;
26
            }
27
 
28
            dd:last-child {
29
                border-bottom: none;
30
            }
31
 
32
            code {
33
                color: black;
34
                border: none;
35
                background: rgba(128, 128, 128, .1);
36
            }
37
 
38
            pre {
39
                background: #f8f8f8;
40
                border: none;
41
                color: #333;
42
                padding: 20px;
43
            }
44
 
45
            h2 {
46
                margin-top: 50px;
47
            }
48
 
49
            h3 {
50
                color: #aaa;
51
            }
52
        </style>
53
        <script>
54
            $(document).ready(function()
55
            {
56
                $('.demo').each(function()
57
                {
58
                    //
59
                    // Dear reader, it's actually very easy to initialize MiniColors. For example:
60
                    //
61
                    //  $(selector).minicolors();
62
                    //
63
                    // The way I've done it below is just for the demo, so don't get confused
64
                    // by it. Also, data- attributes aren't supported at this time...they're
65
                    // only used for this demo.
66
                    //
67
                    $(this).minicolors(
68
                    {
69
                        control: $(this).attr('data-control') || 'hue',
70
                        defaultValue: $(this).attr('data-defaultValue') || '',
71
                        inline: $(this).attr('data-inline') === 'true',
72
                        letterCase: $(this).attr('data-letterCase') || 'lowercase',
73
                        opacity: $(this).attr('data-opacity'),
74
                        position: $(this).attr('data-position') || 'bottom left',
75
                        change: function(hex, opacity)
76
                        {
77
                            if (!hex) return;
78
                            if (opacity) hex += ', ' + opacity;
79
                            if (typeof console === 'object')
80
                            {
81
                                console.log(hex);
82
                            }
83
                        },
84
                        theme: 'bootstrap'
85
                    });
86
                });
87
            });
88
        </script>
89
    </head>
90
 
91
    <body>
92
        <div class="row" style="margin: 40px 40px;">
93
            <div class="col-12">
94
                <!-- Intro -->
95
                <div id="intro" class="jumbotron">
96
                    <h1>jQuery MiniColors 2.1</h1>
97
                    <p class="text-muted"> Now with Bootstrap 3 support! </p>
98
                    <p> A project by
99
                        <a href="http://www.abeautifulsite.net/">A Beautiful Site</a>, originally developed for
100
                        <a href="http://www.surrealcms.com/">Surreal CMS</a>. </p>
101
                </div>
102
                <!-- Contents -->
103
                <h2 id="contents">Contents</h2>
104
                <ul>
105
                    <li>
106
                        <a href="#download">Download</a>
107
                    </li>
108
                    <li>
109
                        <a href="#demos">Demos</a>
110
                    </li>
111
                    <li>
112
                        <a href="#api">API</a>
113
                        <ul>
114
                            <li>
115
                                <a href="#instantiation">Instantiation</a>
116
                            </li>
117
                            <li>
118
                                <a href="#settings">Settings</a>
119
                            </li>
120
                            <li>
121
                                <a href="#methods">Methods</a>
122
                            </li>
123
                            <li>
124
                                <a href="#events">Events</a>
125
                            </li>
126
                        </ul>
127
                    </li>
128
                    <li>
129
                        <a href="#license">License</a>
130
                    </li>
131
                </ul>
132
                <!-- Download -->
133
                <h2 id="download">Download</h2>
134
                <p> This project is on GitHub. Feel free to post bug reports, feature requests, and code improvements on the official project page. </p>
135
                <p>
136
                    <a href="https://github.com/claviska/jquery-minicolors" class="btn btn-success">Download on GitHub</a>
137
                </p>
138
                <!-- Demos -->
139
                <h2 id="demos">Demos</h2>
140
                <p> This is the main demo page, which uses
141
                    <a href="http://getbootstrap.com/">Bootstrap 3</a>, but this plugin works without Bootstrap as well. </p>
142
                <p>
143
                    <a href="without-bootstrap.html" class="btn btn-primary">View Demo Without Bootstrap</a>
144
                </p>
145
                <!-- Control types -->
146
                <h3>Control Types</h3>
147
                <div class="well">
148
                    <div class="row">
149
                        <div class="col-lg-4 col-sm-4 col-12">
150
                            <div class="form-group">
151
                                <label for="hue-demo">Hue (default)</label>
152
                                <input type="text" id="hue-demo" class="form-control demo" data-control="hue" value="#ff6161"> </div>
153
                            <div class="form-group">
154
                                <label for="saturation-demo">Saturation</label>
155
                                <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" value="#0088cc"> </div>
156
                        </div>
157
                        <div class="col-lg-4 col-sm-4 col-12">
158
                            <div class="form-group">
159
                                <label for="brightness-demo">Brightness</label>
160
                                <input type="text" id="brightness-demo" class="form-control demo" data-control="brightness" value="#00ffff"> </div>
161
                            <div class="form-group">
162
                                <label for="wheel-demo">Wheel</label>
163
                                <input type="text" id="wheel-demo" class="form-control demo" data-control="wheel" value="#ff99ee"> </div>
164
                        </div>
165
                    </div>
166
                </div>
167
                <!-- Input modes -->
168
                <h3>Input Modes</h3>
169
                <div class="well">
170
                    <div class="row">
171
                        <div class="col-lg-4 col-sm-4 col-12">
172
                            <div class="form-group">
173
                                <label for="text-field">Text field</label>
174
                                <br>
175
                                <input type="text" id="text-field" class="form-control demo" value="#70c24a"> </div>
176
                            <div class="form-group">
177
                                <label for="hidden-input">Hidden Input</label>
178
                                <br>
179
                                <input type="hidden" id="hidden-input" class="demo" value="#db913d"> </div>
180
                        </div>
181
                        <div class="col-lg-4 col-sm-4 col-12">
182
                            <div class="form-group">
183
                                <label for="inline">Inline</label>
184
                                <br>
185
                                <input type="text" id="inline" class="form-control demo" data-inline="true" value="#4fc8db"> </div>
186
                        </div>
187
                    </div>
188
                </div>
189
                <!-- Positions -->
190
                <h3>Positions</h3>
191
                <div class="well">
192
                    <p> Valid positions include <code>bottom left</code>, <code>bottom right</code>, <code>top
193
                    left</code>, and <code>top right</code>. </p>
194
                    <div class="row">
195
                        <div class="col-lg-4 col-sm-4 col-12">
196
                            <div class="form-group">
197
                                <label for="position-bottom-left">bottom left (default)</label>
198
                                <input type="text" id="position-bottom-left" class="form-control demo" data-position="bottom left" value="#0088cc"> </div>
199
                            <div class="form-group">
200
                                <label for="position-top-left">top left</label>
201
                                <input type="text" id="position-top-left" class="form-control demo" data-position="top left" value="#0088cc"> </div>
202
                        </div>
203
                        <div class="col-lg-4 col-sm-4 col-12">
204
                            <div class="form-group">
205
                                <label for="position-bottom-right">bottom right</label>
206
                                <input type="text" id="position-bottom-right" class="form-control demo" data-position="bottom right" value="#0088cc"> </div>
207
                            <div class="form-group">
208
                                <label for="position-top-right">top right</label>
209
                                <input type="text" id="position-top-right" class="form-control demo" data-position="top right" value="#0088cc"> </div>
210
                        </div>
211
                        <div class="col-lg-4 col-sm-4 col-12"> </div>
212
                    </div>
213
                </div>
214
                <!-- and more -->
215
                <h3>&hellip;and more!</h3>
216
                <div class="well">
217
                    <div class="row">
218
                        <div class="col-lg-4 col-sm-4 col-12">
219
                            <div class="form-group">
220
                                <label for="opacity">Opacity</label>
221
                                <br>
222
                                <input type="text" id="opacity" class="form-control demo" data-opacity=".5" value="#766fa8">
223
                                <span class="help-block"> Opacity can be assigned by including the <code>data-opacity</code> attribute or by setting the <code>opacity</code> option to <code>true</code>. </span>
224
                            </div>
225
                        </div>
226
                        <div class="col-lg-4 col-sm-4 col-12">
227
                            <div class="form-group">
228
                                <label for="default-value">Default Value</label>
229
                                <br>
230
                                <input type="text" id="default-value" class="form-control demo" data-defaultValue="#ff6600">
231
                                <span class="help-block"> This field has a default value assigned to it, so it will never be empty. </span>
232
                            </div>
233
                        </div>
234
                        <div class="col-lg-4 col-sm-4 col-12">
235
                            <div class="form-group">
236
                                <label for="letter-case">Letter Case</label>
237
                                <br>
238
                                <input type="text" id="letter-case" class="form-control demo" data-letterCase="uppercase" value="#abcdef">
239
                                <span class="help-block"> This field will always be uppercase. </span>
240
                            </div>
241
                        </div>
242
                    </div>
243
                    <div class="row">
244
                        <div class="col-lg-4 col-sm-4 col-12">
245
                            <div class="form-group">
246
                                <label for="input-group">Input Groups</label>
247
                                <div class="input-group">
248
                                    <input type="text" id="input-group" class="form-control demo" value="#ff0000" />
249
                                    <span class="input-group-btn">
250
                                        <button class="btn btn-default" type="button">Button</button>
251
                                    </span>
252
                                </div>
253
                                <span class="help-block"> Example using Bootstrap's input groups. </span>
254
                            </div>
255
                        </div>
256
                        <div class="col-lg-4 col-sm-4 col-12">
257
                            <div class="form-group">
258
                                <label for="more-input-group">More Input Groups</label>
259
                                <div class="input-group">
260
                                    <span class="input-group-addon">Color</span>
261
                                    <input type="text" id="more-input-group" class="form-control demo" value="#ff0000" />
262
                                    <span class="input-group-btn">
263
                                        <button class="btn btn-default" type="button">Button</button>
264
                                    </span>
265
                                </div>
266
                                <span class="help-block"> Input group example with addon. </span>
267
                            </div>
268
                        </div>
269
                    </div>
270
                </div>
271
                <!-- API -->
272
                <h2 id="api">API</h2>
273
                <!-- Instantiation -->
274
                <h3 id="instantiation">Instantiation</h3>
275
                <p> Instantiate like any other jQuery plugin: </p> <pre>$('INPUT.minicolors').minicolors(settings);</pre>
276
                <!-- Settings -->
277
                <h3 id="settings">Settings</h3>
278
                <p> Default settings are as follows: </p> <pre>
279
$.minicolors = {
280
    defaults: {
281
        animationSpeed: 50,
282
        animationEasing: 'swing',
283
        change: null,
284
        changeDelay: 0,
285
        control: 'hue',
286
        dataUris: true,
287
        defaultValue: '',
288
        hide: null,
289
        hideSpeed: 100,
290
        inline: false,
291
        letterCase: 'lowercase',
292
        opacity: false,
293
        position: 'bottom left',
294
        show: null,
295
        showSpeed: 100,
296
        theme: 'default'
297
    }
298
};
299
</pre>
300
                <p> For convenience, you can change default settings globally by assigning new values: </p> <pre>
301
$.minicolors.defaults.changeDelay = 200;
302
</pre>
303
                <p> To change multiple properties at once, use <code>$.extend()</code>: </p> <pre>
304
$.minicolors.defaults = $.extend($.minicolors.defaults, {
305
    changeDelay: 200,
306
    letterCase: 'uppercase',
307
    theme: 'bootstrap'
308
});
309
</pre>
310
                <p class="alert alert-warning">
311
                    <strong>Note:</strong> Changing default settings will
312
                    <em>not</em> affect controls that are already initialized. </p>
313
                <dl>
314
                    <dt>animationSpeed</dt>
315
                    <dd>
316
                        <p> The animation speed of the sliders when the user taps or clicks a new color. Set to <code>0</code> for no animation. </p>
317
                    </dd>
318
                    <dt>animationEasing</dt>
319
                    <dd>
320
                        <p> The easing to use when animating the sliders. </p>
321
                    </dd>
322
                    <dt>changeDelay</dt>
323
                    <dd>
324
                        <p> The time, in milliseconds, to defer the <code>change</code> event from firing while the user makes a selection. This is useful for preventing the <code>change</code> event from firing frequently as the user drags the color picker
325
                            around. </p>
326
                        <p> The default value is <code>0</code> (no delay). If your <code>change</code> callback features something resource-intensive (such as an AJAX request), you’ll probably want to set this to at least <code>200</code>. </p>
327
                    </dd>
328
                    <dt>control</dt>
329
                    <dd>
330
                        <p> Determines the type of control. Valid options are <code>hue</code>, <code>brightness</code>, <code>saturation</code>, and <code>wheel</code>. </p>
331
                    </dd>
332
                    <dt>dataUris</dt>
333
                    <dd>
334
                        <p> Set this to <code>false</code> if you require IE7/IE8 support. This setting will force the plugin to load an external image instead of using dataURIs. </p>
335
                    </dd>
336
                    <dt>defaultValue</dt>
337
                    <dd>
338
                        <p> To force a default color, set this to a valid hex string. When the user clears the control, it will revert to this color. </p>
339
                    </dd>
340
                    <dt>hideSpeed &amp; showSpeed</dt>
341
                    <dd>
342
                        <p> The speed at which to hide and show the color picker. </p>
343
                    </dd>
344
                    <dt>inline</dt>
345
                    <dd>
346
                        <p> Set to <code>true</code> to force the color picker to appear inline. </p>
347
                    </dd>
348
                    <dt>letterCase</dt>
349
                    <dd>
350
                        <p> Determines the letter case of the hex code value. Valid options are <code>uppercase</code> or <code>lowercase</code>. </p>
351
                    </dd>
352
                    <dt>opacity</dt>
353
                    <dd>
354
                        <p> Set to <code>true</code> to enable the opacity slider. (Use the input element's <code>data-opacity</code> attribute to set a preset value.) </p>
355
                    </dd>
356
                    <dt>position</dt>
357
                    <dd>
358
                        <p> Sets the position of the dropdown. Valid options are <code>bottom left</code>, <code>bottom right</code>, <code>top left</code>, and <code>top right</code>. </p>
359
                        <p class="alert alert-warning"> The <code>swatchPosition</code> setting has been removed in version 2.1. The position of the swatch is now determined by <code>position</code>. </p>
360
                    </dd>
361
                    <dt>theme</dt>
362
                    <dd>
363
                        <p> A string containing the name of the custom theme to be applied. In your CSS, prefix your selectors like this: </p> <pre>
364
.minicolors-theme-yourThemeName { ... }
365
</pre>
366
                        <p> If you are using the default theme, you will probably need to adjust the swatch styles depending on your existing stylesheet rules. Version 2.1 removes as much styling on the <code>input</code> element as possible, which means
367
                            it’s up to you to adjust your CSS to make sure the swatch aligns properly. </p>
368
                        <p> To adjust the swatch, override these styles: </p> <pre>
369
.minicolors-theme-default .minicolors-swatch {
370
    top: 5px;
371
    left: 5px;
372
    width: 18px;
373
    height: 18px;
374
}
375
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
376
    left: auto;
377
    right: 5px;
378
}
379
</pre> </div>
380
            </dd>
381
            </dl>
382
            <!-- Methods -->
383
            <h3 id="methods">Methods</h3>
384
            <p>Use this syntax for calling methods:</p> <pre>$(<em>selector</em>).minicolors('method', <em>[data]</em>);</pre>
385
            <dl>
386
                <dt>create</dt>
387
                <dd>
388
                    <p> Initializes the control for all items matching your selector. This is the default method, so <code>data</code> may be passed in as the only argument. </p>
389
                    <p> To set a preset color value, populate the <code>value</code> attribute of the original input element. </p>
390
                </dd>
391
                <dt>destroy</dt>
392
                <dd>
393
                    <p> Returns the
394
                        <em>input</em> element to its original, uninitialized state. </p>
395
                </dd>
396
                <dt>opacity</dt>
397
                <dd>
398
                    <p> Gets or sets a control's opacity level. To use this method as a setter, pass data in as a value between 0 and 1. (You can also obtain this value by checking the input element's <code>data-opacity</code> attribute.) </p>
399
                    <p> To set a preset opacity value, populate the <code>data-opacity</code> attribute of the original input element. </p>
400
                </dd>
401
                <dt>rgbObject</dt>
402
                <dd>
403
                    <p> Returns an object containing red, green, blue, and alpha properties that correspond to the control's current value. Example: </p> <pre>{ r: 0, g: 82, b: 148, a: 0.75 }</pre> </dd>
404
                <dt>rgbString &amp; rgbaString</dt>
405
                <dd>
406
                    <p> Returns an RGB or RGBA string suitable for use in your CSS. Examples: </p> <pre>
407
rgb(0, 82, 148)
408
rgba(0, 82, 148, .75)
409
</pre> </dd>
410
                <dt>settings</dt>
411
                <dd>
412
                    <p> Gets or sets a control's settings. If new settings are passed in, the control will destroy and re-initialize itself with any new settings overriding the old ones. </p>
413
                </dd>
414
                <dt>value</dt>
415
                <dd>
416
                    <p> Gets or sets a control's color value. To use this method as a setter, pass <code>data</code> in as a hex value. (You can also obtain this value by checking the input element's <code>value</code> attribute.) </p>
417
                </dd>
418
            </dl>
419
            <!-- Events -->
420
            <h3 id="events">Events</h3>
421
            <dl>
422
                <dt>change</dt>
423
                <dd>
424
                    <p>Fires when the value of the color picker changes. The <code>this</code> keyword will reference the original input element. <pre>
425
$(<em>selector</em>).minicolors({
426
    change: function(hex, opacity) {
427
        console.log(hex + ' - ' + opacity);
428
    }
429
});
430
</pre>
431
                        <p class="alert alert-warning">
432
                            <strong>Warning!</strong> This event will fire a lot when the user drags the color picker around. Use the <code>changeDelay</code> setting to reduce its frequency. </p>
433
                </dd>
434
                <dt>hide</dt>
435
                <dd>
436
                    <p> Fires when the color picker is hidden. The <code>this</code> keyword will reference the original input element. </p> <pre>
437
$(<em>selector</em>).minicolors({
438
    hide: function() {
439
    console.log('Hide event triggered!');
440
    }
441
});
442
</pre> </dd>
443
                <dt>show</dt>
444
                <dd>
445
                    <p> Fires when the color picker is shown. The <code>this</code> keyword will reference the original input element. </p> <pre>
446
$(<em>selector</em>).minicolors({
447
    show: function() {
448
        console.log('Show event triggered!');
449
    }
450
});
451
</pre> </dd>
452
            </dl>
453
            <h2 id="license">License</h2>
454
            <p> Licensed under the
455
                <a href="http://opensource.org/licenses/MIT">MIT license</a>, same as
456
                <a href="https://jquery.org/license/">jQuery</a>. </p>
457
            <p> &copy;2013
458
                <a href="http://www.abeautifulsite.net/">A Beautiful Site, LLC.</a>
459
            </p>
460
        </div>
461
        </div>
462
    </body>
463
 
464
</html>