251 lines
8.1 KiB
HTML
251 lines
8.1 KiB
HTML
|
<html>
|
||
|
|
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
|
||
|
|
<script type="text/javascript" src="../../dijit.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
// dojo.require("dijit.Menu");
|
||
|
|
// dojo.require("dojo.parser"); // scan page for widgets and instantiate them
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style type='text/css'>
|
||
|
|
@import "../tundra/tundra.css";
|
||
|
|
@import "noir.css";
|
||
|
|
|
||
|
|
BODY {
|
||
|
|
font-family:Arial;
|
||
|
|
font-size:12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.oReset {
|
||
|
|
margin:0px;
|
||
|
|
padding:0px;
|
||
|
|
box-sizing:border-box;
|
||
|
|
-moz-box-sizing:border-box;
|
||
|
|
border-width:0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.dijitCombo INPUT {
|
||
|
|
border-width:0px;
|
||
|
|
color:white;
|
||
|
|
background-color:black;
|
||
|
|
font-size:.8em;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* put class dijit_a11y on an outer node (such as BODY) to kick us into a11y mode */
|
||
|
|
|
||
|
|
.dijit_a11y * {
|
||
|
|
background-image:none !important;
|
||
|
|
color:black !important;
|
||
|
|
background-color:transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* a11y indicators are hidden unless we're in a11y mode */
|
||
|
|
.dijitA11yIndicator,
|
||
|
|
.dijitA11yIndicatorSpan {
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dijit_a11y .dijitA11yIndicator {
|
||
|
|
display:block !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dijit_a11y .dijitA11yIndicatorSpan {
|
||
|
|
display:inline !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* make sure widgets have a border */
|
||
|
|
.dijit_a11y .widgetOuter {
|
||
|
|
border:1px solid black;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script language='javascript'>
|
||
|
|
|
||
|
|
|
||
|
|
function startup() {
|
||
|
|
var html = dojo.byId('noir').innerHTML;
|
||
|
|
dojo.byId('tundra').innerHTML = html;
|
||
|
|
dojo.byId('a11y').innerHTML = html;
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleOuterClass(element, event) {
|
||
|
|
var baseName = element.getAttribute("toggleClass");
|
||
|
|
var name = "widgetOuter " + baseName + " " + baseName;
|
||
|
|
switch (event.type) {
|
||
|
|
case "mouseover": name += "Hover"; break;
|
||
|
|
case "mousedown": name += "Active"; break;
|
||
|
|
case "mouseup": name += "Hover"; break;
|
||
|
|
case "mouseout":
|
||
|
|
default: name += "Enabled"; break;
|
||
|
|
}
|
||
|
|
element.className = name;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<body onload='startup()'>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
|
||
|
|
|
||
|
|
<table width='100%'>
|
||
|
|
<tr>
|
||
|
|
<td><h2>Noir</h2></td>
|
||
|
|
<td><h2>Tundra</h2></td>
|
||
|
|
<td><h2>a11y</h2></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td id='noir' class='noir' valign=top>
|
||
|
|
|
||
|
|
<!-- dijit.form.Button -->
|
||
|
|
<div class="dijit dijitLeft dijitInline dijitButton"><div class='dijitRight'>
|
||
|
|
<button class="dijitStretch dijitButtonNode dijitButtonContents"
|
||
|
|
tabIndex="${tabIndex}" type="${type}" id="${id}" name="${name}" alt="${alt}"
|
||
|
|
dojoAttachPoint="containerNode,focusNode"
|
||
|
|
dojoAttachEvent="onclick:buttonClick">
|
||
|
|
${label}
|
||
|
|
</button>
|
||
|
|
</div></div>
|
||
|
|
|
||
|
|
<div class="dijit dijitLeft dijitInline dijitButton dijitButtonActive"><div class='dijitRight'>
|
||
|
|
<button class="dijitStretch dijitButtonNode dijitButtonContents"
|
||
|
|
tabIndex="${tabIndex}" type="${type}" id="${id}" name="${name}" alt="${alt}"
|
||
|
|
dojoAttachPoint="containerNode,focusNode"
|
||
|
|
dojoAttachEvent="onclick:buttonClick">
|
||
|
|
${label}
|
||
|
|
</button>
|
||
|
|
</div></div>
|
||
|
|
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<!-- dijit.form.DropDownButton -->
|
||
|
|
|
||
|
|
<div class="dijit dijitLeft dijitInline dijitButton dijitDDButton"><div class='dijitRight'>
|
||
|
|
<button tabIndex="${tabIndex}" class="dijitStretch dijitButtonNode" type="${type}" id="${id}" name="${name}" alt="${alt}" dojoAttachEvent="onclick:_onArrowClick, onkeypress:_onKey"
|
||
|
|
dojoAttachPoint="popupStateNode,focusNode" waiRole="button" waiState="haspopup-true"
|
||
|
|
><span class="dijitReset dijitButtonContents dijitButtonContentsDropDown" dojoAttachPoint="containerNode">${label}</span
|
||
|
|
><span class='dijitDownArrow'>▼</span>
|
||
|
|
</button></div></div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="dijit dijitLeft dijitInline dijitButton dijitDDButton dijitDDButtonActive"><div class='dijitRight'>
|
||
|
|
<button tabIndex="${tabIndex}" class="dijitStretch dijitButtonNode" type="${type}" id="${id}" name="${name}" alt="${alt}" dojoAttachEvent="onclick:_onArrowClick, onkeypress:_onKey"
|
||
|
|
dojoAttachPoint="popupStateNode,focusNode" waiRole="button" waiState="haspopup-true"
|
||
|
|
><span class="dijitReset dijitButtonContents dijitButtonContentsDropDown" dojoAttachPoint="containerNode">${label}</span
|
||
|
|
><span class='dijitDownArrow'>▼</span>
|
||
|
|
</button>
|
||
|
|
</div></div>
|
||
|
|
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- dijit.form.ComboButton -->
|
||
|
|
<table class="dijit dijitLeft dijitInline dijitComboButton dijitComboButtonEnabled" id="${id}" name="${name}"
|
||
|
|
cellspacing=0 cellpadding=0>
|
||
|
|
<tr>
|
||
|
|
<td class='dijitReset dijitLeft'> </td>
|
||
|
|
<td class="dijitStretch dijitButtonContents dijitButtonNode"
|
||
|
|
dojoAttachEvent="onclick:buttonClick, onkeypress:_onKey"
|
||
|
|
tabIndex="${tabIndex}" dojoAttachPoint="containerNode,focusNode">
|
||
|
|
${label}
|
||
|
|
</td>
|
||
|
|
<td class='dijitReset dijitRight dijitComboButtonArrow dijitButtonNode'
|
||
|
|
dojoAttachPoint="popupStateNode"
|
||
|
|
dojoAttachEvent="onclick:_onArrowClick, onkeypress:_onKey"
|
||
|
|
tabIndex="${tabIndex}"
|
||
|
|
waiRole="button" waiState="haspopup-true"
|
||
|
|
><span class='dijitA11yDownArrow'>▼</span>
|
||
|
|
</td></tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<div class="dijit dijitLeft dijitInline dijitComboButton dijitComboButtonActive" id="${id}" name="${name}"
|
||
|
|
><button type="${type}"
|
||
|
|
class="dijitStretch dijitButtonContents dijitButtonNode"
|
||
|
|
dojoAttachEvent="onclick:buttonClick, onkeypress:_onKey"
|
||
|
|
tabIndex="${tabIndex}" dojoAttachPoint="containerNode,focusNode">
|
||
|
|
${label}
|
||
|
|
</button><button type='${type}' class='dijitRight dijitComboButtonArrow dijitButtonNode'
|
||
|
|
dojoAttachPoint="popupStateNode"
|
||
|
|
dojoAttachEvent="onclick:_onArrowClick, onkeypress:_onKey"
|
||
|
|
tabIndex="${tabIndex}"
|
||
|
|
waiRole="button" waiState="haspopup-true"
|
||
|
|
> <span class='dijitDownArrow'>▼</span>
|
||
|
|
</button></div>
|
||
|
|
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<!-- dijit.form.FilteringSelect
|
||
|
|
dijit.form.ComboBox
|
||
|
|
-->
|
||
|
|
|
||
|
|
<table class="dijitReset dijit dijitInline dijitComboBox" id='widget_${id}' waiRole="presentation" cellspacing=0 cellpadding=0
|
||
|
|
><tr>
|
||
|
|
<td class='dijitReset dijitLeft'> </td>
|
||
|
|
<td class='dijitReset dijitStretch XdijitInputField XdijitComboBoxInput'
|
||
|
|
><input type="text" autocomplete="off" name="${name}" style='border:0px;padding:.2em;'
|
||
|
|
dojoAttachEvent="onkeypress, onkeyup, onfocus, onblur, compositionend,onmouseover:_onMouse,onmouseout:_onMouse"
|
||
|
|
dojoAttachPoint="textbox,focusNode" id='${id}'
|
||
|
|
tabIndex='${tabIndex}' size='${size}' maxLength='${maxLength}'
|
||
|
|
></td><td class='dijitReset dijitRight dijitButtonNode dijitArrowButton'
|
||
|
|
dojoAttachPoint="downArrowNode"
|
||
|
|
dojoAttachEvent="onclick:_onArrowClicked,onmousedown:_onMouse,onmouseup:_onMouse,onmouseover:_onMouse,onmouseout:_onMouse"
|
||
|
|
tabIndex="${tabIndex}"
|
||
|
|
waiRole="button" waiState="haspopup-true"
|
||
|
|
><span class='dijitA11yDownArrow'>▼</span
|
||
|
|
></td
|
||
|
|
></tr></table>
|
||
|
|
|
||
|
|
|
||
|
|
<!--
|
||
|
|
<div class="dijit dijitLeft dijitInline dijitComboBox dijitComboBoxDisabled" id='widget_${id}' waiRole="presentation"
|
||
|
|
><input type="text" autocomplete="off" class="dijitStretch dijitInputField dijitComboBoxInput" name="${name}"
|
||
|
|
dojoAttachEvent="onkeypress, onkeyup, onfocus, onblur, compositionend,onmouseover:_onMouse,onmouseout:_onMouse"
|
||
|
|
dojoAttachPoint="textbox,focusNode" id='${id}'
|
||
|
|
tabIndex='${tabIndex}' size='${size}' maxLength='${maxLength}'
|
||
|
|
><button class='dijitRight dijitButtonNode dijitArrowButton'
|
||
|
|
dojoAttachPoint="downArrowNode"
|
||
|
|
dojoAttachEvent="onclick:_onArrowClicked,onmousedown:_onMouse,onmouseup:_onMouse,onmouseover:_onMouse,onmouseout:_onMouse"
|
||
|
|
tabIndex="${tabIndex}"
|
||
|
|
waiRole="button" waiState="haspopup-true"
|
||
|
|
><span class='dijitTeeny'> </span><span class='dijitA11yDownArrow'>▼</span
|
||
|
|
> </button
|
||
|
|
></div>
|
||
|
|
-->
|
||
|
|
|
||
|
|
<!--
|
||
|
|
<span class='dijit dijitInline widgetLeft dijitCombo dijitComboEnabled' toggleClass="dijitCombo">
|
||
|
|
<div class='widgetRight' onclick='console.info("right")'>
|
||
|
|
<div class='a11yIndicator a11yDownArrow'>▼</div>
|
||
|
|
<div class='widgetStretch label' onclick='console.info("center");'>
|
||
|
|
Select
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<!- - dijit.form.ComboBox
|
||
|
|
<span class='dijit dijitInline widgetLeft dijitCombo dijitComboEnabled'>
|
||
|
|
<div class='widgetRight' style='position:relative;' onclick='console.info("right")'>
|
||
|
|
<div class='a11yIndicator a11yDownArrow'>▼</div>
|
||
|
|
<div class='widgetStretch label' onclick='console.info("center");'>
|
||
|
|
<input type='text' class='' value='Combo'>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</span>
|
||
|
|
-->
|
||
|
|
</td>
|
||
|
|
<td id='tundra' class='tundra' valign=top></td>
|
||
|
|
<td id='a11y' class='dijit_a11y' valign=top></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|