Netsyms
/
tinyColorPicker
kopie van https://github.com/PitPik/tinyColorPicker
2
0
Vork 0
Code Kwesties Publicaties Wiki Activiteit
Je kunt niet meer dan 25 onderwerpen selecteren Onderwerpen moeten beginnen met een letter of nummer, kunnen streepjes bevatten ('-') en kunnen maximaal 35 tekens lang zijn.
master
1.1.1
1.1.0
1.0.7
1.0.6
1.0.5
1.0.4
1.0.3
1.0.2
1.0.1
Branches Labels
${ item.name }
Create tag ${ searchTerm }
Maak branch ${ searchTerm }
van 'master'
${ noResults }
tinyColorPicker/index.html

105 regels
6.5 KiB
HTML
Ruw Permalink Normale weergave Geschiedenis Onescape Escape

Initial commit
9 jaren geleden
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
added event option
9 jaren geleden
<meta name="Description" content="tiny ColorPicker is a small (10.0KB, 4.5KB gZip) but very advanced jQuery color picker and color conversion / calculation tool that supports the following color spaces: rgb, hsv, hsl, hex, but also alpha, WCAG 2.0 readability standards (based on opacity levels of all layers), contrast, color similarity, grayscale, 2-layer or 3-layer overlap mix, etc..." />
<meta name="Keywords" content="ColorPicker, color picker, color chooser, color, picker, javaScript, jquery, colors, rgb, hsv, hsl, hex, alpha, WCAG 2.0, grayscale, contrast, readability, realtime, retina, high resolution" />
<meta name="author" content="Peter Dematté" />
<meta http-equiv="language" content="en" />
Initial commit
9 jaren geleden
<link rel="stylesheet" type="text/css" href="index.css">
Added small height demo
9 jaren geleden
<link rel="shortcut icon" type="image/x-icon" href="development/favicon.ico">
<link rel="icon" type="image/x-icon" href="development/favicon.ico">
Initial commit
9 jaren geleden
<!-- <link rel="stylesheet" type="text/css" href="development/colorPicker.css"> -->
<link rel="stylesheet" type="text/css" href="development/compatibility.css">
new method toString / optimization Added method ‚toString‘ to colors.js; Converts color to HTML-string with auto or forced alpha. Some minor optimizations.
8 jaren geleden
<!-- <script type="text/javascript" src="jquery-1.11.2.js"></script> -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="colors.js"></script>
<script type="text/javascript" src="jqColorPicker.js"></script>
<!-- <script type="text/javascript" src="jqColorPicker.min.js"></script> -->
Added small height demo
9 jaren geleden
<title>tiny jQuery color picker</title>
Initial commit
9 jaren geleden
</head>
<body>
added event option
9 jaren geleden
<div id="content-wrapper">
Initial commit
9 jaren geleden
<h1>Tiny jQuery colorPicker</h1>
<p>Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br>
Minor updates
8 jaren geleden
This <strong>5.07KB</strong> (gZip; 11.39KB minified) small HSB color picker is based on a subset of <a href="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <a href="http://dematte.at/colorPicker/">colorPicker</a>, supports all modern features like touch and MS pointer, GPU accelerated rendering, battery friendly requestAnimationFrame and provides a lot of hooks for developers to write plugins (See demo plugins below in <a href="#demo">Demo</a>).</p>
added event option
9 jaren geleden
<a name="demo" id="demo" class="a-inline"></a>
Initial commit
9 jaren geleden
<h2>Demo</h2>
added support for triggering nested elements (Nested) elements besides input fields can now also be used for triggering the colorPicker
9 jaren geleden
On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
Initial commit
9 jaren geleden
<p>Switch between plugins:
<select id="pluginSelect">
<option value="desktop">Desktop (no plugin)</option>
<option value="mobile">Mobile</option>
<option value="input">Input fields</option>
Added memory demo
9 jaren geleden
<option value="memory">Color memory spaces</option>
Added skinning demo
9 jaren geleden
<option value="skinned">Skinned (white)</option>
New demo; enriched model $UI now in instance model; added selective alpha demo
9 jaren geleden
<option value="skinned_sa">Skinned, selective alpha</option>
new RGB slider demo
9 jaren geleden
<option value="dev_skinned">Skinned dev-tools like</option>
<option value="dev_skinned_rgb">Skinned, RGB sliders</option>
Added 'stay inside view-port' functionality
9 jaren geleden
<option value="dev_skinned_hh">Skinned dev-tools 3:2</option>
Initial commit
9 jaren geleden
<option value="noalpha">Default without alpha</option>
added 'smaller' demo
9 jaren geleden
<option value="small">Default but smaller</option>
better preventFocus support (for mobile)
9 jaren geleden
<option value="IE8">Better IE8- support</option>
Initial commit
9 jaren geleden
</select>
Added memory demo
9 jaren geleden
(see index.html for more details...)
Initial commit
9 jaren geleden
</p>
added support for triggering nested elements (Nested) elements besides input fields can now also be used for triggering the colorPicker
9 jaren geleden
<div class="input-toggles">
New demo; enriched model $UI now in instance model; added selective alpha demo
9 jaren geleden
<input class="color no-alpha" value="#B6BD79" />
<input class="color no-alpha" value="rgb(162, 63, 3)" />
<input class="color no-alpha" value="hsl(32, 95%, 23%)" />
added support for triggering nested elements (Nested) elements besides input fields can now also be used for triggering the colorPicker
9 jaren geleden
</div>
<div class="div-toggles">
Multiple instance support
9 jaren geleden
<div class="trigger" value="#556B2F"><div><div></div></div></div>
<div class="trigger" value="rgb(100, 86, 70)"><div><div></div></div></div>
<div class="trigger" value="hsla(167, 29%, 68%, 0.8)"><div><div></div></div></div>
new method toString / optimization Added method ‚toString‘ to colors.js; Converts color to HTML-string with auto or forced alpha. Some minor optimizations.
8 jaren geleden
<img id="qr" style="float: right; display: block; display: none; margin-right: -200px;" src="./development/qr.png" alt="QR code for http://www.dematte.at/tinyColorPicker/?type=mobile#demo">
</div>
better preventFocus support (for mobile)
9 jaren geleden
<h2>Usage</h2>
<p>There is only one file you need to load... No images and no CSS required.</p>
<pre style="display: block; overflow: auto;">
&lt;script type="text/javascript" src="jqColorPicker.min.js">
&lt;script type="text/javascript">
$('.color').colorPicker(); // that's it
&lt;/script>
</pre>
Initial commit
9 jaren geleden
<h2>Features</h2>
Added 'stay inside view-port' functionality
9 jaren geleden
<p>Tiny jQuery colorPicker only loads into memory if triggered to show and auto repositiones inside view-port if it doesn't fit. It uses battery saving technologies, super fast rendering for best performance on desktop and mobile browsers and renders perfectly smooth on retina and high resolution displays.<br>
Initial commit
9 jaren geleden
This colorPicker is very flexible to modify and customize and there is an easy way to write plugins to extend functionality, look and feel...<br>
As Tiny jQuery colorPicker uses <a href="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <a href="http://dematte.at/colorPicker/">colorPicker</a>, it provides a clean and rich color model and API that enables flexible extending for programmers. (See <a href="https://github.com/PitPik/colorPicker">colorPicker on GitHub</a> for more details)</p>
<p>The following snipped shows how easy it is to make plugins: use for mobile</p>
<pre style="display: block; overflow: auto;">
window.myColorPicker = $('input.color').colorPicker({
Typo fix buidCallback -> buildCallback
9 jaren geleden
buildCallback: function($elm) {
Minor updates - minor optimizations - added options ‘dark’ and ‘light’
8 jaren geleden
this.$colorPatch = $elm.prepend('&lt;div class="cp-disp">').find('.cp-disp');
Initial commit
9 jaren geleden
},
cssAddon:
Added memory demo
9 jaren geleden
'.cp-disp {padding:10px; margin-bottom:6px; font-size:19px; height:20px; line-height:20px}' +
'.cp-xy-slider {width:200px; height:200px;}' +
'.cp-xy-cursor {width:16px; height:16px; border-width:2px; margin:-8px}' +
'.cp-z-slider {height:200px; width:40px;}' +
'.cp-z-cursor {border-width:8px; margin-top:-8px;}' +
'.cp-alpha {height:40px;}' +
'.cp-alpha-cursor {border-width:8px; margin-left:-8px;}',
Initial commit
9 jaren geleden
renderCallback: function($elm, toggled) {
new method toString / optimization Added method ‚toString‘ to colors.js; Converts color to HTML-string with auto or forced alpha. Some minor optimizations.
8 jaren geleden
var colors = this.color.colors;
Initial commit
9 jaren geleden
Minor updates - minor optimizations - added options ‘dark’ and ‘light’
8 jaren geleden
this.$colorPatch.css({
Initial commit
9 jaren geleden
backgroundColor: '#' + colors.HEX,
color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'
Minor updates - minor optimizations - added options ‘dark’ and ‘light’
8 jaren geleden
}).text(this.color.toString($elm._colorMode)); // $elm.val();
Initial commit
9 jaren geleden
}
});
</pre>
<h2>API and usage</h2>
added event option
9 jaren geleden
<p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicker on GitHub</a> for now.</p>
</div>
new method toString / optimization Added method ‚toString‘ to colors.js; Converts color to HTML-string with auto or forced alpha. Some minor optimizations.
8 jaren geleden
<a class="a-inline" href="https://github.com/PitPik/tinyColorPicker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="development/fmog.png" alt="Fork me on GitHub"></a>
Added small height demo
9 jaren geleden
externalize demos
9 jaren geleden
<script type="text/javascript" src="index.js"></script>
new method toString / optimization Added method ‚toString‘ to colors.js; Converts color to HTML-string with auto or forced alpha. Some minor optimizations.
8 jaren geleden
Initial commit
9 jaren geleden
</body>
</html>