« ラブライブ!劇場版は、相変わらず都合の良い展開が心地よかった | メイン | 大量ファイルのコピー時間を短縮する方法 »

2015年7月12日

Bootstrap3で、タブ切替を使わずページ切り替えをできるようにするには。


このエントリーをはてなブックマークに追加 Clip to Evernote
Bootstrap3でhtmlページを移動しないその場ページ切り替えを行う方法として調べてみたが、Bootstrap3自体にはそのような機能はないので、javascriptから直接css操作する方法でしのいでみた。

Bootstrapは、便利なWebライブラリだ。

PC/スマートフォン解像度に合わせて自動的にレイアウトを変えてくれるし、いまどきなフラットデザインな整ったボタンとかフォーム系・ナビゲーションバー・グラフィコン等々がすぐ使える。
Bootstrap3からはOff Canvasにも対応していて、描画領域が狭い時はスマートフォンアプリにありがちなメニューが横から出すことも可能になった。
そこで、Off CanvasメニューなPC/スマートフォンにも両対応させたいWebアプリでBootstrap3を使いたいと組んでいます。

ただどうせこれから新しく作るのであれば、今度からはページを切り替えるたびに一々ローディングや画面全体の再描画が発生しないようにしたい。
ということで、jQuery Mobileでいうところのページ(<div data-role="page" id="ページ名">)の実装をしたいと考えていました。
ですが、Bootstrap3には、ページ切り替えを指定するUIはあっても、ページング(1つのページを複数のページとして分割表示する機能)は搭載していないっぽい。

そこで、bootstrap3には、タブ切替機能がありますから、このタブ切替部分をOff Canvasに指定して、これでページングのかわりにしよう!と考え試してみた。
ですが、ページによってはタブを使いたかったのに、どうもタブの入れ子構造には対応していないのか、ページ内のタブがうまく動かない。困った。

そこで人に聞いたりしていろいろ考えてみたのですが、自分の中でしっくりきたのは・・・

1.起動時に1ページ目以外のページが出てくるのはダサい。
まずは各ページとしたい箇所に <div id="page-○×" style="visibility: hidden;">(ページ内容)</div> を指定する。
※1ページ目は style="visibility: visible;" とすること。

2.ロードが完了したらページ切り替えが有効になるようにより
for(var i = 1;i <= lastPageNumber;i++) {$('#page-'+i).css('visibility', 'visible');} を実行し、そして3番をページ1に対してshow();するよう実行する。
※予め var lastPageNumber = ページの最後 を指定しておくこと;

3.各ページに以下のonClick指定をする。
それは呼び出した$('#page-'+i).hide();で該当ページ以外をすべて閉じて、該当ページのみ$('#page-'+i).show();する。

・・・って特に工夫ってほどでもないし、そのまんまですね!


Bootstrapファーストガイド―CSS設計の手間を大幅に削減!
相澤 裕介
カットシステム
売り上げランキング: 21,048

投稿者 kuze : 2015年7月12日 19:40


■このエントリーに関連した記事

■「実用ソフト&サイト」カテゴリの最新記事


« ラブライブ!劇場版は、相変わらず都合の良い展開が心地よかった | メイン | 大量ファイルのコピー時間を短縮する方法 »




トラックバック

このエントリーのトラックバックURL:
http://kuze.tsukaeru.jp/tsunezune/movabletype/mt-tb.cgi/280

コメント

コメントしてください




保存しますか?


Edit  
くじぇ工作所サイトマップ

このサイトについて
© Copyright Hiroshi Kuze 1996-2017 ( hiroshikuze@gmail.com ).

Analyzed by efStat Analyzed by Log_on! WEBCLICKERS.NET 人気blogランキング