YUI 3.x Home -

YUI Library Examples: Event: Skinning via Progressive Enhancement using the Event Utility and the Loader

Event: Skinning via Progressive Enhancement using the Event Utility and the Loader

Using Progressive Enhancement to skin checkboxes with the help of the Loader, ClassNameManager Utility, and the Event Utility's focus and blur events and the delegate method.

Challenges

There are a few challenges when trying to skin an HTML checkbox using CSS. To start, most of the A-grade browsers don't provide support for CSS properties like border and background on the <input type="checkbox"> element. Additionally, IE 6 and IE 7 (Quirks Mode) lack support for attribute selectors — necessary to style the checked and disabled states. Additionally, IE 6 and 7 only support the :focus and :active pseudo classes on <a> elements, both of which are needed to style a checkbox when it is focused or depressed.

Approach

Despite the shortcomings in CSS support, with a little extra markup and through the use of JavaScript it is possible to skin an <input type="checkbox"> element consistently well in all of the A-grade browsers.

Markup

Since CSS support for the <input type="checkbox"> element is lacking, wrap <input type="checkbox"> elements in one or more inline elements to provide the necessary hooks for styling. In this example, each <input type="checkbox"> element is wrapped by two <span>s.

  1. <span>
  2. <span>
  3. <input type="checkbox">
  4. </span>
  5. </span>
<span>
  <span>
    <input type="checkbox">
  </span>
</span>

CSS

To style each checkbox, a class name of yui-checkbox will be applied to the outtermost <span> wrapping each <input type="checkbox"> element. An additional class will be used to represent the various states of each checkbox. The class name for each state will follow a consistent pattern: yui-checkbox-[state]. For this example, the following state-based class names will be used:

yui-checkbox-focus
The checkbox has focus
yui-checkbox-active
The checkbox is active (pressed)
yui-checkbox-checked
The checkbox is checked

The styles for each checkbox comes together as follows:

  1. .yui-checkbox {
  2. display: -moz-inline-stack; /* Gecko < 1.9, since it doesn't support "inline-block" */
  3. display: inline-block; /* IE, Opera and Webkit, and Gecko 1.9 */
  4. width: 10px;
  5. height: 10px;
  6. border: inset 2px #999;
  7. background-color: #fff; /* Need to set a background color or IE won't get mouse events */
  8.  
  9. /*
  10.   Necessary for IE 6 (Quirks and Standards Mode) and IE 7 (Quirks Mode), since
  11.   they don't support use of negative margins without relative positioning.
  12.   */
  13. _position: relative;
  14. }
  15.  
  16. .yui-checkbox span {
  17. display: block;
  18. height: 14px;
  19. width: 12px;
  20. overflow: hidden;
  21.  
  22. /* Position the checkmark for Gecko, Opera and Webkit and IE 7 (Strict Mode). */
  23. margin: -5px 0 0 1px;
  24.  
  25. /* Position the checkmark for IE 6 (Strict and Quirks Mode) and IE 7 (Quirks Mode).*/
  26. _margin: 0;
  27. _position: absolute;
  28. _top: -5px;
  29. _left: 1px;
  30.  
  31. }
  32.  
  33. /* For Gecko < 1.9: Positions the checkbox on the same line as its corresponding label. */
  34. .yui-checkbox span:after {
  35. content: ".";
  36. visibility: hidden;
  37. line-height: 2;
  38. }
  39.  
  40. /*
  41.   Hide the actual checkbox offscreen so that it is out of view, but still accessible via
  42.   the keyboard.
  43. */
  44. .yui-checkbox input {
  45. position: absolute;
  46. left: -10000px;
  47. }
  48.  
  49. .yui-checkbox-focus {
  50. border-color: #39f;
  51. background-color: #9cf;
  52. }
  53.  
  54. .yui-checkbox-active {
  55. background-color: #ccc;
  56. }
  57.  
  58. .yui-checkbox-checked span {
  59. /* Draw a custom checkmark for the checked state using a background image. */
  60. background: url(checkmark.png) no-repeat;
  61. }
