[mootools]ボタンでスタイルシートを切り替える

mootoolsで最近ブログに多いスタイルシート切り替えのサンプル。
※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも

スタイルの違うファイルを3種類用意し、それぞれボタンを押すと切り替わるようにするもの。
このサンプルは記憶させないので、ページを開くたびにシートがデフォルトに戻る。

<a id="s1" href="#">StyleA</a>
<a id="s2" href="#">StyleB</a>
<a id="s3" href="#">StyleC</a>
window.addEvent('domready', function(){
var path = 'css/';
var style_1, style_2, style_3;

/* Style 1 */
$('s1').addEvent('click', function(e) {
e = new Event(e).stop();
url ='style.css';
cssid ='style1';
if (style_1) style_1.remove();
new Asset.css(path + url, {id:cssid});
style_1 = $(cssid);
});

/* Style 2 */
$('s2').addEvent('click', function(e) {
e = new Event(e).stop();
url ='style-w.css';
cssid = 'style2';
if (style_2) style_2.remove();
new Asset.css(path + url, {id:cssid});
style_2 = $(cssid);
});

/* Style 3 */
$('s3').addEvent('click', function(e) {
e = new Event(e).stop();
url ='style-b.css';
cssid = 'style3';
if (style_3) style_3.remove();
new Asset.css(path + url, {id: cssid});
style_3 = $(cssid);
});

});

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください