[JS]二列にしたり折りたたんだり、リストの表示を変更するスクリプト -Adaptable view

リストの表示をリアルタイムに、二列にしたり折りたたんだりと変更するスクリプトをJanko At Warp Speedから紹介します。

Adaptable view – how do they do it?

デモでは、二列版と折りたたみ版の二つが公開されています。
表示切替は、黄色のアイコンです。

demo: 二列

demo: 折りたたみ

リストのカラーやサイズなどのデザインはスタイルシートで指定を行い、表示変更はjQueryをベースに下記のスクリプトを記述します。

二列版

$("#fullswitch").click(function() {
    $("#list").removeClass("compact");
});
$("#compactswitch").click(function() {
    $("#list").addClass("compact");
});

折りたたみ版

$("#singleswitch").click(function() {
    $("#list li .url").hide();
    $("#list li .desc").hide();
});
$("#compactswitch").click(function() {
    $("#list li .url").show();
    $("#list li .desc").hide();
});
$("#fullswitch").click(function() {
    $("#list li .url").show();
    $("#list li .desc").show();
});

Post on:2009年7月8日