[JS]二列にしたり折りたたんだり、リストの表示を変更するスクリプト -Adaptable view
Post on:2009年7月8日
sponsors
リストの表示をリアルタイムに、二列にしたり折りたたんだりと変更するスクリプトをJanko At Warp Speedから紹介します。
Adaptable view - how do they do it?
デモでは、二列版と折りたたみ版の二つが公開されています。
表示切替は、黄色のアイコンです。
リストのカラーやサイズなどのデザインはスタイルシートで指定を行い、表示変更はjQueryをベースに下記のスクリプトを記述します。
二列版
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="js" cols="60" rows="5"> $("#fullswitch").click(function() { $("#list").removeClass("compact"); }); $("#compactswitch").click(function() { $("#list").addClass("compact"); }); </textarea> |
折りたたみ版
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
sponsors
