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

サイト構築 -JavaScript

Post on:2009年7月8日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

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

Adaptable view - how do they do it?

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

demo: 二列

demo: 折りたたみ

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

二列版

<textarea name="code" class="js" cols="60" rows="5">
$("#fullswitch").click(function() {
    $("#list").removeClass("compact");
});
$("#compactswitch").click(function() {
    $("#list").addClass("compact");
});
</textarea>

$("#fullswitch").click(function() {

$("#list").removeClass("compact");

});

$("#compactswitch").click(function() {

$("#list").addClass("compact");

});

</textarea>

折りたたみ版

<textarea name="code" class="js" cols="60" rows="5">
$("#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();
});
</textarea>