Skip to content
Permalink
Browse files

- moved all default css files into themes/default

- added Colorpicker, heavily modified for UI (thanks Stefan!)
  • Loading branch information
Paul Bakaus
Paul Bakaus committed Jul 10, 2008
1 parent 0cf0a10 commit 979e64bdd20afd4fd096c5fe089d3aa6e3c89880
@@ -0,0 +1,358 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
<title>ColorPicker</title>

<style type="text/css" media="screen">

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
html, body {
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #52697E;
}
body {
text-align: center;
overflow: auto;
}
.wrapper {
width: 700px;
margin: 0 auto;
text-align: left;
}
h1 {
font-size: 21px;
height: 47px;
line-height: 47px;
text-transform: uppercase;
}
.navigationTabs {
height: 23px;
line-height: 23px;
border-bottom: 1px solid #ccc;
}
.navigationTabs li {
float: left;
height: 23px;
line-height: 23px;
padding-right: 3px;
}
.navigationTabs li a{
float: left;
dispaly: block;
height: 23px;
line-height: 23px;
padding: 0 10px;
overflow: hidden;
color: #52697E;
background-color: #eee;
position: relative;
text-decoration: none;
}
.navigationTabs li a:hover {
background-color: #f0f0f0;
}
.navigationTabs li a.active {
background-color: #fff;
border: 1px solid #ccc;
border-bottom: 0px solid;
}
.tabsContent {
border: 1px solid #ccc;
border-top: 0px solid;
width: 698px;
overflow: hidden;
}
.tab {
padding: 16px;
display: block;
}
.tab h2 {
font-weight: bold;
font-size: 16px;
}
.tab h3 {
font-weight: bold;
font-size: 14px;
margin-top: 20px;
}
.tab p {
margin-top: 16px;
clear: both;
}
.tab ul {
margin-top: 16px;
list-style: disc;
}
.tab li {
margin: 10px 0 0 35px;
}
.tab a {
color: #8FB0CF;
}
.tab strong {
font-weight: bold;
}
.tab pre {
font-size: 11px;
margin-top: 20px;
width: 668px;
overflow: auto;
clear: both;
}
.tab table {
width: 100%;
}
.tab table td {
padding: 6px 10px 6px 0;
vertical-align: top;
}
.tab dt {
margin-top: 16px;
}

#colorSelector {
position: relative;
width: 36px;
height: 36px;
background: url(../../themes/default/images/select.png);
}
#colorSelector div {
position: absolute;
top: 3px;
left: 3px;
width: 30px;
height: 30px;
background: url(../../themes/default/images/select.png) center;
}
#colorSelector2 {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
background: url(../../themes/default/images/select2.png);
}
#colorSelector2 div {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: url(../../themes/default/images/select2.png) center;
}
#colorpickerHolder2 {
top: 32px;
left: 0;
width: 356px;
height: 0;
overflow: hidden;
position: absolute;
}
#colorpickerHolder2 .ui-colorpicker {
background-image: url(../../themes/default/images/custom_background.png);
position: absolute;
bottom: 0;
left: 0;
}
#colorpickerHolder2 .ui-colorpicker-hue div {
background-image: url(../../themes/default/images/custom_indic.gif);
}
#colorpickerHolder2 .ui-colorpicker-hex {
background-image: url(../../themes/default/images/custom_hex.png);
}
#colorpickerHolder2 .ui-colorpicker-rgb-r {
background-image: url(../../themes/default/images/custom_rgb_r.png);
}
#colorpickerHolder2 .ui-colorpicker-rgb-g {
background-image: url(../../themes/default/images/custom_rgb_g.png);
}
#colorpickerHolder2 .ui-colorpicker-rgb-b {
background-image: url(../../themes/default/images/custom_rgb_b.png);
}
#colorpickerHolder2 .ui-colorpicker-hsb-s {
background-image: url(../../themes/default/images/custom_hsb_s.png);
display: none;
}
#colorpickerHolder2 .ui-colorpicker-hsb-h {
background-image: url(../../themes/default/images/custom_hsb_h.png);
display: none;
}
#colorpickerHolder2 .ui-colorpicker-hsb-b {
background-image: url(../../themes/default/images/custom_hsb_b.png);
display: none;
}
#colorpickerHolder2 .ui-colorpicker-submit {
background-image: url(../../themes/default/images/colorpicker_submit.png);
}
#colorpickerHolder2 .ui-colorpicker input {
color: #778398;
}
#customWidget {
position: relative;
height: 36px;
}


</style>

<link rel="stylesheet" href="../../themes/default/ui.colorpicker.css" type="text/css" media="screen" title="no title" charset="utf-8">

<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.colorpicker.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$('#colorpickerHolder').colorpicker({ flat: true });
$('#colorpickerHolder2').colorpicker({
flat: true,
color: '#00ff00',
submit: function(e, ui) {
$('#colorSelector2 div').css('backgroundColor', '#' + ui.hex);
}
});
$('#colorpickerHolder2>div').css('position', 'absolute');
var widt = false;
$('#colorSelector2').bind('click', function() {
$('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
widt = !widt;
});
$('#colorpickerField1').colorpicker({
submit: function(e, ui) {
$('#colorpickerField1').val(ui.hex);
},
beforeShow: function (e, ui) {
$(this).colorpicker("setColor", this.value);
}
})
.bind('keyup', function(){
$(this).colorpicker("setColor", this.value);
});
$('#colorSelector').colorpicker({
color: '#0000ff',
show: function (e, ui) {
$(this).data("colorpicker").picker.fadeIn(500);
return false;
},
hide: function (e, ui) {
$(this).data("colorpicker").picker.fadeOut(500);
return false;
},
change: function (e, ui) {
$('#colorSelector div').css('backgroundColor', '#' + ui.hex);
}
});

});

</script>


</head>
<body>
<div class="wrapper">
<h1>Color Picker</h1>
<ul class="navigationTabs">
<li><a href="#about" rel="about">About</a></li>
</ul>
<div class="tabsContent">
<div class="tab">
<h2>About</h2>
<p>A simple component to select color in the same way you select color in Adobe Photoshop</p>
<h3>Features</h3>
<ul>
<li>Flat mode - as element in page</li>
<li>Powerful controls for color selection</li>
<li>Easy to customize the look by changing some images</li>
<li>Fits into the viewport</li>
</ul>
<h3>Examples</h3>
<p>Flat mode.</p>
<p id="colorpickerHolder">
</p>
<pre>
$('#colorpickerHolder').ColorPicker({flat: true});
</pre>
<p>Custom skin and using flat mode to display the color picker in a custom widget.</p>
<div id="customWidget">
<div id="colorSelector2"><div style="background-color: #00ff00"></div></div>
<div id="colorpickerHolder2">
</div>
</div>

<p>Attached to an text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color.</p>
<p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
<pre>
$('#colorpickerField1').ColorPicker({
onSubmit: function(hsb, hex, rgb) {
$('#colorpickerField1').val(hex);
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
</pre>
<p>Attached to DOMElement and using callbacks to live preview the color and adding animation.</p>
<p>
<div id="colorSelector"><div style="background-color: #0000ff"></div></div>
</p>
<pre>
$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('backgroundColor', '#' + hex);
}
});
</pre>
</div>
</div>
</div>
</body>
</html>
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File renamed without changes.

0 comments on commit 979e64b

Please sign in to comment.
You can’t perform that action at this time.