Subversion-Projekte lars-tiefland.ci

<!doctype html>

<html>

    <head>

        <title>jQuery MiniColors</title>

        <meta charset="utf-8">

        <!-- jQuery -->

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <!-- MiniColors -->

        <script src="jquery.minicolors.js"></script>

        <link rel="stylesheet" href="jquery.minicolors.css">

        <style>

            body {

                font: 16px sans-serif;

                line-height: 1.8;

                padding: 0 40px;

                margin-bottom: 200px;

            }

            a {

                color: #08c;

                text-decoration: none;

            }

            a:hover {

                text-decoration: underline;

            }

            .form-group {

                margin: 20px 0;

            }

            label {

                color: #888;

            }

        </style>

        <script>

            $(document).ready(function()

            {

                $('.demo').each(function()

                {

                    //

                    // Dear reader, it's actually very easy to initialize MiniColors. For example:

                    //

                    //  $(selector).minicolors();

                    //

                    // The way I've done it below is just for the demo, so don't get confused

                    // by it. Also, data- attributes aren't supported at this time. Again,

                    // they're only used for the purposes of this demo.

                    //

                    $(this).minicolors(

                    {

                        control: $(this).attr('data-control') || 'hue',

                        defaultValue: $(this).attr('data-defaultValue') || '',

                        inline: $(this).attr('data-inline') === 'true',

                        letterCase: $(this).attr('data-letterCase') || 'lowercase',

                        opacity: $(this).attr('data-opacity'),

                        position: $(this).attr('data-position') || 'bottom left',

                        change: function(hex, opacity)

                        {

                            var log;

                            try

                            {

                                log = hex ? hex : 'transparent';

                                if (opacity) log += ', ' + opacity;

                                console.log(log);

                            }

                            catch (e)

                            {}

                        },

                        theme: 'default'

                    });

                });

            });

        </script>

    </head>

    <body>

        <h1>MiniColors Demo (without Bootstrap)</h1>

        <p>

            <a href="index.html">&laquo; Back to the Bootstrap demo</a>

        </p>

        <!-- Control Types -->

        <h3>Control Types</h3>

        <div class="form-group">

            <label for="hue-demo">Hue (default)</label>

            <input type="text" id="hue-demo" class="demo" data-control="hue" value="#ff6161"> </div>

        <div class="form-group">

            <label for="saturation-demo">Saturation</label>

            <input type="text" id="saturation-demo" class="demo" data-control="saturation" value="#0088cc"> </div>

        <div class="form-group">

            <label for="brightness-demo">Brightness</label>

            <input type="text" id="brightness-demo" class="demo" data-control="brightness" value="#00ffff"> </div>

        <div class="form-group">

            <label for="wheel-demo">Wheel</label>

            <input type="text" id="wheel-demo" class="demo" data-control="wheel" value="#ff99ee"> </div>

        <!-- Input modes -->

        <h3>Input Modes</h3>

        <div class="form-group">

            <label for="text-field">Text field</label>

            <br>

            <input type="text" id="text-field" class="demo" value="#70c24a"> </div>

        <div class="form-group">

            <label for="hidden-input">Hidden Input</label>

            <br>

            <input type="hidden" id="hidden-input" class="demo" value="#db913d"> </div>

        <div class="form-group">

            <label for="inline">Inline</label>

            <br>

            <input type="text" id="inline" class="demo" data-inline="true" value="#4fc8db"> </div>

        <!-- Positions -->

        <h3>Positions</h3>

        <div class="form-group">

            <label for="position-bottom-left">bottom left (default)</label>

            <input type="text" id="position-bottom-left" class="demo" data-position="bottom left" value="#0088cc"> </div>

        <div class="form-group">

            <label for="position-top-left">top left</label>

            <input type="text" id="position-top-left" class="demo" data-position="top left" value="#0088cc"> </div>

        <div class="form-group">

            <label for="position-bottom-right">bottom right</label>

            <input type="text" id="position-bottom-right" class="demo" data-position="bottom right" value="#0088cc"> </div>

        <div class="form-group">

            <label for="position-top-right">top right</label>

            <input type="text" id="position-top-right" class="demo" data-position="top right" value="#0088cc"> </div>

        <!-- and more -->

        <h3>&hellip;and more!</h3>

        <div class="form-group">

            <label for="opacity">Opacity</label>

            <br>

            <input type="text" id="opacity" class="demo" data-opacity=".5" value="#766fa8"> </div>

        <div class="form-group">

            <label for="default-value">Default Value</label>

            <br>

            <input type="text" id="default-value" class="demo" data-defaultValue="#ff6600"> </div>

        <div class="form-group">

            <label for="letter-case">Letter Case</label>

            <br>

            <input type="text" id="letter-case" class="demo" data-letterCase="uppercase"> </div>

    </body>

</html>