YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Slider: Alternate skins

## Slider: Alternate skins

This example demonstrates the alternate skins available for Slider, and how to apply them.

View example in new window.

#### Light skins

##### Sam skin

##### Capsule skin

##### Round skin

##### Audio skin (light)

#### Dark skins

##### Sam skin (dark)

##### Capsule skin (dark)

##### Round skin (dark)

##### Audio skin

### Specify the skin in the YUI config

To access alternate skins for a component, specify an override in the YUI configuration. Then just `use( "slider" )` as you normally would.

    YUI({    skin: {        overrides: {            slider: [ "capsule" ]        }    }}).use( "slider", function (Y) {    ...});

    YUI({
        skin: {
            overrides: {
                slider: [ "capsule" ]
            }
        }
    }).use( "slider", function (Y) {
        ...
    });

YUI({ skin: { overrides: { slider: [ "capsule" ] } } }).use( "slider", function (Y) { ... });

### Use the appropriate skin class in the markup

The default skin is the Sam skin. Style YUI components with this skin by including the class `yui3-skin-sam` in the class list of an element that contains the component. Typically, setting `<body class="yui3-skin-sam">` is good enough.

When overriding the default skin, use a different class on the containing element.

    <div class="yui3-skin-round-dark">    <h5>Round skin (dark)</h5>    <div id="round_dark"><!-- Slider rendered here --></div></div>

    <div class="yui3-skin-round-dark">
        <h5>Round skin (dark)</h5>
        <div id="round_dark"><!-- Slider rendered here --></div>
    </div>

<div class="yui3-skin-round-dark"> <h5>Round skin (dark)</h5> <div id="round_dark"><!-- Slider rendered here --></div> </div>

### Full Code Listing

This is the full code listing for this example.

#### Markup

    <div id="demo">    <div class="yui-g"><!-- Two column (50/50) layout -->        <div class="yui-u first">            <div class="light">                <h4>Light skins</h4>                <div class="yui3-skin-sam">                    <h5>Sam skin</h5>                    <div id="sam"></div>                </div>                 <div class="yui3-skin-capsule">                    <h5>Capsule skin</h5>                    <div id="capsule"></div>                </div>                 <div class="yui3-skin-round">                    <h5>Round skin</h5>                    <div id="round"></div>                </div>                 <div class="yui3-skin-audio-light">                    <h5>Audio skin (light)</h5>                    <div id="audio_light"></div>                </div>            </div>        </div>        <div class="yui-u">            <div class="dark">                <h4>Dark skins</h4>                <div class="yui3-skin-sam-dark">                    <h5>Sam skin (dark)</h5>                    <div id="sam_dark"></div>                </div>                 <div class="yui3-skin-capsule-dark">                    <h5>Capsule skin (dark)</h5>                    <div id="capsule_dark"></div>                </div>                 <div class="yui3-skin-round-dark">                    <h5>Round skin (dark)</h5>                    <div id="round_dark"></div>                </div>                 <div class="yui3-skin-audio">                    <h5>Audio skin</h5>                    <div id="audio"></div>                </div>            </div>        </div>    </div></div>

    <div id="demo">
        <div class="yui-g"><!-- Two column (50/50) layout -->
            <div class="yui-u first">
                <div class="light">
                    <h4>Light skins</h4>
                    <div class="yui3-skin-sam">
                        <h5>Sam skin</h5>
                        <div id="sam"></div>
                    </div>

                    <div class="yui3-skin-capsule">
                        <h5>Capsule skin</h5>
                        <div id="capsule"></div>
                    </div>

                    <div class="yui3-skin-round">
                        <h5>Round skin</h5>
                        <div id="round"></div>
                    </div>

                    <div class="yui3-skin-audio-light">
                        <h5>Audio skin (light)</h5>
                        <div id="audio_light"></div>
                    </div>
                </div>
            </div>
            <div class="yui-u">
                <div class="dark">
                    <h4>Dark skins</h4>
                    <div class="yui3-skin-sam-dark">
                        <h5>Sam skin (dark)</h5>
                        <div id="sam_dark"></div>
                    </div>

                    <div class="yui3-skin-capsule-dark">
                        <h5>Capsule skin (dark)</h5>
                        <div id="capsule_dark"></div>
                    </div>

                    <div class="yui3-skin-round-dark">
                        <h5>Round skin (dark)</h5>
                        <div id="round_dark"></div>
                    </div>

                    <div class="yui3-skin-audio">
                        <h5>Audio skin</h5>
                        <div id="audio"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div id="demo"> <div class="yui-g"><!-- Two column (50/50) layout --> <div class="yui-u first"> <div class="light"> <h4>Light skins</h4> <div class="yui3-skin-sam"> <h5>Sam skin</h5> <div id="sam"></div> </div> <div class="yui3-skin-capsule"> <h5>Capsule skin</h5> <div id="capsule"></div> </div> <div class="yui3-skin-round"> <h5>Round skin</h5> <div id="round"></div> </div> <div class="yui3-skin-audio-light"> <h5>Audio skin (light)</h5> <div id="audio_light"></div> </div> </div> </div> <div class="yui-u"> <div class="dark"> <h4>Dark skins</h4> <div class="yui3-skin-sam-dark"> <h5>Sam skin (dark)</h5> <div id="sam_dark"></div> </div> <div class="yui3-skin-capsule-dark"> <h5>Capsule skin (dark)</h5> <div id="capsule_dark"></div> </div> <div class="yui3-skin-round-dark"> <h5>Round skin (dark)</h5> <div id="round_dark"></div> </div> <div class="yui3-skin-audio"> <h5>Audio skin</h5> <div id="audio"></div> </div> </div> </div> </div> </div>

