颜色选择插件jscolor
<!DOCTYPE html>
<html lang="en">
<head>
<title>jscolor Examples</title>
<style>
body { padding: 30px 60px 30px; }
h2, footer { margin: 200px 0 20px; }
footer h2 { margin: 30px 0 15px; }
</style>
</head>
<body>
<h1>jscolor</h1>
<script src="https://www.jq22.com/demo/jscolor202209132226/jscolor.js"></script>
<script>
// Here we can adjust defaults for all color pickers on page:
jscolor.presets.default = {
palette: [
'#000000', '#7d7d7d', '#870014', '#ec1c23', '#ff7e26', '#fef100', '#22b14b', '#00a1e7', '#3f47cc', '#a349a4',
'#ffffff', '#c3c3c3', '#b87957', '#feaec9', '#ffc80d', '#eee3af', '#b5e61d', '#99d9ea', '#7092be', '#c8bfe7',
],
//paletteCols: 12,
//hideOnPaletteClick: true,
//width: 271,
//height: 151,
//position: 'right',
//previewPosition: 'right',
//backgroundColor: 'rgba(51,51,51,1)', controlBorderColor: 'rgba(153,153,153,1)', buttonColor: 'rgba(240,240,240,1)',
}
</script>
<h2>Example 1 - HEX</h2>
Color: <input value="3399FF" data-jscolor="{}">
<h2>Example 2 - HEX with Alpha</h2>
Color: <input value="3399FF80" data-jscolor="{}">
<h2>Example 3 - RGBA</h2>
Color: <input value="rgba(51,153,255,0.5)" data-jscolor="{}">
<h2>Example 4 - Button</h2>
Color: <button data-jscolor="{valueElement:'#val4', alphaElement:'#alp4'}"></button>
Value: <input id="val4" value="#3399FF80">
Alpha: <input id="alp4">
<h2>Example 5 - Events: onChange and onInput</h2>
<p>
You can specify onChange/onInput event handler using jscolor's options:
<button data-jscolor="{
onChange: 'update(this, \'#pr1\')',
onInput: 'update(this, \'#pr2\')',
alpha:0.7, value:'CCFFAA'}"></button>
</p>
<em id="pr1" style="display:inline-block; padding:1em;">change event</em>
<em id="pr2" style="display:inline-block; padding:1em;">input event</em>
<p>
For text INPUTS, you can keep with classic HTML attributes:
<input value="CCFFAA" data-jscolor="{alpha:0.7}">
</p>
<em id="pr3" style="display:inline-block; padding:1em;">change event</em>
<em id="pr4" style="display:inline-block; padding:1em;">input event</em>
<script>
function update(picker, selector) {
document.querySelector(selector).style.background = picker.toBackground()
}
// triggers 'onInput' and 'onChange' on all color pickers when they are ready
jscolor.trigger('input change');
</script>
<h2>Example 6 - Presets</h2>
<p>
Small dark preset:
<input value="FFA000" data-jscolor="{preset:'small dark', position:'right'}">
</p>
<p>
Large preset:
<input value="rgba(255,160,0,0.5)" data-jscolor="{preset:'large', position:'right'}">
</p>
<h2>Example 7 - Customized picker</h2>
<input value="rgba(255,160,0,1.0)" data-jscolor="{
position: 'right', width: 181, height: 121,
palette: '#fff #fcd #fdc #ffc #dfc #dff #cdf #dcf #ccc', paletteCols: 9, paletteHeight: 25,
padding: 10, sliderSize: 25, borderRadius: 5,
borderWidth: 0, controlBorderWidth: 1, pointerBorderWidth: 2,
borderColor: '#000', controlBorderColor: '#AAA', backgroundColor: '#F3F3F3', shadowColor: 'rgba(0,0,0,.4)',
closeButton: true, closeText: 'OK', buttonColor: '#333',
}">
</body>
</html>
页:
[1]