Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- moved all default css files into themes/default
- added Colorpicker, heavily modified for UI (thanks Stefan!)
- Loading branch information
Paul Bakaus
committed
Jul 10, 2008
1 parent
0cf0a10
commit 979e64b
Showing
29 changed files
with
1,198 additions
and
207 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes.
Oops, something went wrong.