.yui-checkbox {
    display: -moz-inline-stack; /* Gecko < 1.9, since it doesn't support "inline-block" */
    display: inline-block; /* IE, Opera and Webkit, and Gecko 1.9 */
    width: 10px;
    height: 10px;
    border: inset 2px #999;
    background-color: #fff; /*  Need to set a background color or IE won't get mouse events */  
 
    /*
        Necessary for IE 6 (Quirks and Standards Mode) and IE 7 (Quirks Mode), since 
        they don't support use of negative margins without relative positioning.  
    */
    _position: relative;
}
 
.yui-checkbox span {
    display: block;
    height: 14px;
    width: 12px;
    overflow: hidden;
 
    /* Position the checkmark for Gecko, Opera and Webkit and IE 7 (Strict Mode). */
    margin: -5px 0 0 1px;
 
    /* Position the checkmark for IE 6 (Strict and Quirks Mode) and IE 7 (Quirks Mode).*/
    _margin: 0;
    _position: absolute;
    _top: -5px;
    _left: 1px;
 
}
 
/* For Gecko < 1.9: Positions the checkbox on the same line as its corresponding label. */
.yui-checkbox span:after {
    content: ".";
    visibility: hidden;
    line-height: 2;
}
 
/*
    Hide the actual checkbox offscreen so that it is out of view, but still accessible via 
    the keyboard. 
*/
.yui-checkbox input {
    position: absolute;
    left: -10000px;
}
 
.yui-checkbox-focus {
    border-color: #39f;
    background-color: #9cf;
}
 
.yui-checkbox-active {
    background-color: #ccc;
}
 
.yui-checkbox-checked span {
    /* Draw a custom checkmark for the checked state using a background image. */
    background: url(checkmark.png) no-repeat;
}

JavaScript

Application and removal of the state-based class names will be facilitated by JavaScript event handlers. Each event handler will track the state of the <input type="checkbox"> element, and apply and remove corresponding state-based class names from its outtermost <span> — making it easy to style each state. And since each JavaScript is required for state management, the stylesheet for the skinned checkboxes will only be added to the page when JavaScript is enabled. This will ensure that each checkbox works correctly with and without JavaScript enabled.

Since there could easily be many instances of a skinned checkbox on the page, all event listeners will be attached to the containing element for all checkboxes. Each listener will listen for events as they bubble up from each checkbox. Relying on event bubbling will improve the overall performance of the page by reducing the number of event handlers.

