はてなブログでプログラムを学ぼう10 jQueryでCSSの切替その2
表レイアウトのワンタッチ切替その2、詳細表示、非表示
今度は表が狭い時は内容を簡易表示、広い時は詳細表示できるように改良。
例えば、カレンダーの月表示では予定の先頭1文字だけ表示して、日表示では全内容を表示するなど。
クラスの切替は前回と同じで、子クラスの指定で対応します。
まず、表組みの中にdevで略では表示しない部分を作成
<td>25<dev>p 1th</dev></td>
次に切り替えるcssを設定
.tbl1 td dev{
tbl1クラスのtdタグのdevタグのみ適用する指定
(親タグ+スペース+子タグ+スペース+孫タグ)
CSS設定内容
.tbl1 td dev{
visibility: hidden; ←表示非表示
white-space: nowrap; ←自動改行を止める
overflow: hidden; ←はみ出た部分を非表示にする
}
切り替えボタンを選択タグみたいに装飾
前回はボタン操作で切り替えていました、かっこ悪いので、トグルボタンぽく、選択時は押し込まれている状態にしましょ。
これもcssの指定変更で対応。簡単ですね。
HTML設定内容
<p><input id="btn1" class="btn_on" type="button" value="縮小" /><input id="btn2" class="btn_off" type="button" value="拡大" /></p>
CSS設定内容
//押し込まれているボタン
.btn_on {
border-style:inset;
}
//押されていないボタン
.btn_off {
border-style:outset;
}
script設定内容
$('#btn1') //縮小ボタンが押された
.on('click', function(){
$('#tbl').removeClass('tbl2');
$('#tbl').addClass('tbl1');
$('#btn1').removeClass('btn_off');
$('#btn1').addClass('btn_on');
$('#btn2').removeClass('btn_on');
$('#btn2').addClass('btn_off');
});
$('#btn2') //拡大ボタンが押された
.on('click', function(){
$('#tbl').removeClass('tbl1');
$('#tbl').addClass('tbl2');
$('#btn1").removeClass('btn_on');
$('#btn1').addClass('btn_off');
$('#btn2').removeClass('btn_off');
$('#btn2').addClass('btn_on');
});
以下テスト
拡大ボタンで列の幅を広くできます。
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ロッシ | 25 |
16 |
25 |
16 |
20 |
16 |
20 |
25 |
16 |
16 |
16 |
25 |
11 |
ロレンソ | 13 |
13 |
11 |
25 |
25 |
25 |
25 |
16 |
13 |
20 |
25 |
13 |
- |
マルケス | 11 |
25 |
- |
20 |
13 |
- |
- |
20 |
25 |
25 |
20 |
- |
25 |
以上
とりあえず終了