dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
73 lines (71 loc) • 4.14 kB
HTML
<table class="dojoxColorPicker" dojoAttachEvent="onkeypress: _handleKey" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td valign="top" class="dojoxColorPickerRightPad">
<div class="dojoxColorPickerBox">
<!-- Forcing ABS in style attr due to dojo DND issue with not picking it up form the class. -->
<img title="${saturationPickerTitle}" alt="${saturationPickerTitle}" class="dojoxColorPickerPoint" src="${_pickerPointer}" tabIndex="0" dojoAttachPoint="cursorNode" style="position: absolute; top: 0px; left: 0px;">
<img role="presentation" alt="" dojoAttachPoint="colorUnderlay" dojoAttachEvent="onclick: _setPoint, onmousedown: _stopDrag" class="dojoxColorPickerUnderlay" src="${_underlay}" ondragstart="return false">
</div>
</td>
<td valign="top" class="dojoxColorPickerRightPad">
<div class="dojoxHuePicker">
<!-- Forcing ABS in style attr due to dojo DND issue with not picking it up form the class. -->
<img dojoAttachPoint="hueCursorNode" tabIndex="0" class="dojoxHuePickerPoint" title="${huePickerTitle}" alt="${huePickerTitle}" src="${_huePickerPointer}" style="position: absolute; top: 0px; left: 0px;">
<div class="dojoxHuePickerUnderlay" dojoAttachPoint="hueNode">
<img role="presentation" alt="" dojoAttachEvent="onclick: _setHuePoint, onmousedown: _stopDrag" src="${_hueUnderlay}">
</div>
</div>
</td>
<td valign="top">
<table cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td valign="top" class="dojoxColorPickerPreviewContainer">
<table cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td valign="top" class="dojoxColorPickerRightPad">
<div dojoAttachPoint="previewNode" class="dojoxColorPickerPreview"></div>
</td>
<td valign="top">
<div dojoAttachPoint="safePreviewNode" class="dojoxColorPickerWebSafePreview"></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="bottom">
<table class="dojoxColorPickerOptional" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td>
<div class="dijitInline dojoxColorPickerRgb" dojoAttachPoint="rgbNode">
<table cellpadding="1" cellspacing="1" role="presentation">
<tr><td><label for="${_uId}_r">${redLabel}</label></td><td><input id="${_uId}_r" dojoAttachPoint="Rval" size="1" dojoAttachEvent="onchange: _colorInputChange"></td></tr>
<tr><td><label for="${_uId}_g">${greenLabel}</label></td><td><input id="${_uId}_g" dojoAttachPoint="Gval" size="1" dojoAttachEvent="onchange: _colorInputChange"></td></tr>
<tr><td><label for="${_uId}_b">${blueLabel}</label></td><td><input id="${_uId}_b" dojoAttachPoint="Bval" size="1" dojoAttachEvent="onchange: _colorInputChange"></td></tr>
</table>
</div>
</td>
<td>
<div class="dijitInline dojoxColorPickerHsv" dojoAttachPoint="hsvNode">
<table cellpadding="1" cellspacing="1" role="presentation">
<tr><td><label for="${_uId}_h">${hueLabel}</label></td><td><input id="${_uId}_h" dojoAttachPoint="Hval"size="1" dojoAttachEvent="onchange: _colorInputChange"> ${degLabel}</td></tr>
<tr><td><label for="${_uId}_s">${saturationLabel}</label></td><td><input id="${_uId}_s" dojoAttachPoint="Sval" size="1" dojoAttachEvent="onchange: _colorInputChange"> ${percentSign}</td></tr>
<tr><td><label for="${_uId}_v">${valueLabel}</label></td><td><input id="${_uId}_v" dojoAttachPoint="Vval" size="1" dojoAttachEvent="onchange: _colorInputChange"> ${percentSign}</td></tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="dojoxColorPickerHex" dojoAttachPoint="hexNode" aria-live="polite">
<label for="${_uId}_hex"> ${hexLabel} </label><input id="${_uId}_hex" dojoAttachPoint="hexCode, focusNode, valueNode" size="6" class="dojoxColorPickerHexCode" dojoAttachEvent="onchange: _colorInputChange">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>