Since the DOM focus and blur events do not bubble, use the Event Utility's focus and blur custom events, as an alternative to attaching discrete focus and blur event handlers to the <input type="checkbox"> element of each skinned checkbox. The focus and blur custom events leverage capture-phase DOM event listeners, making it possible to attach a single focus and blur event listener on the containing element of each checkbox — thereby increasing the performance of the page. The complete script for the example comes together as follows:

  1. YUI().use("*", function(Y) {
  2.  
  3. var UA = Y.UA,
  4. getClassName = Y.ClassNameManager.getClassName,
  5. sCheckboxFocusClass = getClassName("checkbox", "focus"), // Create yui-checkbox-focus
  6. sCheckboxCheckedClass = getClassName("checkbox", "checked"), // Create yui-checkbox-checked
  7. sCheckboxActiveClass = getClassName("checkbox", "active"), // Create yui-checkbox-active
  8. bKeyListenersInitialized = false,
  9. bMouseListenersInitialized = false,
  10. forAttr = (UA.ie && UA.ie < 8) ? "htmlFor" : "for",
  11. bBlockDocumentMouseUp = false,
  12. bBlockClearActive = false,
  13. bBlockBlur = false,
  14. oActiveCheckbox;
  15.  
  16.  
  17. var initKeyListeners = function () {
  18.  
  19. this.delegate("keydown", onCheckboxKeyDown, ".yui-checkbox");
  20. this.delegate("click", onCheckboxClick, ".yui-checkbox");
  21. this.delegate("blur", onCheckboxBlur, "input[type=checkbox]");
  22.  
  23. bKeyListenersInitialized = true;
  24.  
  25. };
  26.  
  27.  
  28. var initMouseListeners = function () {
  29.  
  30. this.delegate("mouseover", onCheckboxMouseOver, ".yui-checkbox");
  31. this.delegate("mouseout", onCheckboxMouseOut, ".yui-checkbox-active");
  32. this.get("ownerDocument").on("mouseup", onDocumentMouseUp);
  33.  
  34. bMouseListenersInitialized = true;
  35.  
  36. };
  37.  
  38.  
  39. var getCheckbox = function (node) {
  40.  
  41. return (node.hasClass("yui-checkbox") ? node : node.ancestor(".yui-checkbox"));
  42.  
  43. };
  44.  
  45.  
  46. var getCheckboxForLabel = function (label) {
  47.  
  48. var sID = label.getAttribute(forAttr),
  49. oInput,
  50. oCheckbox;
  51.  
  52. if (sID) {
  53.  
  54. oInput = Y.one("#" + sID);
  55.  
  56. if (oInput) {
  57. oCheckbox = getCheckbox(oInput);
  58. }
  59.  
  60. }
  61.  
  62. return oCheckbox;
  63.  
  64. };
  65.  
  66.  
  67. var updateCheckedState = function (input) {
  68.  
  69. var oCheckbox = getCheckbox(input);
  70.  
  71. if (input.get("checked")) {
  72. oCheckbox.addClass(sCheckboxCheckedClass);
  73. }
  74. else {
  75. oCheckbox.removeClass(sCheckboxCheckedClass);
  76. }
  77.  
  78. };
  79.  
  80.  
  81. var setActiveCheckbox = function (checkbox) {
  82.  
  83. checkbox.addClass(sCheckboxActiveClass);
  84. oActiveCheckbox = checkbox;
  85.  
  86. };
  87.  
  88.  
  89. var clearActiveCheckbox = function () {
  90.  
  91. if (oActiveCheckbox) {
  92. oActiveCheckbox.removeClass(sCheckboxActiveClass);
  93. oActiveCheckbox = null;
  94. }
  95.  
  96. };
  97.  
  98.  
  99. var onCheckboxMouseOver = function (event, matchedEl) {
  100.  
  101. if (oActiveCheckbox && oActiveCheckbox.compareTo(this)) {
  102. oActiveCheckbox.addClass(sCheckboxActiveClass);
  103. }
  104.  
  105. };
  106.  
  107.  
  108. var onCheckboxMouseOut = function (event) {
  109.  
  110. this.removeClass(sCheckboxActiveClass);
  111.  
  112. };
  113.  
  114.  
  115. var onDocumentMouseUp = function (event) {
  116.  
  117. var oCheckbox;
  118.  
  119. if (!bBlockDocumentMouseUp) {
  120.  
  121. oCheckbox = getCheckbox(event.target);
  122.  
  123. if ((oCheckbox && !oCheckbox.compareTo(oActiveCheckbox)) || !oCheckbox) {
  124. clearActiveCheckbox();
  125. }
  126.  
  127. }
  128.  
  129. bBlockDocumentMouseUp = false;
  130.  
  131. };
  132.  
  133.  
  134. var onCheckboxFocus = function (event) {
  135.  
  136. // Remove the focus style from any checkbox that might still have it
  137.  
  138. var oCheckbox = Y.one("#checkboxes").one(".yui-checkbox-focus");
  139.  
  140. if (oCheckbox) {
  141. oCheckbox.removeClass(sCheckboxFocusClass);
  142. }
  143.  
  144. // Defer adding key-related and click event listeners until
  145. // one of the checkboxes is initially focused.
  146.  
  147. if (!bKeyListenersInitialized) {
  148. initKeyListeners.call(event.container);
  149. }
  150.  
  151. var oCheckbox = getCheckbox(this);
  152.  
  153. oCheckbox.addClass(sCheckboxFocusClass);
  154.  
  155. };
  156.  
  157.  
  158. var onCheckboxBlur = function (event) {
  159.  
  160. if (bBlockBlur) {
  161. bBlockBlur = false;
  162. return;
  163. }
  164.  
  165. var oCheckbox = getCheckbox(this);
  166.  
  167. oCheckbox.removeClass(sCheckboxFocusClass);
  168.  
  169. if (!bBlockClearActive && oCheckbox.compareTo(oActiveCheckbox)) {
  170. clearActiveCheckbox();
  171. }
  172.  
  173. bBlockClearActive = false;
  174.  
  175. };
  176.  
  177.  
  178. var onCheckboxMouseDown = function (event) {
  179.  
  180. // Defer adding mouse-related and click event listeners until
  181. // the user mouses down on one of the checkboxes.
  182.  
  183. if (!bMouseListenersInitialized) {
  184. initMouseListeners.call(event.container);
  185. }
  186.  
  187. var oCheckbox,
  188. oInput;
  189.  
  190.  
  191. if (this.get("nodeName").toLowerCase() === "label") {
  192.  
  193. // If the target of the event was the checkbox's label element, the
  194. // label will dispatch a click event to the checkbox, meaning the
  195. // "onCheckboxClick" handler will be called twice. For that reason
  196. // it is necessary to block the "onDocumentMouseUp" handler from
  197. // clearing the active state, so that a reference to the active
  198. // checkbox still exists the second time the "onCheckboxClick"
  199. // handler is called.
  200.  
  201. bBlockDocumentMouseUp = true;
  202.  
  203. // When the user clicks the label instead of the checkbox itself,
  204. // the checkbox will be blurred if it has focus. Since the
  205. // "onCheckboxBlur" handler clears the active state it is
  206. // necessary to block the clearing of the active state when the
  207. // label is clicked instead of the checkbox itself.
  208.  
  209. bBlockClearActive = true;
  210.  
  211. oCheckbox = getCheckboxForLabel(this);
  212.  
  213. }
  214. else {
  215.  
  216. oCheckbox = this;
  217.  
  218. }
  219.  
  220. // Need to focus the input manually for two reasons:
  221. // 1) Mousing down on a label in Webkit doesn't focus its
  222. // associated checkbox
  223. // 2) By default checkboxes are focused when the user mouses
  224. // down on them. However, since the actually checkbox is
  225. // obscurred by the two span elements that are used to
  226. // style it, the checkbox wont' receive focus as it was
  227. // never the actual target of the mousedown event.
  228.  
  229. oInput = oCheckbox.one("input");
  230.  
  231.  
  232. // Calling Event.preventDefault won't block the blurring of the
  233. // currently focused element in IE, so we'll use the "bBlockBlur"
  234. // variable to stop the code in the blur event handler
  235. // from executing.
  236.  
  237. bBlockBlur = (UA.ie && oInput.get("checked"));
  238.  
  239.  
  240. oInput.focus();
  241.  
  242. setActiveCheckbox(oCheckbox);
  243.  
  244. // Need to call preventDefault because by default mousing down on
  245. // an element will blur the element in the document that currently
  246. // has focus--in this case, the input element that was
  247. // just focused.
  248.  
  249. event.preventDefault();
  250.  
  251. };
  252.  
  253.  
  254. var onCheckboxClick = function (event) {
  255.  
  256. var oInput;
  257.  
  258. if (this.compareTo(oActiveCheckbox)) {
  259.  
  260. oInput = this.one("input");
  261.  
  262. if (!event.target.compareTo(oInput)) {
  263.  
  264. // If the click event was fired via the mouse the checked
  265. // state will have to be manually updated since the input
  266. // is hidden offscreen and therefore couldn't be the
  267. // target of the click.
  268.  
  269. oInput.set("checked", (!oInput.get("checked")));
  270.  
  271. }
  272.  
  273. updateCheckedState(oInput);
  274. clearActiveCheckbox();
  275.  
  276. }
  277.  
  278. };
  279.  
  280.  
  281. var onCheckboxKeyDown = function (event) {
  282.  
  283. // Style the checkbox as being active when the user presses the
  284. // space bar
  285.  
  286. if (event.keyCode === 32) {
  287. setActiveCheckbox(this);
  288. }
  289.  
  290. };
  291.  
  292. Y.all("#checkboxes>div>span").addClass("yui-checkbox");
  293.  
  294. // Remove the "yui-checkboxes-loading" class used to hide the
  295. // checkboxes now that the checkboxes have been skinned.
  296.  
  297. Y.one("#checkboxes").get("ownerDocument").get("documentElement").removeClass("yui-checkboxes-loading");
  298.  
  299. // Add the minimum number of event listeners needed to start, bind the
  300. // rest when needed
  301.  
  302. Y.delegate("mousedown", onCheckboxMouseDown, "#checkboxes", ".yui-checkbox,label");
  303. Y.delegate("focus", onCheckboxFocus, "#checkboxes", "input[type=checkbox]");
  304.  
  305. });
