Skip to content

Commit df4ed92

Browse files
claviskaclaviska
committed
Added non-Bootstrap demo
1 parent 5fc9da4 commit df4ed92

File tree

1 file changed

+154
-0
lines changed

1 file changed

+154
-0
lines changed

‎without-bootstrap.html

+154
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>jQuery MiniColors</title>
5+
<meta charset="utf-8">
6+
7+
<!-- jQuery -->
8+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
9+
10+
<!-- MiniColors -->
11+
<script src="jquery.minicolors.js"></script>
12+
<link rel="stylesheet" href="jquery.minicolors.css">
13+
14+
<style>
15+
body {
16+
font: 16px sans-serif;
17+
line-height: 1.8;
18+
padding: 0 40px;
19+
margin-bottom: 200px;
20+
}
21+
a {
22+
color: #08c;
23+
text-decoration: none;
24+
}
25+
a:hover {
26+
text-decoration: underline;
27+
}
28+
.form-group {
29+
margin: 20px 0;
30+
}
31+
label {
32+
color: #888;
33+
}
34+
</style>
35+
36+
<script>
37+
$(document).ready( function() {
38+
39+
$('.demo').each( function() {
40+
//
41+
// Dear reader, it's actually very easy to initialize MiniColors. For example:
42+
//
43+
// $(selector).minicolors();
44+
//
45+
// The way I've done it below is just for the demo, so don't get confused
46+
// by it. Also, data- attributes aren't supported at this time. Again,
47+
// they're only used for the purposes of this demo.
48+
//
49+
$(this).minicolors({
50+
control: $(this).attr('data-control') || 'hue',
51+
defaultValue: $(this).attr('data-defaultValue') || '',
52+
inline: $(this).attr('data-inline') === 'true',
53+
letterCase: $(this).attr('data-letterCase') || 'lowercase',
54+
opacity: $(this).attr('data-opacity'),
55+
position: $(this).attr('data-position') || 'bottom left',
56+
change: function(hex, opacity) {
57+
var log;
58+
try {
59+
log = hex ? hex : 'transparent';
60+
if( opacity ) log += ', ' + opacity;
61+
console.log(log);
62+
} catch(e) {}
63+
},
64+
theme: 'default'
65+
});
66+
67+
});
68+
69+
});
70+
</script>
71+
</head>
72+
<body>
73+
74+
<h1>MiniColors Demo (without Bootstrap)</h1>
75+
<p>
76+
<a href="index.html">&laquo; Back to the Bootstrap demo</a>
77+
</p>
78+
79+
<!-- Control Types -->
80+
<h3>Control Types</h3>
81+
<div class="form-group">
82+
<label for="hue-demo">Hue (default)</label>
83+
<input type="text" id="hue-demo" class="demo" data-control="hue" value="#ff6161">
84+
</div>
85+
<div class="form-group">
86+
<label for="saturation-demo">Saturation</label>
87+
<input type="text" id="saturation-demo" class="demo" data-control="saturation" value="#0088cc">
88+
</div>
89+
<div class="form-group">
90+
<label for="brightness-demo">Brightness</label>
91+
<input type="text" id="brightness-demo" class="demo" data-control="brightness" value="#00ffff">
92+
</div>
93+
<div class="form-group">
94+
<label for="wheel-demo">Wheel</label>
95+
<input type="text" id="wheel-demo" class="demo" data-control="wheel" value="#ff99ee">
96+
</div>
97+
98+
<!-- Input modes -->
99+
<h3>Input Modes</h3>
100+
<div class="form-group">
101+
<label for="text-field">Text field</label>
102+
<br>
103+
<input type="text" id="text-field" class="demo" value="#70c24a">
104+
</div>
105+
<div class="form-group">
106+
<label for="hidden-input">Hidden Input</label>
107+
<br>
108+
<input type="hidden" id="hidden-input" class="demo" value="#db913d">
109+
</div>
110+
<div class="form-group">
111+
<label for="inline">Inline</label>
112+
<br>
113+
<input type="text" id="inline" class="demo" data-inline="true" value="#4fc8db">
114+
</div>
115+
116+
<!-- Positions -->
117+
<h3>Positions</h3>
118+
<div class="form-group">
119+
<label for="position-bottom-left">bottom left (default)</label>
120+
<input type="text" id="position-bottom-left" class="demo" data-position="bottom left" value="#0088cc">
121+
</div>
122+
<div class="form-group">
123+
<label for="position-top-left">top left</label>
124+
<input type="text" id="position-top-left" class="demo" data-position="top left" value="#0088cc">
125+
</div>
126+
<div class="form-group">
127+
<label for="position-bottom-right">bottom right</label>
128+
<input type="text" id="position-bottom-right" class="demo" data-position="bottom right" value="#0088cc">
129+
</div>
130+
<div class="form-group">
131+
<label for="position-top-right">top right</label>
132+
<input type="text" id="position-top-right" class="demo" data-position="top right" value="#0088cc">
133+
</div>
134+
135+
<!-- and more -->
136+
<h3>&hellip;and more!</h3>
137+
<div class="form-group">
138+
<label for="opacity">Opacity</label>
139+
<br>
140+
<input type="text" id="opacity" class="demo" data-opacity=".5" value="#766fa8">
141+
</div>
142+
<div class="form-group">
143+
<label for="default-value">Default Value</label>
144+
<br>
145+
<input type="text" id="default-value" class="demo" data-defaultValue="#ff6600">
146+
</div>
147+
<div class="form-group">
148+
<label for="letter-case">Letter Case</label>
149+
<br>
150+
<input type="text" id="letter-case" class="demo" data-letterCase="uppercase">
151+
</div>
152+
153+
</body>
154+
</html>

0 commit comments

Comments
 (0)