jscolor颜色选择器7种用法示例代码-html代码-BFW代码库

jscolor颜色选择器7种用法示例代码

代码语言：html

所属分类：选择器

代码描述：jscolor颜色选择器7种用法示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
 
    <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 type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jscolor.min.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:.........完整代码请登录后点击上方下载按钮下载查看