motogp fan

motogp ファンによる、雑ブログ、ガジェットネタも

はてなブログでプログラムを学ぼう10 jQueryでCSSの切替その2

はてなブログ内でjavaScriptjQuery勉強中。 

表レイアウトのワンタッチ切替その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');
});

 

 

以下テスト

 拡大ボタンで列の幅を広くできます。

 10111213
ロッシ 25p 1th 16p 3th 25p 1th 16p 3th 20p 2th 16p 3th 20p 2th 25p 1th 16p 3th 16p 3th 16p 3th 25p 1th 11p 5th
ロレンソ 13p 4th 13p 4th 11p 5th 25p 1th 25p 1th 25p 1th 25p 1th 16p 3th 13p 4th 20p 2th 25p 1th 13p 4th -p Retired
マルケス 11p 4th 25p 1th -p Retired 20p 2th 13p 4th -p Retired -p Retired 20p 2th 25p 1th 25p 1th 20p 2th -p Retired 25p 1th

 

 

 以上

とりあえず終了