The color picker support for N2 is enforced using a new attribute [EditableColorPickerAttribute]. It has a number of useful features such as quick-and-easy installation and great cross-browser compatibility. The add-on doesn’t use pop-up windows, and is based on jscolor - a simple & user-friendly colour picker. Additional benefits of the Color Picker are that no framework (jQuery, MooTools, YUI, Dojo etc) is needed and it is appearance and behaviour are customisable.
The EditableColorPickerAttribute supports 3 boolean properties: hashSymbol, requiredValue and caps:
- hashSymbol - adds ‘#’ symbol, default value is false
- requiredValue - determines if the field can be left blank, default value is false
- caps – allows you to use lowercase or uppercase, default value is true
To use simply, grab the Colour Picker here, unrar it to 'siteroot\addons\' folder and add a reference to ColorPickerAddon.dll. Mark any string property of your page class in the following ways:
[EditableColorPicker("Color", 6)], [EditableColorPicker("Color", 6, ContainerName = Tabs.Content, ....)]; [EditableColorPicker("Color", 6, true)] – add '#' symbol; [EditableColorPicker("Color", 6, true, true)] – autofill field; [EditableColorPicker("Color", 6, true, true, false)] – add lowercase;
Color Picker is available for download at http://n2cms.com/add-ons/Color-Picker.aspx
Have fun using it!