java
/
jMonkeyEngine-SoftwareStore
mirror of https://github.com/jMonkeyEngine/SoftwareStore.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
							<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Spectrum - The No Hassle jQuery Colorpicker</title>

    <meta name="description" content="Spectrum is a JavaScript colorpicker plugin using the jQuery framework.  It is highly customizable, but can also be used as a simple input type=color polyfill">
    <meta name="author" content="Brian Grinstead and Spectrum contributors">

    <link rel="stylesheet" type="text/css" href="../spectrum.css">
    <link rel="stylesheet" type="text/css" href="../docs/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../docs/docs.css">
    <script type="text/javascript" src="../docs/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="../spectrum.js"></script>
	<script type="text/javascript" src="../i18n/jquery.spectrum-fi.js"></script>
    <script type='text/javascript' src='example.js'></script>

    <style>

    .example-container {
        margin-top: 10px;
        text-align: center;
        background: #333;
        background: linear-gradient(to bottom, #eee, #ccc);
        padding: 3px;
        padding-top: 0;
        border-radius: 5px;
    }
    .example-controls {
        background: #999;
        margin: 0 -3px;
        padding: 10px 0;
        margin-bottom: 15px;

    }
    label {
        display: inline-block;
        font-weight: bold;

    }
    #palettes .sp-palette {
        max-width: 500px;
    }


    .newGmail .sp-palette-row-0, .newGmail .sp-palette-row-1 {
        margin-bottom: 5px;
    }

    .newGmail .sp-palette .sp-thumb-el {
        width: 20px;
        height: 20px;
        margin: 1px 1px;
    }

    .newGmail .sp-palette .sp-thumb-el:hover, .newGmail  .sp-palette .sp-thumb-el.sp-thumb-active {
        border-color: #000;
    }
    </style>
</head>
<body>
<div id='header'>
    <h1><a href='http://bgrins.github.com/spectrum'>Spectrum</a></h1> <h2><em>The No Hassle jQuery Colorpicker</em></h2>
    <div id='links'>
        View the <a href='http://github.com/bgrins/spectrum'>Source code</a>.
        Spectrum is a project by <a href='http://twitter.com/bgrins'>@bgrins</a>.
    </div>
    <br style='clear:both;' />
</div>

<div class="container">

    <h2>Spectrum Colorpicker Crazy Configurator</h2>
    <div class='alert'>NOTE: this page is currently in development.  Please refer to the <a href='http://github.com/bgrins/spectrum'>Home Page</a> for demos and documentation instead.
    </div>
    <p>
        Spectrum can be customized to show and hide different portions of the colorpicker.  Try clicking some of the buttons below to see how it can change.
    </p>

    <div class="example-container">
        <div class="example-controls">
            <div class='btn-group'>
                <button class='btn toggleBtn' data-rule='showPalette'>Show Palette</button>
                <button class='btn toggleBtn' data-rule='showInput'>Show Input</button>
                <button class='btn toggleBtn' data-rule='showInitial'>Show Initial</button>
                <button class='btn toggleBtn' data-rule='showAlpha'>Show Alpha</button>
                <button class='btn toggleBtn' data-rule='showPaletteOnly'>Show Palette Only</button>
                <button class='btn toggleBtn' data-rule='togglePaletteOnly'>Show Picker Toggle Button</button>
                <button class='btn toggleBtn' data-rule='showButtons'>Show Buttons</button>
            </div>
            <br />
            <br />
            <p>
            <label>Draggable Size <input type='range' value='172' id='size' max='500' min='50' /></label>

            <label>Hue Size <input type='range' value='16' id='huesize' max='90' min='5' /></label>
            </p>
        </div>

        <input id="full">

    </div>

    <hr />
    <h2>Spectrum Colorpicker Localization</h2>
    <div class='alert'>
        <p>
            This page has loaded the German localization.  Here is a list of all <a href='https://github.com/bgrins/spectrum/tree/master/i18n'>spectrum localizations</a>.  <strong>Please help expand our localizations</strong>  if you know a language that isn't represented!  You can copy and paste one of the files, and update the text for 'cancel' and 'choose', then submit a pull request at: <a href'https://github.com/bgrins/spectrum'>https://github.com/bgrins/spectrum</a>.
        </p>
    </div>

	<input id="langdemo" />

    <hr />
    <h2>Spectrum Colorpicker Sample Palettes</h2>
    <div class='alert'>

        <p>
        NOTE: these palettes are also a work in progress.  Ideally the site will eventually allow you to choose between a few options and download them.
        </p>

        <p>
        The <code>newGmail</code> palette below is an example of customizing the palette size and layout with CSS.
        </p>

    </div>
    <div id="palettes" class="example-container">

    </div>

</div>


<script type="text/javascript" src="../docs/prettify.js"></script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-8259845-4']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>