[Pkg-javascript-commits] [jquery-minicolors] 08/28: Added non-Bootstrap demo
David Prévot
taffit at alioth.debian.org
Sun Sep 8 14:57:23 UTC 2013
This is an automated email from the git hooks/post-receive script.
taffit pushed a commit to branch master
in repository jquery-minicolors.
commit df4ed92318fe16f86684a3c804c9f44443b3295a
Author: Cory LaViska <cory at abeautifulsite.net>
Date: Thu Aug 8 13:42:14 2013 -0400
Added non-Bootstrap demo
---
without-bootstrap.html | 154 ++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 154 insertions(+)
diff --git a/without-bootstrap.html b/without-bootstrap.html
new file mode 100644
index 0000000..1080da9
--- /dev/null
+++ b/without-bootstrap.html
@@ -0,0 +1,154 @@
+<!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">« 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>…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>
\ No newline at end of file
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/jquery-minicolors.git
More information about the Pkg-javascript-commits
mailing list