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

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

2015年7月12日

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


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

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

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


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

[PR]

Twitter
>> その他のtwitter

instagram

カテゴリ

最近のエントリー

最近掲載した画像
  • パシフィックリム アップライジングは、日本の描画がネタ過ぎだけど、許す(ネタバレ)
  • Office Onlineは簡単で単純な内容を急に修正するのに使える
  • Office Onlineは簡単で単純な内容を急に修正するのに使える
  • J:COM Pioneer BD-V302j(Smart J:COM Box)用の新しいリモコンは、本体にリモコンを向けなくても操作できた!
  • J:COM Pioneer BD-V302j(Smart J:COM Box)用の新しいリモコンは、本体にリモコンを向けなくても操作できた!
  • 桜の写真を何点かアップしてみるin大阪2018
  • 桜の写真を何点かアップしてみるin大阪2018
  • 桜の写真を何点かアップしてみるin大阪2018
  • 桜の写真を何点かアップしてみるin大阪2018
  • 桜の写真を何点かアップしてみるin大阪2018
  • 桜の写真を何点かアップしてみるin大阪2018
  • 花粉症対策2018と点鼻薬「ナーザルスキットN」
  • 花粉症対策2018と点鼻薬「ナーザルスキットN」
  • DS218jを購入したが、なかなかサーバ構築が上手く決まらないっ
  • DS218jを購入したが、なかなかサーバ構築が上手く決まらないっ

RSS
更新情報はRSSをご利用下さい
サイトマップ