YUI().use("*", function(Y) {
 
    var UA = Y.UA,
        getClassName = Y.ClassNameManager.getClassName,
        sCheckboxFocusClass = getClassName("checkbox", "focus"),    // Create yui-checkbox-focus
        sCheckboxCheckedClass = getClassName("checkbox", "checked"),    // Create yui-checkbox-checked
        sCheckboxActiveClass = getClassName("checkbox", "active"),  // Create yui-checkbox-active
        bKeyListenersInitialized = false,
        bMouseListenersInitialized = false,
        forAttr = (UA.ie && UA.ie < 8) ? "htmlFor" : "for",
        bBlockDocumentMouseUp = false,
        bBlockClearActive = false,
        bBlockBlur = false,     
        oActiveCheckbox;            
 
 
    var initKeyListeners = function () {
 
        this.delegate("keydown", onCheckboxKeyDown, ".yui-checkbox");
        this.delegate("click", onCheckboxClick, ".yui-checkbox");
        this.delegate("blur", onCheckboxBlur, "input[type=checkbox]");
 
        bKeyListenersInitialized = true;
 
    };
 
 
    var initMouseListeners = function () {
 
        this.delegate("mouseover", onCheckboxMouseOver, ".yui-checkbox");
        this.delegate("mouseout", onCheckboxMouseOut, ".yui-checkbox-active");
        this.get("ownerDocument").on("mouseup", onDocumentMouseUp);
 
        bMouseListenersInitialized = true;
 
    };
 
 
    var getCheckbox = function (node) {
 
        return (node.hasClass("yui-checkbox") ? node : node.ancestor(".yui-checkbox"));
 
    };
 
 
    var getCheckboxForLabel = function (label) {
 
        var sID = label.getAttribute(forAttr),
            oInput,
            oCheckbox;
 
        if (sID) {
 
            oInput = Y.one("#" + sID);
 
            if (oInput) {
                oCheckbox = getCheckbox(oInput);
            }
 
        }
 
        return oCheckbox;
 
    };
 
 
    var updateCheckedState = function (input) {
 
        var oCheckbox = getCheckbox(input);
 
        if (input.get("checked")) {
            oCheckbox.addClass(sCheckboxCheckedClass);
        }
        else {
            oCheckbox.removeClass(sCheckboxCheckedClass);
        }
 
    };
 
 
    var setActiveCheckbox = function (checkbox) {
 
        checkbox.addClass(sCheckboxActiveClass);
        oActiveCheckbox = checkbox;
 
    };
 
 
    var clearActiveCheckbox = function () {
 
        if (oActiveCheckbox) {
            oActiveCheckbox.removeClass(sCheckboxActiveClass);
            oActiveCheckbox = null;
        }
 
    };
 
 
    var onCheckboxMouseOver = function (event, matchedEl) {
 
        if (oActiveCheckbox && oActiveCheckbox.compareTo(this)) {
            oActiveCheckbox.addClass(sCheckboxActiveClass);
        }
 
    };
 
 
    var onCheckboxMouseOut = function (event) {
 
        this.removeClass(sCheckboxActiveClass);
 
    };              
 
 
    var onDocumentMouseUp = function (event) {
 
        var oCheckbox;
 
        if (!bBlockDocumentMouseUp) {
 
            oCheckbox = getCheckbox(event.target);
 
            if ((oCheckbox && !oCheckbox.compareTo(oActiveCheckbox)) || !oCheckbox) {
                clearActiveCheckbox();
            }
 
        }
 
        bBlockDocumentMouseUp = false;
 
    };
 
 
    var onCheckboxFocus = function (event) {
 
        //  Remove the focus style from any checkbox that might still have it
 
        var oCheckbox = Y.one("#checkboxes").one(".yui-checkbox-focus");
 
        if (oCheckbox) {
            oCheckbox.removeClass(sCheckboxFocusClass);
        }
 
        //  Defer adding key-related and click event listeners until 
        //  one of the checkboxes is initially focused.
 
        if (!bKeyListenersInitialized) {
            initKeyListeners.call(event.container);
        }
 
        var oCheckbox = getCheckbox(this);
 
        oCheckbox.addClass(sCheckboxFocusClass);
 
    };
 
 
    var onCheckboxBlur = function (event) {
 
        if (bBlockBlur) {
            bBlockBlur = false;
            return;
        }
 
        var oCheckbox = getCheckbox(this);
 
        oCheckbox.removeClass(sCheckboxFocusClass);
 
        if (!bBlockClearActive && oCheckbox.compareTo(oActiveCheckbox)) {
            clearActiveCheckbox();
        }
 
        bBlockClearActive = false;
 
    };
 
 
    var onCheckboxMouseDown = function (event) {
 
        //  Defer adding mouse-related and click event listeners until 
        //  the user mouses down on one of the checkboxes.
 
        if (!bMouseListenersInitialized) {
            initMouseListeners.call(event.container);
        }
 
        var oCheckbox,
            oInput;
 
 
        if (this.get("nodeName").toLowerCase() === "label") {
 
            //  If the target of the event was the checkbox's label element, the
            //  label will dispatch a click event to the checkbox, meaning the 
            //  "onCheckboxClick" handler will be called twice.  For that reason
            //  it is necessary to block the "onDocumentMouseUp" handler from
            //  clearing the active state, so that a reference to the active  
            //  checkbox still exists the second time the "onCheckboxClick"
            //  handler is called.
 
            bBlockDocumentMouseUp = true;
 
            //  When the user clicks the label instead of the checkbox itself, 
            //  the checkbox will be blurred if it has focus.  Since the 
            //  "onCheckboxBlur" handler clears the active state it is 
            //  necessary to block the clearing of the active state when the 
            //  label is clicked instead of the checkbox itself.
 
            bBlockClearActive = true;
 
            oCheckbox = getCheckboxForLabel(this);
 
        }
        else {
 
            oCheckbox = this;
 
        }
 
        //  Need to focus the input manually for two reasons:
        //  1)  Mousing down on a label in Webkit doesn't focus its  
        //      associated checkbox
        //  2)  By default checkboxes are focused when the user mouses 
        //      down on them.  However, since the actually checkbox is 
        //      obscurred by the two span elements that are used to 
        //      style it, the checkbox wont' receive focus as it was 
        //      never the actual target of the mousedown event.
 
        oInput = oCheckbox.one("input");
 
 
        //  Calling Event.preventDefault won't block the blurring of the 
        //  currently focused element in IE, so we'll use the "bBlockBlur"
        //  variable to stop the code in the blur event handler  
        //  from executing.
 
        bBlockBlur = (UA.ie && oInput.get("checked"));
 
 
        oInput.focus();
 
        setActiveCheckbox(oCheckbox);
 
        //  Need to call preventDefault because by default mousing down on
        //  an element will blur the element in the document that currently 
        //  has focus--in this case, the input element that was 
        //  just focused.
 
        event.preventDefault();
 
    };
 
 
    var onCheckboxClick = function (event) {
 
        var oInput;
 
        if (this.compareTo(oActiveCheckbox)) {
 
            oInput = this.one("input");
 
            if (!event.target.compareTo(oInput)) {
 
                //  If the click event was fired via the mouse the checked
                //  state will have to be manually updated since the input 
                //  is hidden offscreen and therefore couldn't be the 
                //  target of the click.
 
                oInput.set("checked", (!oInput.get("checked")));
 
            }
 
            updateCheckedState(oInput);
            clearActiveCheckbox();
 
        }
 
    };
 
 
    var onCheckboxKeyDown = function (event) {
 
        //  Style the checkbox as being active when the user presses the 
        //  space bar
 
        if (event.keyCode === 32) {
            setActiveCheckbox(this);
        }
 
    };
 
    Y.all("#checkboxes>div>span").addClass("yui-checkbox");
 
    //  Remove the "yui-checkboxes-loading" class used to hide the 
    //  checkboxes now that the checkboxes have been skinned.
 
    Y.one("#checkboxes").get("ownerDocument").get("documentElement").removeClass("yui-checkboxes-loading");
 
    //  Add the minimum number of event listeners needed to start, bind the 
    //  rest when needed
 
    Y.delegate("mousedown", onCheckboxMouseDown, "#checkboxes", ".yui-checkbox,label");
    Y.delegate("focus", onCheckboxFocus, "#checkboxes", "input[type=checkbox]");
 
});

