example/index.html

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>colpick Color Picker - Usage examples</title>

    <link rel="stylesheet" type="text/css" href="//s3.amazonaws.com/mikemai/assets/css/typesettings-1.0-min.css">
    <style>
        .typesettings code {
            white-space: pre;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="../css/colpick.css">
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="../js/colpick.js"></script>
</head>

<body class="typesettings">
    
<h1>colpick Color Picker</h1>
<h2>Usage examples</h2>
    
    <h3>Button</h3>
    <p>
        <button id="example-button" value="#00FF00">Show Color Picker</button>
    </p>
    <p>
        <code>$('#example-button').colpick();</code>
    </p>
    <script>
    $('#example-button').colpick();
    </script>
    
    
    <h3>Flat mode and hex layout</h3>
    <p>
        <div id="example-flat"></div>
    </p>
    <p>
        <code>$('#example-flat').colpick({
    color:'123456',
    flat:true,
    layout:'hex'
});</code>
    </p>
    <script>
    $('#example-flat').colpick({
        color:'123456',
        flat:true,
        layout:'hex'
    });
    </script>
    
    
    <h3>Text Input and colorScheme 'dark'</h3>
    <p>
        <input type="text" id="example-text" value="#0000FF">
    </p>
    <p>
        <code>$('#example-text').colpick({
    colorScheme:'dark',
    onChange:function(hsb,hex,rgb,el,bySetColor) {
        $(el).val('#'+hex);
    }
});</code>
    </p>
    <script>
        $('#example-text').colpick({
            colorScheme:'dark',
            onChange:function(hsb,hex,rgb,el,bySetColor) {
                $(el).val('#'+hex);
            }
        });
    </script>
    
    <h3>HTML5 Color Input</h3>
    <p>
        <input type="color" id="example-color" value="#FF0000">
    </p>
    <p>
        <code>$('#example-color').colpick({
    onSubmit:function(hsb,hex,rgb,el,bySetColor) {
        $(el).val('#'+hex);
        $(el).colpickHide();
    }
});</code>
    </p>
    <script>
        $('#example-color').colpick({
            onSubmit:function(hsb,hex,rgb,el,bySetColor) {
                $(el).val('#'+hex);
                $(el).colpickHide();
            }
        });
    </script>
    
    
    <h3>Polyfill</h3>
    <p>
        <input type="color" id="example-polyfill">
    </p>
    <p>
        <code>$('#example-polyfill').colpick({
    polyfill:true
});</code>
    </p>
    <script>
    $('#example-polyfill').colpick({
        polyfill:true
    });
    </script>
</body>
</html>