This uses the Really Simple Color Picker in jQuery:
http://www.web2media.net/laktek/2008/10/27/really-simple-color-picker-in-jquery/
Get source from there or GitHub:
http://github.com/laktek/really-simple-color-picker/tree/master
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | # =============================================================================
# yourapp/widgets.py
# =============================================================================
from django import forms
from django.conf import settings
from django.utils.safestring import mark_safe
class ColorPickerWidget(forms.TextInput):
class Media:
css = {
'all': (
settings.MEDIA_URL + 'cssjs/colorPicker.css',
)
}
js = (
'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js',
settings.MEDIA_URL + 'cssjs/jquery.colorPicker.js',
)
def __init__(self, language=None, attrs=None):
self.language = language or settings.LANGUAGE_CODE[:2]
super(ColorPickerWidget, self).__init__(attrs=attrs)
def render(self, name, value, attrs=None):
rendered = super(ColorPickerWidget, self).render(name, value, attrs)
return rendered + mark_safe(u'''<script type="text/javascript">
$('#id_%s').colorPicker();
</script>''' % name)
# =============================================================================
# yourapp/models.py
# =============================================================================
from yourapp.widgets import ColorPickerWidget
class ColorField(models.CharField):
def __init__(self, *args, **kwargs):
kwargs['max_length'] = 10
super(ColorField, self).__init__(*args, **kwargs)
def formfield(self, **kwargs):
kwargs['widget'] = ColorPickerWidget
return super(ColorField, self).formfield(**kwargs)
class YourModel(models.Model):
# ...
font_color = ColorField(blank=True)
# ...
# =============================================================================
# static/cssjs/colorPicker.css
# =============================================================================
/*
see: http://github.com/laktek/really-simple-color-picker/tree/master/colorPicker.css
To render nicely in the Django admin I added these lines to the bottom:
*/
.form-row div .color_picker {
float:left;
}
|
More like this
- Template tag - list punctuation for a list of items by shapiromatron 10 months, 3 weeks ago
- JSONRequestMiddleware adds a .json() method to your HttpRequests by cdcarter 11 months ago
- Serializer factory with Django Rest Framework by julio 1 year, 5 months ago
- Image compression before saving the new model / work with JPG, PNG by Schleidens 1 year, 6 months ago
- Help text hyperlinks by sa2812 1 year, 7 months ago
Comments
Related: django-colorful
#
8 years since this was posted, and I just used it. Works perfectly, thanks!
#
Just an update for the css hack, the class selector should be :
#
.form-row div .colorPicker-picker
instead of.form-row div .color_picker
#
Please login first before commenting.