Yahoo! UI Library 3（YUI3）のウィジェット

Yahoo! UI Library Ver.3 を使ってみよう（7）

　それぞれのスキンの書き方を説明します。スライダーを順に並べた例題です。リスト4を見てください。

［リスト4］sliderのスキン（WT_slider1.html）

YUI({
    skin: {
        overrides: {
            slider: [					//（1）
                'sam',
                'sam-dark', 
                'capsule',
                'capsule-dark', 
                'round',
                'round-dark',
                'audio-light',
                'audio'
            ]
        }
    }
}).use('slider', function ( Y ) {
    new Y.Slider().render( '#sam' );		//（2）
    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' );
} );

</script>
</head>
<body>
<div>
    <div>
        <div>
            <div>
                <h4>Light skins</h4>
                <div class="yui3-skin-sam">	//（3）
                    <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>
            <div>
                <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>

　（1）で使用するスライダーを指定しています。（2）は各スライダーをnodeへの対応付けを行っています。（3）は各スライダーのスキンの設定です。対応を以下に表で示します。

スライダーとスキンの対応表

スライダー	スキン
sam	yui3-skin-sam
sam-dark	yui3-skin-sam-dark
capsule	yui3-skin-capsule
capsule-dark	yui3-skin-capsule-dark
round	yui3-skin-round
round-dark	yui3-skin-round-dark
audio-light	yui3-skin-audio-light
audio	yui3-skin-audio

　好きな形を選んで使ってみてください。