Progressive Enhancement

The markup above will be transformed using both CSS and JavaScript. To account for the scenario where the user has CSS enabled in their browser but JavaScript is disabled, the CSS used to style the checkboxes will be loaded via JavaScript using the YUI instance's built-in Loader. Additionally, a small block of JavaScript will be placed in the <head> — used to temporarily hide the markup while the JavaScript and CSS are in the process of loading to prevent the user from seeing a flash unstyled content.

  1. YUI({
  2.  
  3. base: "../../build/",
  4.  
  5. // Load the stylesheet for the skinned checkboxes via JavaScript,
  6. // since without JavaScript skinning of the checkboxes wouldn't
  7. // be possible.
  8.  
  9. modules: {
  10.  
  11. "checkboxcss": {
  12. type: "css",
  13. fullpath: "assets/checkbox.css"
  14. },
  15. "checkboxjs": {
  16. type: "js",
  17. fullpath: "assets/checkbox.js",
  18. requires: ["classnamemanager", "event-focus", "node-event-delegate", "checkboxcss"]
  19. }
  20.  
  21. }
  22.  
  23. }).use("checkboxjs", function(Y, result) {
  24.  
  25. // The callback supplied to use() will be executed regardless of
  26. // whether the operation was successful or not. The second parameter
  27. // is a result object that has the status of the operation. We can
  28. // use this to try to recover from failures or timeouts.
  29.  
  30. if (!result.success) {
  31.  
  32. Y.log("Load failure: " + result.msg, "warn", "Example");
  33.  
  34. // Show the checkboxes if the loader failed that way the original
  35. // unskinned checkboxes will be visible so that the user can
  36. // interact with them either way.
  37.  
  38. document.documentElement.className = "";
  39.  
  40. }
  41.  
  42. });
  43.  
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 = "";
 
    }
 
});
 

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings