Netsyms/tinyColorPicker
2
0
Fork 0
mirror of https://github.com/PitPik/tinyColorPicker synced 2025-07-02 23:54:29 -06:00
Code Issues Releases Wiki Activity

added IE support demo

Browse Source
This commit is contained in:
peterd 2015-02-06 17:07:37 +01:00
parent 9e8ee06d09
commit 625c024c94
4 changed files with 39 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
index.html
View File

@ -25,6 +25,7 @@ On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
<option value="dev_skinned">Skinned dev-tools like</option> <option value="dev_skinned">Skinned dev-tools like</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>
<option value="IE8">Better IE support</option>
</select> </select>
(see index.html for more details...) (see index.html for more details...)
</p> </p>
@ -261,6 +262,40 @@ window.myColorPicker = $('input.color').colorPicker({
'.cp-xy-slider:active {cursor:none;}' '.cp-xy-slider:active {cursor:none;}'
}; };
// better IE support
plugin.IE8 = {
customBG: '#222',
margin: '4px -2px',
doRender: 'div div',
// this demo adds divs with gradiends,... you could simply load an image as well
buidCallback: function($elm) {
var that = this;
$elm.find('.cp-z-slider').prepend(
'<div class="cp-r-rb"></div>' +
'<div class="cp-rb-b"></div>' +
'<div class="cp-b-bg"></div>' +
'<div class="cp-bg-g"></div>' +
'<div class="cp-g-gr"></div>' +
'<div class="cp-gr-r"></div>'
);
},
cssAddon: // could also be in a css file instead
'.cp-r-rb{filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#ff0000\', endColorstr=\'#ff00ff\',GradientType=0 ); height:21px; width: 100%;}' +
'.cp-rb-b{filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#FF00FF\', endColorstr=\'#0000FF\',GradientType=0 ); height:21px; width: 100%;}' +
'.cp-b-bg{filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#0000FF\', endColorstr=\'#00FFFF\',GradientType=0 ); height:22px; width: 100%;}' +
'.cp-bg-g{filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#00FFFF\', endColorstr=\'#00FF00\',GradientType=0 ); height:21px; width: 100%;}' +
'.cp-g-gr{filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#00FF00\', endColorstr=\'#FFFF00\',GradientType=0 ); height:21px; width: 100%;}' +
'.cp-gr-r{filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#FFFF00\', endColorstr=\'#FF0000\',GradientType=0 ); height:22px; width: 100%;}' +
'.cp-z-cursor{top:0}' +
'.cp-xy-slider:active {cursor:none;}',
renderCallback: function($elm, toggled) {
// to avoid selection
window.event && (window.event.returnValue = false);
}
};
// the default skinned and white // the default skinned and white
plugin.skinned = { plugin.skinned = {

2
jqColorPicker.js
View File

@ -261,7 +261,7 @@
if (!_colorPicker) { // we only want one single instance... if (!_colorPicker) { // we only want one single instance...
_colorPicker = new ColorPicker(options); _colorPicker = new ColorPicker(options);
$document.on('touchstart mousedown pointerdown', function(e) { $(document.body).on('touchstart mousedown pointerdown', function(e) {
var $target = $(e.target); var $target = $(e.target);
if ($.inArray($target.closest($that.selector)[0], if ($.inArray($target.closest($that.selector)[0],

2
jqColorPicker.js.map
View File

File diff suppressed because one or more lines are too long

4
jqColorPicker.min.js vendored
View File

File diff suppressed because one or more lines are too long