YUI Library JavaScript DHTML


            



    
Using StyleSheet to create a page theme

/*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;
}













Using StyleSheet to create a page theme


  In this example, we'll change some colors in this page's color theme.  Enter any valid CSS color value into the inputs and submit the cahnges to see them applied to the page.




    
        
            Example values: #123456 or #123 or rgb(0,10,30) or red

            Headings and labels
                
            h1,h2,h3,h4,h5,h6,
#demo label {
    color: #e76300;
}

            Demo background
                
            .example .promo {
    background-color: #89d;
}

            Left nav highlight
                
            #toc ul li.active,
#toc ul li a:hover {
    background-color: #f82;
}



(function () {
// Some shortcuts
var Dom        = YAHOO.util.Dom,
    trim       = YAHOO.lang.trim,
    Demo;
Demo = YAHOO.namespace('demo').PageTheme = {
    theme : null,
    
    headings   : null,
    background : null,
    highlight  : null,
    isValidColor : function (v) {
        return /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(v) ||
               /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(v) ||
               /^[a-z]+$/i.test(v);
    },
    init : function () {
        // Create a new StyleSheet instance for us to override some current
        // page styles.  For illustration, seed it with the CSS to style the
        // demo form
        Demo.theme = YAHOO.util.StyleSheet("\
            #demo form,\
            #demo fieldset {\
                border: none; padding: 0; margin: 0;\
            }\
            #demo fieldset p {\
                background: #fff;\
                border: 1px solid #ccc;\
                padding: 1em 1ex;\
            }\
            #demo pre code {\
                background: #fff;\
                border: 1px solid #ccc;\
                color: #555;\
                display: block;\
                font-weight: normal;\
                margin: 1ex 0 1em;\
                padding: 1ex;\
            }\
            #demo label {\
                font-weight: bold;\
                color: #e76300;\
            }\
            #demo pre code em {\
                color: #000;\
                font-weight: bold;\
            }\
        ");
        // Store the input fields for value retrieval
        Demo.headings   = Dom.get('demo_headings');
        Demo.background = Dom.get('demo_bg');
        Demo.highlight  = Dom.get('demo_highlight');
        // Set up the submit handler to update the page styles
        YAHOO.util.Event.on('demo_form','submit', function (e) {
            YAHOO.util.Event.stopEvent(e);
            Demo.update();
        });
    },
    update : function () {
        var v = trim(Demo.headings.value);
        if (Demo.isValidColor(v)) {
            // multiple selectors are delimited by commas
            Demo.theme.set('h1,h2,h3,h4,h5,h6, #demo label', { color : v });
            Dom.get('demo_heading_value').innerHTML = v;
        }
        v = trim(Demo.background.value);
        if (Demo.isValidColor(v)) {
            // use camelCase for style property names
            Demo.theme.set('.example .promo', { backgroundColor : v });
            Dom.get('demo_background_value').innerHTML = v;
        }
        v = trim(Demo.highlight.value);
        if (Demo.isValidColor(v)) {
            Demo.theme.set(
                '#toc ul li.selected,'+
                '#toc ul li a:hover', { backgroundColor : v });
            Dom.get('demo_highlight_value').innerHTML = v;
        }
    }
};
// Initialize the interface when the DOM is ready
YAHOO.util.Event.onDOMReady(Demo.init);
})();





   
   
yui_2.7.0b.zip( 4,431 k)