This widget is a level up from MFColorPickerBasic and provides
The widget will hide original input
elements once initialised.
Usage is simple, and the class simply hides existing inputs with the class mfcolorpicker
and replaces them with a color button that when clicked on will show the color picker popup:
DEMO: Select a color using the MFColorPicker:
To implement you need to include the .js and .css files :
html
Then create a presets store if applicable
html
And your inputs:
html
(NOTE: As input type='color'
does not support rgba colors, they will be changed from type='color' to type='text' when a color is selected)
Then finally call the class to initialise thoe inputs
javascript
The class will trigger the original underlying element change
events on clicking on the button, and its input
events when colors are selected or hovered over from the popup.
Also see
articles/HTML-hex-color-codessquarearticles/Implementing-a-Monaco-Editorsquarearticles/iConnectionTestsquarearticles/javascript-camerasquarearticles/list-editsquarearticles/minifierssquarearticles/opayosquarearticles/table-drag-sortersquarearticles/typewatchsquareprojects/MFCalendarPopupsquareprojects/MFChartColumnsquareprojects/MFColorPickersquareprojects/MFColorPickerBasicsquareprojects/MFColumnDataBarsquareprojects/MFColumnGradientsquareprojects/MFCropCornerUIsquareprojects/MFFloatawayMsgsquareprojects/MFPanelssquareprojects/MFSelectorsquareprojects/MFShowConsolesquare
Comments
New Comment