add some more custom config and put every thing in comment in the custom.yaml template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Skinning via Progressive Enhancement using the Event Utility and the Loader</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
.yui-checkboxes-loading #checkboxes {
display: none;
}
</style>
<script type="text/javascript">
// Hide the checkboxes if JavaScript is enabled to prevent
// the user from seeing a flash of unstyled content while
// the JavaScript for the checkboxes is being loaded.
document.documentElement.className = "yui-checkboxes-loading";
</script>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Skinning via Progressive Enhancement using the Event Utility and the Loader</h1>
<div class="exampleIntro">
<p>
Using Progressive Enhancement to skin checkboxes with the help of the
<a href="../../api/Loader.html">Loader</a>,
<a href="../../api/module_classnamemanager.html">ClassNameManager Utility</a>,
and the Event Utility's <code>focus</code> and <code>blur</code> events and the
<code>delegate</code> method.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="checkboxes">
<div>
<label for="field-1">Field 1: </label>
<span>
<span>
<input type="checkbox" id="field-1" name="field-1" value="1">
</span>
</span>
</div>
<div>
<label for="field-2">Field 2: </label>
<span>
<span>
<input type="checkbox" id="field-2" name="field-2" value="2">
</span>
</span>
</div>
<div>
<label for="field-3">Field 3: </label>
<span>
<span>
<input type="checkbox" id="field-3" name="field-3" value="3">
</span>
</span>
</div>
</div>
<script type="text/javascript">
YUI({
base: "../../build/",
// Load the stylesheet for the skinned checkboxes via JavaScript,
// since without JavaScript skinning of the checkboxes wouldn't
// be possible.
modules: {
"checkboxcss": {
type: "css",
fullpath: "assets/checkbox.css"
},
"checkboxjs": {
type: "js",
fullpath: "assets/checkbox.js",
requires: ["classnamemanager", "event-focus", "node-event-delegate", "checkboxcss"]
}
}
}).use("checkboxjs", function(Y, result) {
// The callback supplied to use() will be executed regardless of
// whether the operation was successful or not. The second parameter
// is a result object that has the status of the operation. We can
// use this to try to recover from failures or timeouts.
if (!result.success) {
Y.log("Load failure: " + result.msg, "warn", "Example");
// Show the checkboxes if the loader failed that way the original
// unskinned checkboxes will be visible so that the user can
// interact with them either way.
document.documentElement.className = "";
}
});
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>