HTML and CSS Reference
In-Depth Information
<!-- IMPLEMENTATION -->
<cc:implementation>
<h:outputScript library="js" name="jscolor.js" />
<div id="#{cc.clientId}">
<input jsf:id="#{cc.id}" jsf:value="#{cc.attrs.value}" type="color"
list="#{cc.attrs.list}"/>
<script type="text/javascript">
function html5_supports_input(type) {
var i = document.createElement("input");
i.setAttribute("type", type);
return i.type === type;
}
if (!html5_supports_input('color')) {
// The color input is not supported on the browser.
// Provide an alternative way of rendering the color picker,
// e.g. jscolor ( http://jscolor.com/ )
var componentId = '${cc.clientId}:${cc.id}'.replace(/:/g, "\\:");
new jscolor.color(document.getElementById('${cc.clientId}:${cc.id}'), {})
}
</script>
</div>
</cc:implementation>
</html>
Figure 7-4. Fallback version of the inputColor component
rather than implementing your own htML5 feature detection algorithms, you can use a Javascript library
like Modernizr ( www.modernizr.com ) to detect the availability of native implementations of htML5 and Css3.
Tip
 
 
Search WWH ::




Custom Search