Netsyms/tinyColorPicker
2
0
Fork 0
mirror of https://github.com/PitPik/tinyColorPicker synced 2025-06-27 13:11:01 -06:00
Code Issues Releases Wiki Activity

More API description

Browse Source
This commit is contained in:
peterd 2015-02-06 12:34:26 +01:00
parent 2b82ce7062
commit df5102cce9
4 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -36,12 +36,12 @@ ColorPicker({
GPU: true, // use transform: translate3d
doRender: true, // manipulate color ans bgColor of input field
opacity: true, // enable / disable alpha slider
renderCallback: function($elm, toggled) {}, // this === instance
buidCallback: function($elm) {}, // this === instance
renderCallback: function($elm, toggled) {}, // this === instance; $elm: the input field;toggle === true -> just appeared; false -> opposite; else -> is rendering on pointer move
buidCallback: function($elm) {}, // this === instance; $elm: the UI
css: '', // replaces existing css
cssAddon: '', // adds cdd to existing
margin: '', // positioning margin
preventFocus: false // prevent default on focus of input fields
cssAddon: '', // adds css to existing
margin: '', // positioning margin (can also be set in cssAddon)
preventFocus: false // prevents default on focus of input fields
});
```

BIN
development/qr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

5
index.css
View File

@ -79,4 +79,7 @@ pre {
border: 1px solid #666;
border-color: #666 #ccc #ccc #666;
background: #aaa;
}
}
.cp-xy-slider:active { /* general */
cursor:none;
}

10
index.html
View File

@ -37,7 +37,7 @@ On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
<div class="color trigger" value="#556B2F"><div><div></div></div></div>
<div class="color trigger" value="rgb(100, 86, 70)"><div><div></div></div></div>
<div class="color trigger" value="hsla(167, 29%, 68%, 0.8)"><div><div></div></div></div>
</div>
<img id="qr" style="float: right; display: block; display: none;" src="./development/qr.png" alt="QR code for http://www.dematte.at/tinyColorPicker/?type=mobile#demo"></div>
<h2>Features</h2>
<p>Tiny jQuery colorPicker only loads if triggered to show. It uses battery saving technologies and super fast rendering for best performance on desktop and mobile browsers.<br>
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>
@ -73,9 +73,9 @@ window.myColorPicker = $('input.color').colorPicker({
<p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicke on GitHub</a> for now.</p>
<!-- <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> -->
<!-- <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>
<script type="text/javascript">
(function(window, undefined){
'use strict';
@ -496,6 +496,8 @@ window.myColorPicker = $('input.color').colorPicker({
window.location = './?type=' + this.value + '#demo'
});
type === 'mobile' && $('#qr').show();
window.myColorPicker = $('.color').colorPicker(
plugin[type] || plugin.desktop
);