#### JavaScript

    YUI({    skin: {        overrides: {            slider: [                'sam',          // The default skin                'sam-dark',     // Suited for dark backgrounds                 'capsule',      // You only need to include one skin                'capsule-dark', // in the overrides section unless you                                // are using multiple skins on the same page                'round',                'round-dark',                 'audio-light',                'audio'            ]        }    }}).use('slider', function ( Y ) {     new Y.Slider().render( '#sam' );    new Y.Slider().render( '#sam_dark' );     new Y.Slider().render( '#capsule' );    new Y.Slider().render( '#capsule_dark' );     new Y.Slider().render( '#round' );    new Y.Slider().render( '#round_dark' );     new Y.Slider().render( '#audio_light' );    new Y.Slider().render( '#audio' ); } );

    YUI({
        skin: {
            overrides: {
                slider: [
                    'sam',          // The default skin
                    'sam-dark',     // Suited for dark backgrounds

                    'capsule',      // You only need to include one skin
                    'capsule-dark', // in the overrides section unless you
                                    // are using multiple skins on the same page
                    'round',
                    'round-dark',

                    'audio-light',
                    'audio'
                ]
            }
        }
    }).use('slider', function ( Y ) {

        new Y.Slider().render( '#sam' );
        new Y.Slider().render( '#sam_dark' );

        new Y.Slider().render( '#capsule' );
        new Y.Slider().render( '#capsule_dark' );

        new Y.Slider().render( '#round' );
        new Y.Slider().render( '#round_dark' );

        new Y.Slider().render( '#audio_light' );
        new Y.Slider().render( '#audio' );

    } );

YUI({ skin: { overrides: { slider: [ 'sam', // The default skin 'sam-dark', // Suited for dark backgrounds 'capsule', // You only need to include one skin 'capsule-dark', // in the overrides section unless you // are using multiple skins on the same page 'round', 'round-dark', 'audio-light', 'audio' ] } } }).use('slider', function ( Y ) { new Y.Slider().render( '#sam' ); new Y.Slider().render( '#sam_dark' ); new Y.Slider().render( '#capsule' ); new Y.Slider().render( '#capsule_dark' ); new Y.Slider().render( '#round' ); new Y.Slider().render( '#round_dark' ); new Y.Slider().render( '#audio_light' ); new Y.Slider().render( '#audio' ); } );

Copyright © 2010 Yahoo! Inc. All rights reserved.

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