diff options
Diffstat (limited to 'tests/visual/colorpicker.html')
| -rw-r--r-- | tests/visual/colorpicker.html | 357 |
1 files changed, 0 insertions, 357 deletions
diff --git a/tests/visual/colorpicker.html b/tests/visual/colorpicker.html deleted file mode 100644 index d1dc0a491..000000000 --- a/tests/visual/colorpicker.html +++ /dev/null @@ -1,357 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - - <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.all.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> |