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

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

2015年7月12日

このエントリーをはてなブックマークに追加
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


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

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

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


自己紹介
PHPやVBによるコーディングやシステムエンジニアを仕事にしています。
主にiPhoneアプリの紹介やWeb開発などのPC系の話題と、アニメやゲームなどのサブカルな話題を取り扱っています。

[PR]

instagram

カテゴリ

最近のエントリー

最近掲載した画像
  • GitHubへ『Manually image classification for AI』を公開しました
  • うどんを見ながら時刻がわかる『うどん時計』を公開しました
  • うどんを見ながら時刻がわかる『うどん時計』を公開しました
  • Flickrから指定したキーワードに関する画像とかをダウンロードするimage-loader-from-flickrを公開しました
  • 「四月一日さん家の」は緩い3姉妹ものだけど、両親について謎が隠されていて油断できない
  • サーモス ステンレスランチジャー(保温効果付き弁当箱)であったか昼ご飯を食べている今日このごろ
  • 大人の麻しん対策としてMMRワクチンを予防接種してきた
  • 親知らずのむし歯を治療して合わせて神経も抜いてもらいました

RSS
更新情報はRSSをご利用下さい