Bootstrap3で、タブ切替を使わずページ切り替えをできるようにするには。 : つねづね思ふこと

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

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

2015年7月12日

Bootstrap3でhtmlページを移動しないその場ページ切り替えを行う方法として調べてみたが、Bootstrap3自体にはそのような機能はないので、javascriptから直接css操作する方法でしのいでみた。

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

Bootstrap · The world's most popular mobile-first and responsive front-end framework. via kwout

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

http://designup.jp/bootstrap-offcanvas-315/

Bootstrapでoffcanvasメニューを作る方法 | Designup via kwout

ただどうせこれから新しく作るのであれば、今度からはページを切り替えるたびに一々ローディングや画面全体の再描画が発生しないようにしたい。
ということで、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();する。

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