Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
tinyColorPicker/index.html

105 рядки
6.5 KiB
HTML

9 роки тому
<!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" />
9 роки тому
<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" />
9 роки тому
<link rel="stylesheet" type="text/css" href="index.css">
9 роки тому
<link rel="shortcut icon" type="image/x-icon" href="development/favicon.ico">
<link rel="icon" type="image/x-icon" href="development/favicon.ico">
9 роки тому
<!-- <link rel="stylesheet" type="text/css" href="development/colorPicker.css"> -->
<link rel="stylesheet" type="text/css" href="development/compatibility.css">
<!-- <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> -->
9 роки тому
<title>tiny jQuery color picker</title>
9 роки тому
</head>
<body>
9 роки тому
<div id="content-wrapper">
9 роки тому
<h1>Tiny jQuery colorPicker</h1>
<p>Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br>
8 роки тому
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>
9 роки тому
<a name="demo" id="demo" class="a-inline"></a>
9 роки тому
<h2>Demo</h2>
On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
9 роки тому
<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>
9 роки тому
<option value="memory">Color memory spaces</option>
9 роки тому
<option value="skinned">Skinned (white)</option>
<option value="skinned_sa">Skinned, selective alpha</option>
9 роки тому
<option value="dev_skinned">Skinned dev-tools like</option>
<option value="dev_skinned_rgb">Skinned, RGB sliders</option>
<option value="dev_skinned_hh">Skinned dev-tools 3:2</option>
9 роки тому
<option value="noalpha">Default without alpha</option>
9 роки тому
<option value="small">Default but smaller</option>
<option value="IE8">Better IE8- support</option>
9 роки тому
</select>
9 роки тому
(see index.html for more details...)
9 роки тому
</p>
<div class="input-toggles">
<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%)" />
</div>
<div class="div-toggles">
9 роки тому
<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>
<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>
<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>
9 роки тому
<h2>Features</h2>
<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>
9 роки тому
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({
buildCallback: function($elm) {
this.$colorPatch = $elm.prepend('&lt;div class="cp-disp">').find('.cp-disp');
9 роки тому
},
cssAddon:
9 роки тому
'.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;}',
9 роки тому
renderCallback: function($elm, toggled) {
var colors = this.color.colors;
9 роки тому
this.$colorPatch.css({
9 роки тому
backgroundColor: '#' + colors.HEX,
color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'
}).text(this.color.toString($elm._colorMode)); // $elm.val();
9 роки тому
}
});
</pre>
<h2>API and usage</h2>
9 роки тому
<p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicker on GitHub</a> for now.</p>
</div>
<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>
9 роки тому
9 роки тому
<script type="text/javascript" src="index.js"></script>
9 роки тому
</body>
</html>