Netsyms/tinyColorPicker
2
0
Fork 0
mirror of https://github.com/PitPik/tinyColorPicker synced 2025-07-17 15:04:28 -06:00
Code Issues Releases Wiki Activity

Added memory demo

Browse Source
This commit is contained in:
peterd 2015-02-02 17:08:58 +01:00
parent 0a86fef742
commit 034700e084
1 changed files with 49 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
index.html
View File

@ -20,10 +20,11 @@ On all inputs with calssName 'color': <pre>$('input.color').colorPicker();</pre>
<option value="desktop">Desktop (no plugin)</option> <option value="desktop">Desktop (no plugin)</option>
<option value="mobile">Mobile</option> <option value="mobile">Mobile</option>
<option value="input">Input fields</option> <option value="input">Input fields</option>
<option value="memory">Color memory spaces</option>
<option value="noalpha">Default without alpha</option> <option value="noalpha">Default without alpha</option>
<option value="small">Default but smaller</option> <option value="small">Default but smaller</option>
</select> </select>
(see index.js for more details...) (see index.html for more details...)
</p> </p>
<p> <p>
<input class="color" value="#B6BD79" /> <input class="color" value="#B6BD79" />
@ -174,6 +175,45 @@ window.myColorPicker = $('input.color').colorPicker({
} }
}; };
// shows memory fields
plugin.memory = {
customBG: '#222',
margin: '4px -2px',
opacity: false,
buidCallback: function($elm) {
var colorInstance = this.color,
colorPicker = this;
$elm.append('<div class="cp-memory">' +
'<div></div><div></div><div></div><div></div>' +
'<div></div><div></div><div></div><div class="cp-store">&lt;</div>').
on('click', '.cp-memory div', function(e) {
if (this.className) {
$(this).parent().prepend($(this).prev()).children().eq(0).
css('background-color', '#' + colorInstance.colors.HEX);
} else {
colorInstance.setColor($(this).css('background-color'));
colorPicker.render();
}
}).find('.cp-memory div').each(function() {
!this.className && $(this).css({background: 'rgb(' +
Math.round(Math.random() * 255) + ', ' +
Math.round(Math.random() * 255) + ', ' +
Math.round(Math.random() * 255) +
')'});
});
},
cssAddon: // could also be in a css file instead
'.cp-memory {margin-bottom:6px; clear:both;}' +
'.cp-memory div {float:left; width:17px; height:17px; margin-right:2px;' +
'background:rgba(0,0,0,1); text-align:center; line-height:17px;}' +
'.cp-memory .cp-store {width:21px; margin:0; background:none;' +
'border: 1px solid; border-color:#666 #222 #222 #666;' +
'box-sizing:border-box; font-weight:bold;}'
};
// the default; no extra stuff // the default; no extra stuff
plugin.desktop = { plugin.desktop = {
customBG: '#222', customBG: '#222',
@ -198,7 +238,7 @@ window.myColorPicker = $('input.color').colorPicker({
pluginSelect.value = type; pluginSelect.value = type || 'desktop';
pluginSelect.onchange = function(e) { pluginSelect.onchange = function(e) {
location = window.location; location = window.location;