| MFColorPickerBasic / 1.0 / demo / mf-colorpicker-demo.html file last updated : 2024-03-02 |
|---|
<!-- methodfish package release
Project : MFColorPicker
Release : 1.0
Release date : 2024-03-02 18:07:53
License : MIT
For more information please refer to https://methodfish.com/Projects/MFColorPicker
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Methodfish Color Picker demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="icon" type="image/png" href="https://methodfish.com/images/methodfish.ico">
<link rel="stylesheet preload prefetch" as="style" href="https://fonts.googleapis.com/icon?family=Material+Icons|Roboto">
<script src="../js/mf-colorpicker.js"></script>
<link rel='stylesheet preload prefetch' as='style' href='https://methodfish.com/Download/MFFloatawayMsg/files/latest/css/mf-floataway-msg.css'>
<script src='https://methodfish.com/Download/MFFloatawayMsg/files/latest/js/mf-floataway-msg.js'></script>
<style>
* {
font-family:Roboto;
line-height:1.7em;
}
.mfcolor {
margin-bottom:10px;
cursor:pointer;
}
code {
display:block;
white-space:pre-wrap;
font-family:Courier New;
font-size:90%;
background-color:lightgrey;
padding:10px;
margin:10px;
}
</style>
</head>
<body>
<input type="hidden" id="mfpresets" value="ffffff,000000,ff0000,00ff00,0000ff">
<datalist id="basiclist">
<option>#ffffff</option>
<option>#000000</option>
<option>#ff0000</option>
<option>#00ff00</option>
<option>#0000ff</option>
</datalist>
<h1>MF-ColorPicker javascript package</h1>
<BR>Standard HTML (no styling, no list): <input type="color" onchange="addFloatawayMsg('set to '+this.value, 'T')">
<BR>Standard HTML (with some styling + no list): <input type="color" style='background:white; width:25px' onchange="addFloatawayMsg('set to '+this.value, 'T')">
<BR>Standard HTML (with list): <input type="color" list="basiclist" onchange="addFloatawayMsg('set to '+this.value,'B')">
<hr>
<BR>MF-ColorPicker (with list): <input type="color" class="mfcolorpicker" onchange="addFloatawayMsg('set to '+this.value, 'T')">
<BR>MF-ColorPicker (with list): <input type="color" class="mfcolorpicker" onchange="addFloatawayMsg('set to '+this.value, 'T')">
<BR>MF-ColorPicker (with list and a width of 54px to square off): <input type="color" class="mfcolorpicker" style='width:54px' onchange="addFloatawayMsg('set to '+this.value, 'T')">
<BR>MF-ColorPicker (with list and styling): <input type="color" class="mfcolorpicker" style='background:white;' onchange="addFloatawayMsg('set to '+this.value, 'T')"></span>
<p>
The standard Windows color picker is a little basic and I believe has a user experience issue in the lack
of an OK button on color selection; this class will enhance the basic color input by adding in that missing
tick/OK, and also maintains the color selection defaults, adding the latest selected color to the front of the defaults
</p>
<p>
To implement you need to include the .js file in order to initalize existing inputs<code>const _mfcolorpicker = new MFColorPicker();
_mfcolorpicker.init('mfpresets');</code>
</p>
<p>By default, the class will assume material-icons is your chosen tick font, but if you want to change
this then change the init call using the second and third arguments (class, value)
<code>const _mfcolorpicker = new MFColorPicker();
_mfcolorpicker.init('mfpresets', 'fa-solid fa-check', '');</code>
</p>
<p>
Note, it would be good to add a cross, but this is not possible as the selector is a modal popup.
</p>
<p>
This class requires material-icons to have the tick work.
</p>
<code>
<link rel="stylesheet preload prefetch" as="style" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<input type="hidden" id="mfpresets" value="ffffff,000000,ff0000,00f000,0000ff">
<input type="color" class="mfcolor" onchange="alert()">
<script>
new MFColorPicker().init('mfpresets');
</script>
</code>
<script>
window.addEventListener('load', function() {
new MFColorPicker().init('mfpresets', 'material-icons', 'done');
});
</script>
</body>
</html>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/MFColumnGradientsquareprojects/MFFloatawayMsgsquareprojects/MFPanelssquareprojects/MFSelectorsquare
Comments
New Comment